/* ──────────────────────────────────────────────────────────────────────────
 * GENERATED by scripts/skins/derive-skin.mjs m1 — do not edit.
 * Source: app/(customer)/skins/1sn.css, re-scoped to body[data-skin="m1"] and re-coloured
 * by scripts/skins/recipes/m1.mjs; overrides from scripts/skins/recipes/m1.overrides.css.
 * ──────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
 * Skin: M1 Nails Shudehill (`shops.skin = 'm1'`, lib/skins/registry.ts)
 *
 * Applied only under `body[data-skin="m1"]`. Generic shops never match a rule
 * in this file. Since Oct 2026 it is the `base` of M1's generated sheet
 * (scripts/skins/recipes/m1.mjs → public/icons/skins/m1/m1.css, linked for
 * M1 alone): edit it here and run `node scripts/skins/derive-skin.mjs m1`.
 *
 * Where 1SN is cream paper and quiet gold, M1 is the shopfront at night: an
 * ink ground, cream type, and the one hot pink off the sign used for anything
 * earned or ready. The palette itself is injected by the layout from the
 * registry (--brand-*, --skin-accent, --skin-glow); this sheet sets the shape
 * and rhythm — 20px cards on ink, Khand condensed uppercase headings over a
 * Manrope body, the pill tab bar, round stamp discs, and one spring for all
 * movement.
 *
 * Rule of thumb: tokens first, selectors second. Anything that needs a
 * different SHAPE (the round slot, the pill nav, the stamp sheet) is a
 * component branch on useSkin(), not a CSS override.
 * ──────────────────────────────────────────────────────────────────────── */

body[data-skin="m1"] {
  /* Radii — cards 20, sheets 26 (component), thumbs 12, inputs 10. */
  --radius:     10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;

  /* Shadows on ink are depth, not smudge: dark and tight, never a grey haze. */
  --elev-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px -16px rgba(0,0,0,.8);
  --elev-2: 0 14px 34px -20px rgba(0,0,0,.85);
  --elev-3: 0 28px 64px -26px rgba(0,0,0,.9);
  --hairline: 1px solid rgba(243,236,226,.14);

  /* Motion — one spring for movement, one ease for fades. */
  --ease-spring: cubic-bezier(.32, 1.35, .42, 1);
  --ease-foil:   cubic-bezier(.2, .7, .2, 1);
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --dur-base:    280ms;
  --dur-sheet:   480ms;

  font-size: 15px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── Display face: Khand, condensed and set in caps like the shop sign ───── */
body[data-skin="m1"] .font-display {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.95;
}
body[data-skin="m1"] h1.font-display { font-size: 32px; }
body[data-skin="m1"] h2.font-display { font-size: 24px; }

/* Eyebrows: small, tracked, pink — the one place the accent does quiet work. */
body[data-skin="m1"] .brand-text-faint.uppercase,
body[data-skin="m1"] .skin-eyebrow {
  font-family: var(--font-khand), Impact, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--skin-accent);
  opacity: 1;
}

/* ── Cards: raised plum on the ink ground, one hairline, no border glow ─── */
body[data-skin="m1"] .brand-surface,
body[data-skin="m1"] [class*="rounded-"][class*="bg-"] {
  background: var(--brand-surface);
  border-radius: var(--radius-2xl);
}
body[data-skin="m1"] [role="status"]:not(.skin-tabs) { border-radius: var(--radius-2xl); }

/* ── Tab bar: a floating ink pill, the live tab filled pink ───────────────
 * The 'pill' nav shape renders a bare <nav class="skin-tabs"> with NO layout
 * classes of its own — every pill skin owns the whole geometry. Set only the
 * colours (as this file first did) and the bar collapses into a stacked list
 * at the foot of the document: no position, no grid, six full-width rows. */
body[data-skin="m1"] .skin-tabs {
  position: fixed;
  left: 14px; right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  height: 62px;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  padding: 6px;
  border-radius: 999px;
  background: #1a0f1e;
  border: var(--hairline);
  box-shadow: var(--elev-2);
}
body[data-skin="m1"] .skin-tabs a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 0 2px;
  border-radius: 999px;
  min-width: 0;
  font-family: var(--font-khand), Impact, sans-serif;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(243,236,226,.62);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
/* Six tabs share 390px. One line, ellipsis, never wrap. */
body[data-skin="m1"] .skin-tabs a > span:last-child {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-skin="m1"] .skin-tabs a[aria-current="page"] {
  color: var(--brand-bg);
  background: var(--skin-accent);
  view-transition-name: skin-tab-active;
}
body[data-skin="m1"] .skin-tabs svg { width: 18px; height: 18px; }
::view-transition-group(skin-tab-active) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.32,1.35,.42,1); }

/* ── Buttons: pink pills, set in the sign's caps ────────────────────────── */
body[data-skin="m1"] .skin-pill {
  border-radius: 999px;
  font-family: var(--font-khand), Impact, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
body[data-skin="m1"] .skin-pill:active { transform: scale(.97); }

/* ── Round stamp slot — the disc off the salon's own card ───────────────── */
body[data-skin="m1"] .skin-round {
  /* The slot sizes itself, not its contents. Without this the used width is
     shrink-to-fit (margin:0 auto suppresses the grid stretch), so the ONLY
     thing giving the slot a size is the intrinsic width of the monogram
     inside it — and one 404 on that PNG collapses every stamp on the card to
     a 2px dot. Same computed size as before (border-box), zero risk. */
  width: 100%;
  aspect-ratio: 1;
  max-width: 54px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1.5px solid rgba(243,236,226,.28);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
body[data-skin="m1"] .skin-round img {
  width: 58%; height: auto; display: block;
  opacity: 0; transform: scale(.4);
  transition: opacity 280ms var(--ease-out), transform 480ms var(--ease-spring);
}
body[data-skin="m1"] .skin-round.is-filled {
  background: var(--skin-accent);
  border-color: var(--skin-accent);
}
body[data-skin="m1"] .skin-round.is-filled img { opacity: 1; transform: none; }
body[data-skin="m1"] .skin-round.is-next { border-style: dashed; border-color: var(--skin-accent); }
body[data-skin="m1"] .skin-round.is-landing::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--skin-accent); opacity: 0;
  animation: skin-ring 900ms var(--ease-out) forwards;
}
@keyframes skin-ring {
  0%   { opacity: 0; transform: scale(.85); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}

/* ── Stamp-earned sheet ─────────────────────────────────────────────────── */
body[data-skin="m1"] .skin-sheet {
  border-radius: 26px 26px 0 0;
  background: var(--brand-surface);
  box-shadow: var(--elev-3);
  animation: skin-sheet-up var(--dur-sheet) var(--ease-spring) both;
}
@keyframes skin-sheet-up {
  from { transform: translateY(105%); }
  to   { transform: none; }
}
body[data-skin="m1"] .skin-sheet-down { animation: skin-sheet-down 220ms var(--ease-in) both; }
@keyframes skin-sheet-down { to { transform: translateY(105%); } }

/* The big disc on the sheet, the same slot blown up. */
body[data-skin="m1"] .skin-big-almond {
  width: 104px; height: 104px; margin: 6px auto 14px;
  border-radius: 50%;
  background: var(--skin-accent);
  display: flex; align-items: center; justify-content: center; position: relative;
}
body[data-skin="m1"] .skin-big-almond img { width: 56px; height: auto; }
body[data-skin="m1"] .skin-big-almond::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--skin-glow) 70%, transparent);
}

/* ── Ready reward: the one glow in the app, pink on ink ─────────────────── */
body[data-skin="m1"] .skin-glow { position: relative; overflow: hidden; }
body[data-skin="m1"] .skin-glow::before {
  content: ""; position: absolute; right: -50px; top: -50px; width: 210px; height: 210px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--skin-glow) 55%, transparent), transparent 70%);
  pointer-events: none;
}

/* ── Lists: staggered entrance for diary rows and reward rows ───────────── */
body[data-skin="m1"] .skin-stagger > * { animation: skin-rise 480ms var(--ease-spring) both; }
body[data-skin="m1"] .skin-stagger > *:nth-child(2) { animation-delay: 50ms; }
body[data-skin="m1"] .skin-stagger > *:nth-child(3) { animation-delay: 100ms; }
body[data-skin="m1"] .skin-stagger > *:nth-child(4) { animation-delay: 150ms; }
body[data-skin="m1"] .skin-stagger > *:nth-child(5) { animation-delay: 200ms; }
body[data-skin="m1"] .skin-stagger > *:nth-child(n+6) { animation-delay: 240ms; }
@keyframes skin-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Generic chrome the skin turns off: corner brackets, the foil sweep, the
   breathing on empty slots. None of it belongs on this brand. */
body[data-skin="m1"] .skin-hide { display: none !important; }
body[data-skin="m1"] .soft-breath { animation: none; }

/* Status colour: the salon's own pink rather than the platform's signal green. */
body[data-skin="m1"] { --skin-status: #ff8fc4; }

/* ── Empty states: give them the page, not a small floating box ─────────── */
body[data-skin="m1"] .skin-empty {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: 8vh;
}

body[data-skin="m1"] { --radius:     0; --radius-lg:  0; --radius-xl:  0; --radius-2xl: 0; --elev-1: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px -14px rgba(0,0,0,.22); --elev-2: 0 10px 30px -18px rgba(0,0,0,.35); --elev-3: 0 24px 60px -24px rgba(0,0,0,.45); --hairline: 1px solid rgba(0,0,0,.14); --ease-spring: cubic-bezier(.32, 1.35, .42, 1); --ease-foil:   cubic-bezier(.2, .7, .2, 1); --ease-out:    cubic-bezier(.2, .7, .2, 1); --dur-base:    300ms; --dur-sheet:   520ms; }
body[data-skin="m1"] { --skin-status: var(--olive, #FF8FC4); --olive: #FF8FC4; }
body[data-skin="m1"] .rt-title { font-size: 44px; line-height: 1; letter-spacing: -.01em; }
body[data-skin="m1"] .rt-sub { margin-top: 8px; max-width: 32ch; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--brand-text) 60%, transparent); }
body[data-skin="m1"] .rt-none { margin: 4px 0 10px; font-size: 14px; color: color-mix(in srgb, var(--brand-text) 60%, transparent); }
body[data-skin="m1"] .rt-row { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 8px -20px 0; padding: 6px 20px 18px; scrollbar-width: none; perspective: 900px; }
body[data-skin="m1"] .rt-row::-webkit-scrollbar { display: none; }
body[data-skin="m1"] .rt-ticket { flex: none; width: 82%; scroll-snap-align: center; position: relative; transition: transform .5s var(--ease-out); filter: drop-shadow(0 18px 24px rgba(0,0,0,.16)); }
body[data-skin="m1"] .rt-body { position: relative; overflow: hidden; border-radius: var(--m1-r); padding: 22px 20px 18px; background: linear-gradient(160deg, #3A1F42, #1C1020 60%); color: var(--brand-text); }
body[data-skin="m1"] .rt-dim .rt-body,
body[data-skin="m1"] .rt-dim .rt-stub { background: #2A1830; }
body[data-skin="m1"] .rt-ph { position: relative; height: 162px; margin: -22px -20px 16px; border-radius: var(--m1-r); background-size: cover; background-position: center 40%; }
body[data-skin="m1"] .rt-ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.14) 70%, var(--rt-fade, #2E1A34) 100%); }
body[data-skin="m1"] .rt-dim .rt-ph { --rt-fade: #2A1830; }
body[data-skin="m1"] .rt-seal { position: absolute; z-index: 2; right: 18px; top: 136px; width: 54px; height: 54px; border-radius: 50%; background: var(--brand-text); display: grid; place-items: center; box-shadow: 0 0 0 4px #2E1A34, 0 8px 16px -8px rgba(0,0,0,.6); }
body[data-skin="m1"] .rt-dim .rt-seal { box-shadow: 0 0 0 4px #2A1830, 0 8px 16px -8px rgba(0,0,0,.5); }
body[data-skin="m1"] .rt-seal img { width: 30px; height: auto; }
body[data-skin="m1"] .rt-amt { margin: 0; font-size: 52px; line-height: .98; letter-spacing: -.02em; padding-right: 60px; text-wrap: balance; }
body[data-skin="m1"] .rt-what { margin: 8px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #C9BEC8; }
body[data-skin="m1"] .rt-stub { position: relative; margin-top: -1px; padding: 16px 20px 18px; border-radius: var(--m1-r); background: #1C1020; border-top: 2px dashed rgba(0,0,0,.28); transform-origin: 12% 0; }
body[data-skin="m1"] .rt-stub::before,
body[data-skin="m1"] .rt-stub::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-bg); }
body[data-skin="m1"] .rt-stub::before { left: -11px; }
body[data-skin="m1"] .rt-stub::after { right: -11px; }
body[data-skin="m1"] .rt-stub p { margin: 0; font-size: 13px; line-height: 1.45; color: #C9BEC8; }
body[data-skin="m1"] .rt-hold { position: relative; overflow: hidden; margin-top: 12px; width: 100%; height: 52px; border-radius: var(--m1-r); background: var(--brand-text); color: #1C1020; font-size: 15px; font-weight: 600; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
body[data-skin="m1"] .rt-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #FF5CB0, #FF2F9A); transform-origin: left; transform: scaleX(0); }
body[data-skin="m1"] .rt-lbl { position: relative; }
body[data-skin="m1"] .rt-pressing .rt-lbl { color: var(--brand-text); transition: color .2s .3s; }
body[data-skin="m1"] .rt-redeem { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 12px; animation: skin-m1-rise .5s var(--ease-out) both; }
body[data-skin="m1"] .rt-qr { width: 124px; height: 124px; border-radius: var(--m1-r); background: #F3ECE2; display: grid; place-items: center; box-shadow: 0 8px 18px -10px rgba(0,0,0,.5); }
body[data-skin="m1"] .rt-wait { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #33203A; border-top-color: #FF2F9A; animation: skin-m1-spin .8s linear infinite; }
body[data-skin="m1"] .rt-retry { font-size: 12.5px; font-weight: 600; text-decoration: underline; padding: 8px; }
body[data-skin="m1"] .rt-redeem b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .rt-redeem p { margin-top: 6px; font-size: 12.5px; line-height: 1.4; }
body[data-skin="m1"] .rt-live { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
body[data-skin="m1"] .rt-live i,
body[data-skin="m1"] .rt-used b i { width: 8px; height: 8px; border-radius: 50%; background: #FF8FC4; animation: skin-m1-breathe 1.6s ease-in-out infinite; }
body[data-skin="m1"] .rt-used b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .rt-used span { font-size: 13px; font-weight: 600; color: #C9BEC8; }
body[data-skin="m1"] .rt-torn .rt-body { filter: grayscale(.35); opacity: .85; }
body[data-skin="m1"] .rt-torn .rt-used { animation: skin-m1-rise .6s .5s var(--ease-out) both; }
body[data-skin="m1"] .rt-torn .rt-stub { animation: skin-m1-tear .9s cubic-bezier(.5,0,.75,0) both; }
body[data-skin="m1"] .rt-sec { display: flex; align-items: center; justify-content: center; margin-top: 12px; height: 48px; border-radius: var(--m1-r); border: 1.5px solid var(--brand-text); color: var(--brand-text); font-size: 14px; font-weight: 600; text-decoration: none; }
body[data-skin="m1"] .rt-dots { display: flex; justify-content: center; gap: 6px; }
body[data-skin="m1"] .rt-dots i { width: 6px; height: 6px; border-radius: 3px; background: #4A3550; transition: width .4s var(--ease-spring), background .4s; }
body[data-skin="m1"] .rt-dots i.on { width: 20px; background: #FF2F9A; }
body[data-skin="m1"] .rt-history { margin-top: 30px; }
body[data-skin="m1"] .rt-history h2 { font-size: 24px; margin-bottom: 8px; }
body[data-skin="m1"] .rt-hrow { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-text) 14%, transparent); }
body[data-skin="m1"] .rt-hrow b { font-size: 15px; }
body[data-skin="m1"] .rt-hrow span { font-size: 13.5px; color: color-mix(in srgb, var(--brand-text) 60%, transparent); }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .rt-ticket,
body[data-skin="m1"] .rt-redeem,
body[data-skin="m1"] .rt-torn .rt-stub,
body[data-skin="m1"] .rt-torn .rt-used { animation: none; transition: none; }
}
body[data-skin="m1"] .jn-page { --jn-ink: #F3ECE2; --jn-cream: #1C1020; --jn-line: #33203A; --jn-umber: #2A1830; --jn-sign: #2A1830; --jn-led: #FF2F9A; --jn-muted: #C9BEC8; padding: 0 20px calc(250px + env(safe-area-inset-bottom)); }
body[data-skin="m1"] .jn-head { padding-top: calc(env(safe-area-inset-top) + 32px); }
body[data-skin="m1"] .jn-thread { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
body[data-skin="m1"] .jn-day { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; }
body[data-skin="m1"] .jn-day::before,
body[data-skin="m1"] .jn-day::after { content: ""; flex: 1; height: 1px; background: var(--jn-line); }
body[data-skin="m1"] .jn-day span { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jn-muted); text-align: center; max-width: 75%; }
body[data-skin="m1"] .jn-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 86%; }
body[data-skin="m1"] .jn-msg.jn-me { align-self: flex-end; flex-direction: row-reverse; }
body[data-skin="m1"] .jn-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
body[data-skin="m1"] .jn-me .jn-col { align-items: flex-end; }
body[data-skin="m1"] .jn-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display), serif; font-size: 13px; line-height: 1; background: var(--jn-sign); color: var(--jn-ink); border: 1px solid #33203A; }
body[data-skin="m1"] .jn-av.jn-salon { background: var(--jn-ink); color: var(--jn-sign); border-color: var(--jn-ink); }
body[data-skin="m1"] .jn-av sup { font-size: 6px; }
body[data-skin="m1"] .jn-bub { padding: 10px 13px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); font-size: 14.5px; line-height: 1.45; font-weight: 500; color: var(--jn-ink); min-width: 0; }
body[data-skin="m1"] .jn-me .jn-bub { border-radius: var(--m1-r); background: var(--jn-ink); color: var(--jn-cream); border-color: var(--jn-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-skin="m1"] .jn-who { display: block; font-size: 12px; font-weight: 600; color: var(--jn-led); margin-bottom: 2px; }
body[data-skin="m1"] .jn-text { white-space: pre-wrap; overflow-wrap: anywhere; }
body[data-skin="m1"] .jn-when { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; opacity: .55; }
body[data-skin="m1"] .jn-phs { display: grid; gap: 4px; margin: 2px 0 6px; }
body[data-skin="m1"] .jn-phs.jn-two { grid-template-columns: 1fr 1fr; }
body[data-skin="m1"] .jn-ph { display: block; padding: 0; border: 0; background: none; border-radius: var(--m1-r); overflow: hidden; }
body[data-skin="m1"] .jn-ph img { display: block; width: 230px; max-width: 100%; aspect-ratio: 4/5; object-fit: cover; }
body[data-skin="m1"] .jn-two .jn-ph img { width: 112px; aspect-ratio: 1; }
body[data-skin="m1"] .jn-story { display: inline-flex; align-items: center; margin: 4px 0 2px; height: 34px; padding: 0 12px; border-radius: var(--m1-r); font-size: 12.5px; font-weight: 600; color: var(--jn-ink); background: linear-gradient(135deg, #3A1F42, #2E1A34); border: 0; }
body[data-skin="m1"] .jn-remove { scroll-margin-bottom: calc(190px + env(safe-area-inset-bottom)); margin-top: 4px; font-size: 12px; font-weight: 600; color: #FF8A98; padding: 4px 6px; animation: skin-m1-jn-pop .35s var(--ease-spring) both; }
body[data-skin="m1"] .jn-event { align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--jn-muted); padding: 6px 12px; border-radius: var(--m1-r); background: var(--jn-umber); }
body[data-skin="m1"] .jn-event i { width: 7px; height: 7px; border-radius: 50%; background: var(--jn-led); }
body[data-skin="m1"] .jn-pop { animation: skin-m1-jn-pop .5s var(--ease-spring) both; }
body[data-skin="m1"] .jn-err { font-size: 13px; color: #FF8A98; margin-top: 6px; }
body[data-skin="m1"] .jn-composer { position: fixed; z-index: 30; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 14px 14px 8px; background: linear-gradient(to top, var(--brand-bg) 78%, color-mix(in srgb, var(--brand-bg) 0%, transparent)); animation: skin-m1-jn-rise .5s var(--ease-out) both; }
body[data-skin="m1"] .jn-starters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 8px; padding: 0 14px; }
body[data-skin="m1"] .jn-starters::-webkit-scrollbar { display: none; }
body[data-skin="m1"] .jn-starters button { flex: none; height: 34px; padding: 0 12px; border-radius: var(--m1-r); border: 1.5px solid var(--jn-line); background: var(--jn-cream); font-size: 13px; font-weight: 600; color: var(--jn-ink); transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .jn-starters button:active { transform: scale(.95); }
body[data-skin="m1"] .jn-starters .jn-log { border-color: var(--jn-ink); }
body[data-skin="m1"] .jn-chips { display: flex; gap: 8px; margin-bottom: 8px; }
body[data-skin="m1"] .jn-chip { position: relative; width: 56px; height: 56px; border-radius: var(--m1-r); overflow: hidden; border: 1px solid var(--jn-line); animation: skin-m1-jn-pop .4s var(--ease-spring) both; }
body[data-skin="m1"] .jn-chip img { width: 100%; height: 100%; object-fit: cover; }
body[data-skin="m1"] .jn-chip button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--jn-ink); color: var(--jn-cream); font-size: 13px; line-height: 20px; }
body[data-skin="m1"] .jn-bar { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1.5px solid var(--jn-line); box-shadow: 0 10px 24px -16px rgba(0,0,0,.5); transition: border-color .2s, box-shadow .2s; }
body[data-skin="m1"] .jn-bar:focus-within { border-color: var(--jn-led); box-shadow: 0 0 0 4px rgba(255,47,154,.20); }
body[data-skin="m1"] .jn-pickwrap { position: relative; flex: none; }
body[data-skin="m1"] .jn-cam { width: 42px; height: 42px; border-radius: var(--m1-r); background: var(--jn-ink); color: var(--jn-cream); display: grid; place-items: center; transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .jn-cam:active { transform: scale(.92); }
body[data-skin="m1"] .jn-cam:disabled { opacity: .4; }
body[data-skin="m1"] .jn-cam svg,
body[data-skin="m1"] .jn-send svg { width: 20px; height: 20px; }
body[data-skin="m1"] .jn-pick { position: absolute; left: 0; bottom: 54px; width: 232px; padding: 6px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); box-shadow: 0 18px 40px -16px rgba(0,0,0,.45); transform-origin: 20px 100%; animation: skin-m1-jn-pop .35s var(--ease-spring) both; }
body[data-skin="m1"] .jn-pick label { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--m1-r); font-size: 14.5px; font-weight: 600; color: var(--jn-ink); cursor: pointer; }
body[data-skin="m1"] .jn-pick label:active { background: var(--jn-umber); }
body[data-skin="m1"] .jn-pick svg { width: 20px; height: 20px; color: var(--jn-led); }
body[data-skin="m1"] .jn-bar textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 120px; padding: 10px 2px; border: 0; background: none; resize: none; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--jn-ink); outline: none; }
body[data-skin="m1"] .jn-bar textarea::placeholder { color: #A99CAA; }
body[data-skin="m1"] .jn-send { width: 42px; height: 42px; border-radius: 50%; background: var(--jn-led); color: #ffffff; display: grid; place-items: center; flex: none; transition: transform .25s var(--ease-spring), opacity .2s; }
body[data-skin="m1"] .jn-send:active { transform: scale(.9); }
body[data-skin="m1"] .jn-send:disabled { opacity: .45; }
body[data-skin="m1"] .jn-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #ffffff; animation: skin-m1-jn-spin .8s linear infinite; }
body[data-skin="m1"] .jn-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.42); display: flex; align-items: flex-end; animation: skin-m1-jn-fade .3s ease both; }
body[data-skin="m1"] .jn-sheet { width: 100%; max-height: 92dvh; overflow-y: auto; padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: var(--m1-r); background: var(--brand-bg); color: var(--jn-ink); animation: skin-m1-jn-up var(--dur-sheet) var(--ease-spring) both; }
body[data-skin="m1"] .jn-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--jn-line); margin: 0 auto 8px; }
body[data-skin="m1"] .jn-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
body[data-skin="m1"] .jn-sheet-head h2 { font-size: 30px; }
body[data-skin="m1"] .jn-x { width: 36px; height: 36px; border-radius: 50%; background: var(--jn-umber); color: var(--jn-ink); font-size: 22px; line-height: 36px; text-align: center; }
body[data-skin="m1"] .jn-drop { position: relative; display: grid; place-items: center; min-height: 190px; border-radius: var(--m1-r); border: 1.5px dashed #4A3550; background: var(--jn-cream); overflow: hidden; text-align: center; }
body[data-skin="m1"] .jn-drop img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
body[data-skin="m1"] .jn-drop-empty b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .jn-redo { position: absolute; right: 10px; bottom: 10px; height: 34px; padding: 0 12px; border-radius: var(--m1-r); background: var(--jn-cream); font-size: 12.5px; font-weight: 600; color: var(--jn-ink); }
body[data-skin="m1"] .jn-two { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
body[data-skin="m1"] .jn-two label { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: var(--m1-r); font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--jn-ink); color: var(--jn-ink); background: var(--jn-cream); }
body[data-skin="m1"] .jn-two label:first-child { background: var(--jn-ink); color: var(--jn-cream); }
body[data-skin="m1"] .jn-two svg { width: 18px; height: 18px; }
body[data-skin="m1"] .jn-field { display: block; margin-top: 14px; }
body[data-skin="m1"] .jn-field span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jn-muted); margin-bottom: 6px; }
body[data-skin="m1"] .jn-field input { width: 100%; height: 48px; padding: 0 14px; border-radius: var(--m1-r); border: 1.5px solid var(--jn-line); background: var(--jn-cream); font-size: 16px; color: var(--jn-ink); outline: none; }
body[data-skin="m1"] .jn-field input:focus { border-color: var(--jn-led); box-shadow: 0 0 0 4px rgba(255,47,154,.20); }
body[data-skin="m1"] .jn-note { margin-top: 12px; font-size: 13px; color: var(--jn-muted); }
body[data-skin="m1"] .jn-save { margin-top: 16px; width: 100%; height: 52px; border-radius: var(--m1-r); background: var(--jn-ink); color: var(--jn-cream); font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .jn-save:disabled { opacity: .4; }
body[data-skin="m1"] .jn-lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(6,3,8,.9); animation: skin-m1-jn-fade .25s ease both; }
body[data-skin="m1"] .jn-lightbox > div { position: relative; }
body[data-skin="m1"] .jn-lightbox img { max-width: 100%; max-height: 85dvh; border-radius: var(--m1-r); object-fit: contain; }
body[data-skin="m1"] .jn-lightbox .jn-x { position: absolute; top: -12px; right: -12px; background: var(--brand-bg); }
body[data-skin="m1"] .jn-page.jn-on-saved { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
body[data-skin="m1"] .jn-seg { position: sticky; top: env(safe-area-inset-top); z-index: 25; display: flex; gap: 4px; margin: 14px -20px 0; padding: 8px 20px; background: var(--brand-bg); box-shadow: 0 calc(-1 * env(safe-area-inset-top)) 0 var(--brand-bg); }
body[data-skin="m1"] .jn-seg button { flex: 1; min-width: 0; height: 44px; border-radius: var(--m1-r); border: 1.5px solid var(--jn-line); background: var(--jn-cream); color: var(--jn-ink); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color .2s, color .2s, border-color .2s; }
body[data-skin="m1"] .jn-seg button.jn-seg-on { background: var(--jn-ink); color: var(--jn-cream); border-color: var(--jn-ink); }
body[data-skin="m1"] .jn-seg-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--m1-r); font-size: 11.5px; line-height: 20px; background: var(--jn-umber); color: var(--jn-ink); }
body[data-skin="m1"] .jn-seg-on .jn-seg-n { background: var(--jn-led); color: #ffffff; }
body[data-skin="m1"] .jn-seg + .jn-thread { margin-top: 2px; }
body[data-skin="m1"] .jn-phw { position: relative; display: block; }
body[data-skin="m1"] .jn-keep { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
body[data-skin="m1"] .jn-keep span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(18,11,20,.94); color: var(--jn-ink); box-shadow: 0 4px 10px -4px rgba(0,0,0,.45); transition: transform .25s var(--ease-spring), background-color .2s; }
body[data-skin="m1"] .jn-keep svg { width: 16px; height: 16px; }
body[data-skin="m1"] .jn-keep:active span { transform: scale(.88); }
body[data-skin="m1"] .jn-keep:disabled { opacity: 1; }
body[data-skin="m1"] .jn-keep.jn-kept span { background: var(--jn-led); color: #ffffff; animation: skin-m1-jn-pop .35s var(--ease-spring) both; }
body[data-skin="m1"] .jn-saved { margin-top: 14px; color: var(--jn-ink); }
body[data-skin="m1"] .jn-sv-loading { height: 200px; }
body[data-skin="m1"] .jn-sv-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
body[data-skin="m1"] .jn-sv-lede { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--jn-muted); }
body[data-skin="m1"] .jn-sv-add { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 18px 0 14px; border-radius: var(--m1-r); background: var(--jn-ink); color: var(--jn-cream); font-size: 14.5px; font-weight: 600; transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .jn-sv-add:active { transform: scale(.95); }
body[data-skin="m1"] .jn-sv-add svg { width: 18px; height: 18px; }
body[data-skin="m1"] .jn-sv-retry button { margin-left: 4px; min-height: 44px; font-weight: 600; text-decoration: underline; color: inherit; }
body[data-skin="m1"] .jn-sv-empty { margin-top: 8px; padding: 28px 22px 24px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); text-align: center; animation: skin-m1-jn-pop .5s var(--ease-spring) both; }
body[data-skin="m1"] .jn-sv-mark { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--jn-sign); color: var(--jn-led); }
body[data-skin="m1"] .jn-sv-mark svg { width: 24px; height: 24px; }
body[data-skin="m1"] .jn-sv-empty h2 { font-size: 28px; line-height: 1.1; }
body[data-skin="m1"] .jn-sv-empty p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; }
body[data-skin="m1"] .jn-sv-empty .jn-sv-hint { font-size: 13px; color: var(--jn-muted); }
body[data-skin="m1"] .jn-sv-empty .jn-sv-add { margin-top: 18px; }
body[data-skin="m1"] .jn-sv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
body[data-skin="m1"] .jn-sv-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body[data-skin="m1"] .jn-sv-card { border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); overflow: hidden; animation: skin-m1-jn-pop .45s var(--ease-spring) both; }
body[data-skin="m1"] .jn-sv-card.jn-sv-note { background: var(--jn-sign); border-color: #33203A; }
body[data-skin="m1"] .jn-sv-ph { display: block; width: 100%; padding: 0; border: 0; background: var(--jn-umber); }
body[data-skin="m1"] .jn-sv-ph img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
body[data-skin="m1"] .jn-sv-gone { aspect-ratio: 4/5; }
body[data-skin="m1"] .jn-sv-body { padding: 10px 10px 8px; }
body[data-skin="m1"] .jn-sv-cap { font-size: 13.5px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
body[data-skin="m1"] .jn-sv-text { padding: 4px 2px 2px; font-family: var(--font-display), serif; font-size: 18px; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; }
body[data-skin="m1"] .jn-sv-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 28px; margin-top: 2px; }
body[data-skin="m1"] .jn-sv-meta { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--jn-muted); min-width: 0; }
body[data-skin="m1"] .jn-sv-share { width: 100%; min-height: 44px; margin-top: 6px; padding: 4px 8px; border-radius: var(--m1-r); background: var(--jn-ink); color: var(--jn-cream); font-size: 12.5px; line-height: 1.2; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px; text-align: center; }
body[data-skin="m1"] .jn-sv-share svg { width: 14px; height: 14px; flex: none; }
body[data-skin="m1"] .jn-sv-share.jn-sv-done { background: none; color: var(--jn-led); border: 1.5px solid var(--jn-led); }
body[data-skin="m1"] .jn-sv-share:disabled { cursor: default; }
body[data-skin="m1"] .jn-sv-rm { flex: none; width: 44px; height: 44px; margin: -8px -8px -8px 0; border-radius: var(--m1-r); display: grid; place-items: center; color: var(--jn-muted); }
body[data-skin="m1"] .jn-sv-rm svg { width: 19px; height: 19px; }
body[data-skin="m1"] .jn-sv-rm:active { background: var(--jn-umber); }
body[data-skin="m1"] .jn-sv-confirm { margin-top: 8px; animation: skin-m1-jn-pop .3s var(--ease-spring) both; }
body[data-skin="m1"] .jn-sv-confirm p { font-size: 12.5px; font-weight: 600; }
body[data-skin="m1"] .jn-sv-confirm div { display: flex; gap: 4px; margin-top: 6px; }
body[data-skin="m1"] .jn-sv-confirm button { flex: 1; min-height: 44px; border-radius: var(--m1-r); font-size: 12.5px; font-weight: 600; }
body[data-skin="m1"] .jn-sv-yes { background: #FF8A98; color: #ffffff; }
body[data-skin="m1"] .jn-sv-no { background: var(--jn-cream); color: var(--jn-ink); border: 1.5px solid var(--jn-line); }
body[data-skin="m1"] .jn-sv-choices { display: grid; gap: 8px; margin-bottom: 8px; }
body[data-skin="m1"] .jn-sv-choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; border-radius: var(--m1-r); border: 1.5px solid var(--jn-line); background: var(--jn-cream); color: var(--jn-ink); text-align: left; cursor: pointer; transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .jn-sv-choice:active { transform: scale(.98); background: var(--jn-umber); }
body[data-skin="m1"] .jn-sv-choice svg { width: 24px; height: 24px; flex: none; color: var(--jn-led); }
body[data-skin="m1"] .jn-sv-choice b { display: block; font-size: 15.5px; font-weight: 600; }
body[data-skin="m1"] .jn-sv-choice small { display: block; margin-top: 1px; font-size: 13px; color: var(--jn-muted); }
body[data-skin="m1"] .jn-field textarea { width: 100%; padding: 12px 14px; border-radius: var(--m1-r); border: 1.5px solid var(--jn-line); background: var(--jn-cream); font-size: 16px; line-height: 1.45; color: var(--jn-ink); outline: none; resize: none; }
body[data-skin="m1"] .jn-field textarea:focus { border-color: var(--jn-led); box-shadow: 0 0 0 4px rgba(255,47,154,.20); }
body[data-skin="m1"] .jn-sv-count { margin-top: 4px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--jn-muted); font-variant-numeric: tabular-nums; }
body[data-skin="m1"] .jn-sheet label.jn-redo { display: inline-flex; align-items: center; cursor: pointer; }
body[data-skin="m1"] .jn-sv-back { display: block; width: 100%; min-height: 44px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--jn-muted); }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .jn-pop,
body[data-skin="m1"] .jn-composer,
body[data-skin="m1"] .jn-pick,
body[data-skin="m1"] .jn-chip,
body[data-skin="m1"] .jn-sheet,
body[data-skin="m1"] .jn-scrim,
body[data-skin="m1"] .jn-remove,
body[data-skin="m1"] .jn-sv-card,
body[data-skin="m1"] .jn-sv-empty,
body[data-skin="m1"] .jn-sv-confirm,
body[data-skin="m1"] .jn-keep.jn-kept span { animation: none; }
}
body[data-skin="m1"] .sh-page { --jn-ink: #F3ECE2; --jn-cream: #1C1020; --jn-line: #33203A; --jn-umber: #2A1830; --jn-led: #FF2F9A; --jn-muted: #C9BEC8; color: var(--jn-ink); padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
body[data-skin="m1"] .sh-hero { height: calc(260px + env(safe-area-inset-top)); overflow: hidden; position: relative; }
body[data-skin="m1"] .sh-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 70px; background: linear-gradient(to bottom, transparent, var(--brand-bg)); }
body[data-skin="m1"] .sh-hero img { width: 100%; height: 100%; object-fit: cover; animation: skin-m1-sh-pan 18s ease-in-out infinite alternate; }
body[data-skin="m1"] .sh-gutter { padding: 0 20px; position: relative; }
body[data-skin="m1"] .sh-gutter > * { animation: skin-m1-jn-pop .6s var(--ease-spring) both; }
body[data-skin="m1"] .sh-gutter > :nth-child(2) { animation-delay: .06s; }
body[data-skin="m1"] .sh-gutter > :nth-child(3) { animation-delay: .12s; }
body[data-skin="m1"] .sh-gutter > :nth-child(4) { animation-delay: .18s; }
body[data-skin="m1"] .sh-gutter > :nth-child(n+5) { animation-delay: .24s; }
body[data-skin="m1"] .sh-head { margin-top: -8px; }
body[data-skin="m1"] .sh-head h1 { font-size: 36px; line-height: 1.05; letter-spacing: -.01em; }
body[data-skin="m1"] .sh-head p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--jn-muted); }
body[data-skin="m1"] .sh-head .sh-tagline { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--jn-ink); }
body[data-skin="m1"] .sh-head .sh-about { margin-top: 10px; color: var(--jn-ink); white-space: pre-line; }
body[data-skin="m1"] .sh-party { margin-top: 22px; display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 16px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); }
body[data-skin="m1"] .sh-pdate { height: 76px; border-radius: var(--m1-r); background: var(--jn-ink); color: var(--jn-cream); display: grid; place-content: center; text-align: center; }
body[data-skin="m1"] .sh-pdate b { font-size: 32px; line-height: 1; font-weight: 500; }
body[data-skin="m1"] .sh-pdate span { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
body[data-skin="m1"] .sh-party h2 { font-size: 16px; font-weight: 600; }
body[data-skin="m1"] .sh-party p { font-size: 13.5px; line-height: 1.45; color: var(--jn-muted); margin-top: 2px; }
body[data-skin="m1"] .sh-runsheet { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
body[data-skin="m1"] .sh-runsheet li { display: flex; gap: 10px; font-size: 13.5px; font-weight: 600; }
body[data-skin="m1"] .sh-runsheet time { width: 42px; flex: none; color: var(--jn-led); font-variant-numeric: tabular-nums; font-weight: 600; }
body[data-skin="m1"] .sh-facts { margin-top: 20px; display: grid; gap: 1px; background: var(--jn-line); border-radius: var(--m1-r); overflow: hidden; border: 1px solid var(--jn-line); }
body[data-skin="m1"] .sh-facts > div { background: var(--jn-cream); padding: 14px 16px; }
body[data-skin="m1"] .sh-facts a { display: block; color: inherit; text-decoration: none; }
body[data-skin="m1"] .sh-facts span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--jn-muted); }
body[data-skin="m1"] .sh-facts b { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; }
body[data-skin="m1"] .sh-facts small { display: block; font-size: 13px; color: var(--jn-muted); }
body[data-skin="m1"] .sh-facts .sh-access { margin-top: 6px; }
body[data-skin="m1"] .sh-hours { margin: 4px 0 0; display: grid; gap: 2px; }
body[data-skin="m1"] .sh-hours > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
body[data-skin="m1"] .sh-hours dt { color: var(--jn-muted); }
body[data-skin="m1"] .sh-hours dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
body[data-skin="m1"] .sh-on { width: 7px; height: 7px; border-radius: 50%; background: var(--skin-status, #FF8FC4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin-status, #FF8FC4) 25%, transparent); }
body[data-skin="m1"] .sh-call { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-skin="m1"] .sh-call button { height: 36px; padding: 0 14px; border-radius: var(--m1-r); background: var(--jn-umber); font-size: 13px; font-weight: 600; color: var(--jn-ink); }
body[data-skin="m1"] .sh-book { display: flex; align-items: center; justify-content: center; margin-top: 22px; height: 56px; border-radius: var(--m1-r); background: var(--jn-ink); color: var(--jn-cream); font-size: 16px; font-weight: 600; text-decoration: none; transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .sh-book:active,
body[data-skin="m1"] .sh-site:active,
body[data-skin="m1"] .sh-giftcta:active { transform: scale(.97); }
body[data-skin="m1"] .sh-site { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-radius: var(--m1-r); border: 1.5px solid var(--jn-ink); text-decoration: none; color: var(--jn-ink); font-size: 15px; font-weight: 600; transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .sh-site em { font-style: normal; font-weight: 400; font-size: 16px; color: var(--jn-muted); }
body[data-skin="m1"] .sh-giftcta { margin-top: 22px; width: 100%; display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); text-align: left; color: var(--jn-ink); transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .sh-gcmini { width: 64px; height: 42px; border-radius: var(--m1-r); display: grid; place-items: center; box-shadow: 0 6px 12px -8px rgba(0,0,0,.6); }
body[data-skin="m1"] .sh-gcmini em { font-size: 14px; font-style: normal; color: #ffffff; }
body[data-skin="m1"] .sh-gcmini sup { font-size: 7px; }
body[data-skin="m1"] .sh-giftcta b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .sh-giftcta small { font-size: 13px; color: var(--jn-muted); }
body[data-skin="m1"] .sh-arrow { font-size: 28px; color: var(--jn-muted); }
body[data-skin="m1"] .sh-sec { margin-top: 30px; font-size: 26px; line-height: 1.1; }
body[data-skin="m1"] .sh-lead { margin-top: 4px; font-size: 14px; color: var(--jn-muted); }
body[data-skin="m1"] .sh-shop { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 14px -20px 0; padding: 0 20px 6px; scroll-padding-inline: 20px; scrollbar-width: none; }
body[data-skin="m1"] .sh-shop::-webkit-scrollbar { display: none; }
body[data-skin="m1"] .sh-prod { flex: none; width: 58%; scroll-snap-align: start; }
body[data-skin="m1"] .sh-prod img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--m1-r); display: block; background: var(--jn-umber); }
body[data-skin="m1"] .sh-prod b { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .sh-prod span { display: block; font-size: 13px; color: var(--jn-muted); }
body[data-skin="m1"] .sh-prod em { display: block; margin-top: 4px; font-size: 22px; font-style: normal; }
body[data-skin="m1"] .sh-prod em small { font-family: var(--font-manrope), sans-serif; font-size: 12px; font-weight: 600; color: var(--jn-muted); }
body[data-skin="m1"] .sh-bundle { margin-top: 14px; display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); }
body[data-skin="m1"] .sh-bundle img { width: 76px; height: 76px; border-radius: var(--m1-r); object-fit: cover; }
body[data-skin="m1"] .sh-bundle b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .sh-bundle span { font-size: 13px; color: var(--jn-muted); }
body[data-skin="m1"] .sh-bundle em { font-size: 28px; font-style: normal; }
body[data-skin="m1"] .sh-more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--jn-ink); text-decoration: underline; text-underline-offset: 3px; }
body[data-skin="m1"] .sh-social { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
body[data-skin="m1"] .sh-social a { height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--m1-r); border: 1.5px solid var(--jn-line); background: var(--jn-cream); font-size: 13.5px; font-weight: 600; color: var(--jn-ink); text-decoration: none; }
body[data-skin="m1"] .sh-gcard { position: relative; aspect-ratio: 1.58; border-radius: var(--m1-r); overflow: hidden; color: #ffffff; box-shadow: 0 24px 40px -22px rgba(0,0,0,.6); }
body[data-skin="m1"] .sh-gcard.sh-bump { animation: skin-m1-sh-bump .5s var(--ease-spring); }
body[data-skin="m1"] .sh-gcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%); background-size: 250% 100%; animation: skin-m1-sh-sheen 4.5s ease-in-out infinite; }
body[data-skin="m1"] .sh-gclock { position: absolute; left: 18px; top: 16px; display: flex; align-items: center; gap: 8px; font-size: 18px; }
body[data-skin="m1"] .sh-ring { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 13px; }
body[data-skin="m1"] .sh-ring sup { font-size: 6px; }
body[data-skin="m1"] .sh-gcamt { position: absolute; right: 18px; top: 12px; font-size: 40px; line-height: 1; }
body[data-skin="m1"] .sh-gcto { position: absolute; left: 18px; bottom: 34px; font-family: var(--font-display), serif; font-style: normal; font-size: 24px; line-height: 1; }
body[data-skin="m1"] .sh-gcname { position: absolute; left: 18px; bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
body[data-skin="m1"] .sh-designs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 14px -20px 0; padding: 6px 20px; }
body[data-skin="m1"] .sh-designs::-webkit-scrollbar { display: none; }
body[data-skin="m1"] .sh-designs button { flex: none; width: 74px; text-align: center; font-size: 11.5px; line-height: 1.2; font-weight: 600; color: var(--jn-muted); }
body[data-skin="m1"] .sh-designs button i { display: block; height: 48px; border-radius: var(--m1-r); margin-bottom: 6px; box-shadow: 0 6px 12px -8px rgba(0,0,0,.6); transition: transform .3s var(--ease-spring), box-shadow .3s; }
body[data-skin="m1"] .sh-designs button[aria-checked="true"] { color: var(--jn-ink); }
body[data-skin="m1"] .sh-designs button[aria-checked="true"] i { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--brand-bg), 0 0 0 4px var(--jn-ink); }
body[data-skin="m1"] .sh-designs button small { display: block; font-weight: 600; opacity: .7; }
body[data-skin="m1"] .sh-flabel { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jn-muted); }
body[data-skin="m1"] .sh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
body[data-skin="m1"] .sh-chips button { height: 40px; padding: 0 16px; border-radius: var(--m1-r); border: 1.5px solid var(--jn-line); background: var(--jn-cream); font-size: 14px; font-weight: 600; color: var(--jn-ink); transition: border-color .25s, transform .25s var(--ease-spring); }
body[data-skin="m1"] .sh-chips button[aria-pressed="true"] { border-color: var(--jn-ink); background: #24152A; transform: scale(1.04); }
body[data-skin="m1"] .sh-callbtn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
body[data-skin="m1"] .jn-sheet { --jn-ink: #F3ECE2; --jn-cream: #1C1020; --jn-line: #33203A; --jn-umber: #2A1830; --jn-led: #FF2F9A; --jn-muted: #C9BEC8; }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .sh-hero img,
body[data-skin="m1"] .sh-gutter > *,
body[data-skin="m1"] .sh-gcard,
body[data-skin="m1"] .sh-gcard::after { animation: none; }
}
body[data-skin="m1"] .fc-page { --jn-ink: #F3ECE2; --jn-cream: #1C1020; --jn-line: #33203A; --jn-led: #FF2F9A; --jn-muted: #C9BEC8; color: var(--jn-ink); padding: calc(env(safe-area-inset-top) + 32px) 20px calc(110px + env(safe-area-inset-bottom)); }
body[data-skin="m1"] .fc-page > * { animation: skin-m1-jn-pop .6s var(--ease-spring) both; }
body[data-skin="m1"] .fc-page > :nth-child(2) { animation-delay: .07s; }
body[data-skin="m1"] .fc-page > :nth-child(3) { animation-delay: .14s; }
body[data-skin="m1"] .fc-page > :nth-child(n+4) { animation-delay: .2s; }
body[data-skin="m1"] .fc-earned { margin-top: 20px; padding: 18px; border-radius: var(--m1-r); background: linear-gradient(160deg, #3A1F42, #1C1020 65%); box-shadow: 0 18px 30px -22px rgba(0,0,0,.5); }
body[data-skin="m1"] .fc-etop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
body[data-skin="m1"] .fc-etop span { width: 100%; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--jn-led); }
body[data-skin="m1"] .fc-etop b { font-size: 56px; line-height: 1; font-weight: 500; }
body[data-skin="m1"] .fc-etop em { font-style: normal; font-size: 15px; font-weight: 600; color: var(--jn-muted); }
body[data-skin="m1"] .fc-earned p { margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
body[data-skin="m1"] .fc-earned small { display: block; margin-top: 6px; font-size: 13px; color: var(--jn-muted); }
body[data-skin="m1"] .fc-earned .fc-boost { color: var(--jn-led); font-weight: 600; }
body[data-skin="m1"] .fc-points .fc-btns button { flex: 1; }
body[data-skin="m1"] .fc-points .fc-btns button:disabled { cursor: default; transform: none; }
body[data-skin="m1"] .fc-weeks { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.12); }
body[data-skin="m1"] .fc-weeks small { margin-top: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--jn-led); }
body[data-skin="m1"] .fc-weeks ul { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--jn-muted); }
body[data-skin="m1"] .fc-referred { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--jn-muted); }
body[data-skin="m1"] .fc-invite { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); }
body[data-skin="m1"] .fc-qr { width: 140px; height: 140px; padding: 8px; border-radius: var(--m1-r); background: #1C1020; box-shadow: inset 0 0 0 1px var(--jn-line); }
body[data-skin="m1"] .fc-inv { min-width: 0; }
body[data-skin="m1"] .fc-inv h3 { font-size: 16px; font-weight: 600; }
body[data-skin="m1"] .fc-inv p { margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--jn-muted); }
body[data-skin="m1"] .fc-link { margin-top: 8px; padding: 8px 10px; border-radius: var(--m1-r); background: #2A1830; font-size: 12px; font-weight: 600; overflow: hidden; }
body[data-skin="m1"] .fc-link span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-skin="m1"] .fc-btns { display: flex; gap: 8px; margin-top: 8px; }
body[data-skin="m1"] .fc-btns button { flex: 1; height: 38px; border-radius: var(--m1-r); font-size: 13px; font-weight: 600; border: 1.5px solid var(--jn-ink); color: var(--jn-ink); background: var(--jn-cream); transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .fc-btns button:first-child { background: var(--jn-ink); color: var(--jn-cream); }
body[data-skin="m1"] .fc-btns button:active { transform: scale(.95); }
body[data-skin="m1"] .fc-err { color: #FF8A98 !important; }
body[data-skin="m1"] .fc-sec { margin-top: 28px; font-size: 26px; line-height: 1.1; }
body[data-skin="m1"] .fc-empty { margin-top: 6px; font-size: 14px; color: var(--jn-muted); }
body[data-skin="m1"] .fc-circle { margin-top: 12px; display: grid; gap: 10px; }
body[data-skin="m1"] .fc-pal { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px 12px 12px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); animation: skin-m1-jn-pop .5s var(--ease-spring) both; }
body[data-skin="m1"] .fc-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--jn-ink); }
body[data-skin="m1"] .fc-pal b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .fc-pal div span { display: block; font-size: 12.5px; line-height: 1.35; color: var(--jn-muted); }
body[data-skin="m1"] .fc-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--jn-led); position: relative; }
body[data-skin="m1"] .fc-tick::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 360px) {
  body[data-skin="m1"] .fc-invite { grid-template-columns: minmax(0, 1fr); text-align: center; }
  body[data-skin="m1"] .fc-qr { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .fc-page > *,
body[data-skin="m1"] .fc-pal { animation: none; }
}
body[data-skin="m1"] .yu-head { --jn-ink: #F3ECE2; --jn-cream: #1C1020; --jn-line: #33203A; --jn-muted: #C9BEC8; padding: calc(env(safe-area-inset-top) + 32px) 0 22px; color: var(--jn-ink); }
body[data-skin="m1"] .yu-head > * { animation: skin-m1-jn-pop .6s var(--ease-spring) both; }
body[data-skin="m1"] .yu-head > :nth-child(2) { animation-delay: .06s; }
body[data-skin="m1"] .yu-head > :nth-child(n+3) { animation-delay: .12s; }
body[data-skin="m1"] .yu-wallet { margin-top: 18px; width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--m1-r); background: #111111; color: #ffffff; text-align: left; transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .yu-wallet:active,
body[data-skin="m1"] .yu-site:active { transform: scale(.97); }
body[data-skin="m1"] .yu-wallet:disabled { opacity: .6; }
body[data-skin="m1"] .yu-wmark { width: 36px; height: 26px; border-radius: var(--m1-r); flex: none; background: linear-gradient(#111111 0 0) 0 62% / 100% 2px no-repeat, linear-gradient(180deg, #f2b84b 0 25%, #e0655a 25% 50%, #5aa7d8 50% 75%, #6bbf7a 75%); }
body[data-skin="m1"] .yu-wallet b,
body[data-skin="m1"] .yu-site b { display: block; font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .yu-wallet small { display: block; font-size: 12.5px; opacity: .7; }
body[data-skin="m1"] .yu-gwallet { margin-top: 14px; text-align: center; }
body[data-skin="m1"] .yu-gwallet small { display: block; font-size: 12.5px; color: color-mix(in srgb, var(--brand-text) 60%, transparent); }
body[data-skin="m1"] .yu-site { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--m1-r); border: 1.5px solid var(--jn-ink); color: var(--jn-ink); text-decoration: none; transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .yu-site small { display: block; font-size: 12.5px; color: var(--jn-muted); }
body[data-skin="m1"] .yu-site em { font-style: normal; font-size: 15px; color: var(--jn-muted); white-space: nowrap; }
body[data-skin="m1"] .pf-tabs { border: 0 !important; padding: 4px; border-radius: var(--m1-r); background: #2A1830; gap: 4px; }
body[data-skin="m1"] .pf-tabs button { border-radius: var(--m1-r); min-height: 40px !important; padding: 0 !important; letter-spacing: .04em !important; text-transform: none !important; font-size: 13.5px !important; font-weight: 600 !important; color: #C9BEC8 !important; transition: background .3s var(--ease-out), color .3s, box-shadow .3s; }
body[data-skin="m1"] .pf-tabs button[aria-selected="true"] { background: #1C1020; color: #F3ECE2 !important; box-shadow: 0 4px 10px -6px rgba(0,0,0,.5); }
body[data-skin="m1"] .pf-tabs button > span[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .yu-head > * { animation: none; }
}
body[data-skin="m1"] .jh-hero { height: 190px; margin: calc(-1 * env(safe-area-inset-top)) -24px 0; border-radius: var(--m1-r); background: #2A1830 center top / cover; -webkit-mask-image: linear-gradient(to bottom, #000000 70%, transparent); mask-image: linear-gradient(to bottom, #000000 70%, transparent); animation: skin-m1-jn-fade .8s ease both; }
body[data-skin="m1"] .jh-head { margin-top: -34px; position: relative; }
body[data-skin="m1"] .jh-perks > div { border-radius: var(--m1-r); background: #1C1020 !important; border-color: transparent !important; }
body[data-skin="m1"] .jh-head img { background: #1C1020; border-radius: 50%; padding: 8px; width: 64px !important; box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
body[data-skin="m1"] .wh-page { --jn-ink: #F3ECE2; --jn-cream: #1C1020; --jn-line: #33203A; --jn-umber: #2A1830; --jn-led: #FF2F9A; --jn-muted: #C9BEC8; min-height: 100dvh; max-width: 440px; margin: 0 auto; color: var(--jn-ink); background: var(--brand-bg); padding: calc(env(safe-area-inset-top) + 18px) 22px calc(env(safe-area-inset-bottom) + 28px); display: flex; flex-direction: column; }
body[data-skin="m1"] .wh-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
body[data-skin="m1"] .wh-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--jn-line); transition: width .35s var(--ease-spring), background .3s; }
body[data-skin="m1"] .wh-dots i.on { width: 22px; background: var(--jn-led); }
body[data-skin="m1"] .wh-dots i.done { background: var(--jn-ink); }
body[data-skin="m1"] .wh-step { display: flex; flex-direction: column; flex: 1; animation: skin-m1-wh-in .55s var(--ease-out) both; }
body[data-skin="m1"] .wh-step > * { animation: skin-m1-jn-pop .6s var(--ease-spring) both; }
body[data-skin="m1"] .wh-step > :nth-child(2) { animation-delay: .06s; }
body[data-skin="m1"] .wh-step > :nth-child(3) { animation-delay: .12s; }
body[data-skin="m1"] .wh-step > :nth-child(4) { animation-delay: .18s; }
body[data-skin="m1"] .wh-step > :nth-child(n+5) { animation-delay: .24s; }
body[data-skin="m1"] .wh-hero { position: relative; height: 210px; margin: 0 -22px 22px; border-radius: var(--m1-r); background: #2A1830 center 40% / cover; }
body[data-skin="m1"] .wh-mark { position: absolute; left: 50%; bottom: -30px; width: 64px; margin-left: -32px; padding: 9px; border-radius: 50%; background: #1C1020; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
body[data-skin="m1"] .wh-kicker { margin-top: 20px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-led); text-align: center; }
body[data-skin="m1"] .wh-step h1 { margin-top: 6px; font-size: 34px; line-height: 1.06; text-align: center; }
body[data-skin="m1"] .wh-lead { margin: 10px auto 0; max-width: 32ch; font-size: 15px; line-height: 1.5; color: var(--jn-muted); text-align: center; }
body[data-skin="m1"] .wh-list { margin-top: 22px; display: grid; gap: 10px; }
body[data-skin="m1"] .wh-list li { padding: 12px 14px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); font-size: 13.5px; line-height: 1.4; color: var(--jn-muted); }
body[data-skin="m1"] .wh-list b { display: block; font-size: 15px; color: var(--jn-ink); }
body[data-skin="m1"] .wh-cta { margin-top: auto; width: 100%; height: 54px; border-radius: var(--m1-r); background: var(--jn-ink); color: var(--jn-cream); font-size: 15.5px; font-weight: 600; transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .wh-step .wh-cta { margin-top: 24px; }
body[data-skin="m1"] .wh-cta:active { transform: scale(.97); }
body[data-skin="m1"] .wh-cta:disabled { opacity: .6; }
body[data-skin="m1"] .wh-install { background: var(--jn-led); color: #ffffff; }
body[data-skin="m1"] .wh-skip { margin-top: 10px; height: 44px; font-size: 14px; font-weight: 600; color: var(--jn-muted); }
body[data-skin="m1"] .wh-wallet { position: relative; margin: 26px auto 4px; width: 236px; height: 176px; }
body[data-skin="m1"] .wh-pass { position: absolute; left: 8px; right: 8px; top: 0; height: 142px; border-radius: var(--m1-r); background: #1C1020; color: #F3ECE2; overflow: hidden; box-shadow: 0 18px 30px -16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,143,196,.14); animation: skin-m1-wh-slide 1.1s .35s var(--ease-spring) both; }
body[data-skin="m1"] .wh-pass-top { display: flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 10px 12px 7px; }
body[data-skin="m1"] .wh-pass-top img { width: 20px; }
body[data-skin="m1"] .wh-pass-top b { margin-left: auto; font-size: 13px; font-weight: 600; color: #F3ECE2; }
body[data-skin="m1"] .wh-pass-strip { height: 58px; background: linear-gradient(180deg, #150D18, #22132A); display: flex; align-items: center; padding: 0 8px; }
body[data-skin="m1"] .wh-pass-wave { display: block; width: 100%; }
body[data-skin="m1"] .wh-pass-track { fill: none; stroke: #33203A; stroke-width: 4; stroke-linecap: round; }
body[data-skin="m1"] .wh-pass-lit { fill: none; stroke: #FF2F9A; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,92,176,.9)); }
body[data-skin="m1"] .wh-pass-ink { fill: #F3ECE2; stroke: #2A1830; stroke-width: 2; }
body[data-skin="m1"] .wh-pass-seal { fill: #24152A; stroke: #33203A; stroke-width: 2; stroke-dasharray: 3 2.2; }
body[data-skin="m1"] .wh-pass-gold { fill: #FF5CB0; stroke: #D61A7E; stroke-width: 1.5; }
body[data-skin="m1"] .wh-pass-reward { font-family: var(--font-display), Georgia, serif; font-size: 16px; font-weight: 600; fill: #F3ECE2; }
body[data-skin="m1"] .wh-pocket { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; border-radius: var(--m1-r); background: linear-gradient(170deg, #0C070E, #F3ECE2); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
body[data-skin="m1"] .wh-walletcta { display: flex; align-items: center; justify-content: center; background: #000000; color: #ffffff; }
body[data-skin="m1"] .wh-gwallet { margin-top: 16px; display: flex; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .wh-pass { animation: none; }
}
body[data-skin="m1"] .wh-phone { position: relative; margin: 20px auto 0; width: 150px; height: 180px; border-radius: var(--m1-r); border: 6px solid var(--jn-ink); border-bottom: 0; background: linear-gradient(160deg, #2A1830, #1C1020); -webkit-mask-image: linear-gradient(to bottom, #000000 75%, transparent); mask-image: linear-gradient(to bottom, #000000 75%, transparent); }
body[data-skin="m1"] .wh-screen { padding: 22px 14px 0; }
body[data-skin="m1"] .wh-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
body[data-skin="m1"] .wh-icons i { aspect-ratio: 1; border-radius: var(--m1-r); background: rgba(0,0,0,.14); }
body[data-skin="m1"] .wh-myicon { aspect-ratio: 1; border-radius: var(--m1-r); background: #1C1020; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--jn-led); animation: skin-m1-wh-drop 1.1s .5s var(--ease-spring) both, skin-m1-wh-glow 2.4s 1.8s ease-in-out infinite; }
body[data-skin="m1"] .wh-myicon img { width: 70%; }
body[data-skin="m1"] .wh-label { display: block; margin-top: 4px; margin-left: 75%; transform: translateX(-12%); font-size: 7px; font-weight: 600; color: var(--jn-ink); }
body[data-skin="m1"] .wh-how { margin-top: 18px; display: grid; gap: 10px; counter-reset: wh; }
body[data-skin="m1"] .wh-how li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); font-size: 13.5px; line-height: 1.4; color: var(--jn-muted); }
body[data-skin="m1"] .wh-how b { display: block; font-size: 15px; color: var(--jn-ink); }
body[data-skin="m1"] .wh-ic { width: 44px; height: 44px; border-radius: var(--m1-r); background: #ffffff; color: #0a84ff; display: grid; place-items: center; box-shadow: 0 2px 6px -2px rgba(0,0,0,.2); }
body[data-skin="m1"] .wh-ic svg { width: 22px; height: 22px; }
body[data-skin="m1"] .wh-how li:first-child .wh-ic { animation: skin-m1-wh-tap 2.2s 1s ease-in-out infinite; }
body[data-skin="m1"] .wh-ic-text { font-size: 14px; font-weight: 600; }
body[data-skin="m1"] .wh-note { margin-top: 18px; padding: 16px; border-radius: var(--m1-r); background: #3A1F42; font-size: 14px; line-height: 1.45; }
body[data-skin="m1"] .wh-note > b { display: block; font-size: 16px; margin-bottom: 4px; }
body[data-skin="m1"] .wh-sec { margin-top: 10px; height: 40px; padding: 0 14px; border-radius: var(--m1-r); border: 1.5px solid var(--jn-ink); font-size: 13.5px; font-weight: 600; color: var(--jn-ink); }
body[data-skin="m1"] .wh-fine { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--jn-muted); text-align: center; }
body[data-skin="m1"] .wh-bell { margin: 30px auto 0; width: 78px; height: 78px; border-radius: 50%; background: var(--jn-ink); color: #FF8FC4; display: grid; place-items: center; animation: skin-m1-wh-ring 2.6s 1s ease-in-out infinite; }
body[data-skin="m1"] .wh-bell svg { width: 34px; height: 34px; }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .wh-step,
body[data-skin="m1"] .wh-step > *,
body[data-skin="m1"] .wh-myicon,
body[data-skin="m1"] .wh-bell,
body[data-skin="m1"] .wh-how li .wh-ic,
body[data-skin="m1"] .jh-hero { animation: none; }
}
body[data-skin="m1"] .ib-strip { position: fixed; left: 14px; right: 14px; z-index: 30; bottom: calc(90px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: var(--m1-r); background: #F3ECE2; color: #1C1020; box-shadow: 0 14px 30px -14px rgba(0,0,0,.7); animation: skin-m1-jn-rise .6s var(--ease-out) both; }
body[data-skin="m1"] .ib-icon { width: 40px; height: 40px; flex: none; border-radius: var(--m1-r); background: #1C1020; display: grid; place-items: center; box-shadow: 0 0 0 2px #FF2F9A; }
body[data-skin="m1"] .ib-icon img { width: 70%; }
body[data-skin="m1"] .ib-strip p { flex: 1; min-width: 0; }
body[data-skin="m1"] .ib-strip b { display: block; font-size: 14px; font-weight: 600; color: #FF8FC4; }
body[data-skin="m1"] .ib-strip small { display: block; font-size: 12px; opacity: .8; }
body[data-skin="m1"] .ib-later { width: 32px; height: 32px; font-size: 20px; line-height: 1; color: rgba(18,11,20,.6); }
body[data-skin="m1"] .ib-go { height: 38px; padding: 0 14px; border-radius: var(--m1-r); background: #1C1020; color: #F3ECE2; font-size: 13px; font-weight: 600; }
body[data-skin="m1"] .ib-sheet { --jn-umber: #2A1830; --jn-led: #FF2F9A; }
body[data-skin="m1"] .ib-lead { font-size: 14.5px; color: #C9BEC8; margin-top: -4px; }
body[data-skin="m1"] .ib-sheet .wh-phone { margin-top: 12px; }
body[data-skin="m1"] .ib-sheet .jn-save { margin-top: 16px; }
body[data-skin="m1"] .yu-home { width: 100%; text-align: left; }
body[data-skin="m1"] .yu-home em { font-style: normal; font-size: 24px; }
body[data-skin="m1"] .cs-box { display: grid; gap: 10px; margin-top: 4px; }
body[data-skin="m1"] .cs-intro { font-size: 13.5px; line-height: 1.45; color: #C9BEC8; text-align: center; }
body[data-skin="m1"] .cs-go { height: 50px; border-radius: var(--m1-r); background: #F3ECE2; color: #1C1020; font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .cs-go:disabled { opacity: .5; }
body[data-skin="m1"] .cs-code { height: 64px; border-radius: var(--m1-r); border: 1.5px solid #33203A; background: #1C1020; text-align: center; font-size: 30px; letter-spacing: .5em; padding-left: .5em; font-weight: 600; color: #F3ECE2; outline: none; }
body[data-skin="m1"] .cs-code:focus { border-color: #FF2F9A; box-shadow: 0 0 0 4px rgba(255,47,154,.2); }
body[data-skin="m1"] .cs-err { font-size: 13px; color: #FF8A98; text-align: center; }
body[data-skin="m1"] .cs-again { font-size: 13px; font-weight: 600; color: #C9BEC8; text-decoration: underline; text-underline-offset: 3px; }
body[data-skin="m1"] .jh-existing { display: grid; gap: 10px; padding: 16px; border-radius: var(--m1-r); background: #3A1F42; text-align: center; animation: skin-m1-jn-pop .5s var(--ease-spring) both; }
body[data-skin="m1"] .jh-existing > b { font-size: 16px; color: #F3ECE2; }
body[data-skin="m1"] .jh-existing > a { font-size: 13px; color: #F3ECE2; text-decoration: underline; text-underline-offset: 3px; }
body[data-skin="m1"] .jh-existing > .jh-forgot { font-size: 13px; color: #F3ECE2; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
body[data-skin="m1"] .jh-existing > .jh-forgot:disabled { opacity: .6; }
body[data-skin="m1"] .jh-existing > .jh-forgot-sent { font-size: 13px; color: #F3ECE2; }
body[data-skin="m1"] .pk-box { display: grid; gap: 8px; }
body[data-skin="m1"] .pk-go { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: var(--m1-r); background: #F3ECE2; color: #1C1020; font-size: 16px; font-weight: 600; transition: transform .25s var(--ease-spring); }
body[data-skin="m1"] .pk-go svg { width: 24px; height: 24px; color: #FF8FC4; }
body[data-skin="m1"] .pk-go:active { transform: scale(.97); }
body[data-skin="m1"] .pk-go:disabled { opacity: .6; }
body[data-skin="m1"] .pk-or { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: #C9BEC8; text-transform: uppercase; letter-spacing: .08em; }
body[data-skin="m1"] .pk-or::before,
body[data-skin="m1"] .pk-or::after { content: ""; flex: 1; height: 1px; background: #33203A; }
body[data-skin="m1"] .wh-face svg { width: 38px; height: 38px; }
body[data-skin="m1"] .wh-faceask { margin-top: 22px; padding: 20px 18px 6px; border-radius: var(--m1-r); background: var(--jn-cream); border: 1px solid var(--jn-line); display: grid; justify-items: center; gap: 6px; text-align: center; }
body[data-skin="m1"] .wh-faceicon { width: 52px; height: 52px; border-radius: 50%; background: var(--jn-ink); color: #FF8FC4; display: grid; place-items: center; }
body[data-skin="m1"] .wh-faceicon svg { width: 28px; height: 28px; }
body[data-skin="m1"] .wh-faceask > b { margin-top: 4px; font-size: 18px; line-height: 1.25; color: var(--jn-ink); }
body[data-skin="m1"] .wh-faceask > p { margin: 0; max-width: 30ch; font-size: 14px; line-height: 1.45; color: var(--jn-muted); }
body[data-skin="m1"] .wh-step .wh-faceask .wh-cta { margin-top: 10px; }
body[data-skin="m1"] .yu-home:disabled { opacity: 1; }
body[data-skin="m1"]:has(.jn-bar textarea:focus) .jn-composer { bottom: env(safe-area-inset-bottom); }
body[data-skin="m1"]:has([aria-label="Cookie notice"]) .ib-strip { display: none; }
body[data-skin="m1"] .fc-invite > * { min-width: 0; }
body[data-skin="m1"] .fc-link { max-width: 100%; }
body[data-skin="m1"] .bk-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.42); display: flex; align-items: flex-end; animation: skin-m1-jn-fade .25s ease both; }
body[data-skin="m1"] .bk-sheet { width: 100%; height: calc(100dvh - env(safe-area-inset-top) - 12px); display: flex; flex-direction: column; border-radius: var(--m1-r); background: #1C1020; overflow: hidden; animation: skin-m1-jn-up var(--dur-sheet) var(--ease-spring) both; }
body[data-skin="m1"] .bk-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px 20px; border-bottom: 1px solid #33203A; }
body[data-skin="m1"] .bk-head b { flex: 1; font-size: 22px; font-weight: 500; color: #F3ECE2; }
body[data-skin="m1"] .bk-out { font-size: 12.5px; font-weight: 600; color: #C9BEC8; text-decoration: underline; text-underline-offset: 3px; }
body[data-skin="m1"] .bk-frame { flex: 1; width: 100%; border: 0; background: #1C1020; }
body[data-skin="m1"] .bk-wait { position: absolute; left: 50%; top: 45%; }
body[data-skin="m1"] .bk-wait .jn-spin { display: block; width: 28px; height: 28px; border-color: rgba(0,0,0,.15); border-top-color: #F3ECE2; }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .bk-sheet,
body[data-skin="m1"] .bk-scrim { animation: none; }
}
body[data-skin="m1"] .sa-card { margin: 0 20px 18px; padding: 18px 16px 8px; border-radius: var(--m1-r); background: #3A1F42; text-align: center; }
body[data-skin="m1"] .sa-card form,
body[data-skin="m1"] .sa-card > div { display: grid; gap: 8px; justify-items: stretch; }
body[data-skin="m1"] .sa-card b { font-size: 17px; line-height: 1.3; color: #F3ECE2; }
body[data-skin="m1"] .sa-card p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #C9BEC8; }
body[data-skin="m1"] .sa-field { position: relative; margin-top: 4px; }
body[data-skin="m1"] .sa-field input { width: 100%; height: 50px; padding: 0 64px 0 16px; border-radius: var(--m1-r); border: 1px solid #33203A; background: #24152A; font-size: 16px; color: #F3ECE2; }
body[data-skin="m1"] .sa-field button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 10px; font-size: 12px; font-weight: 600; color: #C9BEC8; }
body[data-skin="m1"] .sa-go { height: 50px; border-radius: var(--m1-r); background: #F3ECE2; color: #1C1020; font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .sa-go:disabled { opacity: .6; }
body[data-skin="m1"] .sa-later { height: 40px; font-size: 13.5px; font-weight: 600; color: #C9BEC8; }
body[data-skin="m1"] .sa-face { justify-self: center; width: 48px; height: 48px; border-radius: 50%; background: #F3ECE2; color: #FF8FC4; display: grid; place-items: center; }
body[data-skin="m1"] .sa-face svg { width: 26px; height: 26px; }
body[data-skin="m1"] { --m1-porcelain: #1C1020; --m1-nude:      #2A1830; --m1-caramel:   #33203A; --m1-gold:      #FF2F9A; --m1-cocoa:     #F3ECE2; --m1-ink:       #F3ECE2; --m1-muted:     #C9BEC8; --m1-line:      #33203A; --m1-rule:      rgba(255,47,154,.85); --m1-caps:      560 11.5px/1.3 var(--font-manrope), system-ui, sans-serif; --elev-1: none; --elev-2: 0 10px 24px -20px rgba(0,0,0,.45); --elev-3: 0 -30px 80px -40px rgba(0,0,0,.6); }
body[data-skin="m1"] .wh-kicker,
body[data-skin="m1"] .fc-etop span,
body[data-skin="m1"] .fc-weeks small,
body[data-skin="m1"] .jn-field span,
body[data-skin="m1"] .sh-flabel,
body[data-skin="m1"] .jn-day span,
body[data-skin="m1"] .pk-or,
body[data-skin="m1"] .sh-pdate span,
body[data-skin="m1"] .sh-gcname { font: var(--m1-caps); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--m1-muted); }
body[data-skin="m1"] .sh-pdate span { font-size: 9.5px; letter-spacing: .12em; color: inherit; }
body[data-skin="m1"] .sh-gcname { color: inherit; font-size: 10px; }
body[data-skin="m1"] .jn-who,
body[data-skin="m1"] .sh-runsheet time,
body[data-skin="m1"] .fc-earned .fc-boost { color: var(--m1-cocoa); }
body[data-skin="m1"] .jn-who { font: var(--m1-caps); font-size: 10.5px; font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--m1-muted); margin-bottom: 4px; }
body[data-skin="m1"] .fc-etop b,
body[data-skin="m1"] .sh-pdate b,
body[data-skin="m1"] .sh-prod em,
body[data-skin="m1"] .sh-bundle em,
body[data-skin="m1"] .sh-gcamt,
body[data-skin="m1"] .rt-amt,
body[data-skin="m1"] .yu-home em,
body[data-skin="m1"] .sh-runsheet time { font-family: var(--font-manrope), sans-serif; font-weight: 360; font-stretch: 108%; letter-spacing: -.025em; font-variant-numeric: lining-nums proportional-nums; }
body[data-skin="m1"] .wh-cta,
body[data-skin="m1"] .jn-save,
body[data-skin="m1"] .cs-go,
body[data-skin="m1"] .pk-go,
body[data-skin="m1"] .sa-go,
body[data-skin="m1"] .sh-book,
body[data-skin="m1"] .rt-hold,
body[data-skin="m1"] .jn-sv-add,
body[data-skin="m1"] .rt-sec,
body[data-skin="m1"] .wh-sec,
body[data-skin="m1"] .fc-btns button,
body[data-skin="m1"] .jn-sv-share,
body[data-skin="m1"] .sh-callbtn,
body[data-skin="m1"] .jn-two label,
body[data-skin="m1"] .sh-call button,
body[data-skin="m1"] .ib-go,
body[data-skin="m1"] .jn-sv-confirm button { border-radius: var(--m1-r); border: 1.5px solid var(--m1-ink); font-family: var(--font-manrope), sans-serif; font-weight: 600; font-stretch: 112%; font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase; line-height: 1.15; transition: background-color .35s var(--ease-out), color .35s var(--ease-out), transform .18s var(--ease-out); }
body[data-skin="m1"] .wh-cta,
body[data-skin="m1"] .jn-save,
body[data-skin="m1"] .cs-go,
body[data-skin="m1"] .pk-go,
body[data-skin="m1"] .sa-go,
body[data-skin="m1"] .sh-book,
body[data-skin="m1"] .rt-hold,
body[data-skin="m1"] .jn-sv-add,
body[data-skin="m1"] .fc-btns button:first-child,
body[data-skin="m1"] .jn-sv-share:not(.jn-sv-done),
body[data-skin="m1"] .jn-two label:first-child,
body[data-skin="m1"] .sh-callbtn { background: var(--m1-ink); color: var(--m1-porcelain); box-shadow: inset 0 0 0 2px var(--m1-ink), inset 0 0 0 3px rgba(18,11,20,.26); }
body[data-skin="m1"] .rt-sec,
body[data-skin="m1"] .wh-sec,
body[data-skin="m1"] .fc-btns button,
body[data-skin="m1"] .jn-two label,
body[data-skin="m1"] .jn-sv-confirm .jn-sv-no { background: var(--m1-porcelain); color: var(--m1-ink); }
body[data-skin="m1"] .jn-sv-confirm .jn-sv-yes { background: #FF8A98; border-color: #FF8A98; color: #ffffff; }
body[data-skin="m1"] .jn-sv-share.jn-sv-done { background: transparent; color: var(--m1-cocoa); border-color: var(--m1-gold); }
body[data-skin="m1"] .wh-cta,
body[data-skin="m1"] .jn-save,
body[data-skin="m1"] .cs-go,
body[data-skin="m1"] .sa-go,
body[data-skin="m1"] .rt-hold,
body[data-skin="m1"] .sh-book { height: 52px; font-size: 13px; }
body[data-skin="m1"] .pk-go { height: 54px; font-size: 13px; }
body[data-skin="m1"] .wh-cta.wh-walletcta { background: #000000; border-color: #000000; box-shadow: none; text-transform: none; letter-spacing: 0; font-stretch: 100%; font-size: 16px; font-weight: 500; }
body[data-skin="m1"] .wh-cta.wh-install { background: var(--m1-ink); color: var(--m1-porcelain); }
body[data-skin="m1"] .fc-btns button,
body[data-skin="m1"] .sh-call button,
body[data-skin="m1"] .jn-two label { min-height: 44px; height: auto; padding: 0 14px; font-size: 11.5px; letter-spacing: .12em; }
body[data-skin="m1"] .rt-sec { height: 48px; }
body[data-skin="m1"] .ib-go { height: 40px; background: var(--m1-porcelain); color: var(--m1-ink); border-color: var(--m1-porcelain); font-size: 11px; letter-spacing: .12em; }
body[data-skin="m1"] .wh-skip,
body[data-skin="m1"] .sa-later,
body[data-skin="m1"] .jn-sv-back,
body[data-skin="m1"] .cs-again { font-family: var(--font-manrope), sans-serif; font-size: 13.5px; font-weight: 500; color: var(--m1-muted); text-decoration: underline; text-decoration-color: var(--m1-gold); text-underline-offset: 4px; }
body[data-skin="m1"] .sh-more,
body[data-skin="m1"] .bk-out,
body[data-skin="m1"] .jh-existing > a,
body[data-skin="m1"] .jh-existing > .jh-forgot,
body[data-skin="m1"] .rt-retry { color: var(--m1-cocoa); text-decoration: underline; text-decoration-color: var(--m1-gold); text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) {
  body[data-skin="m1"] .rt-sec:hover,
body[data-skin="m1"] .wh-sec:hover,
body[data-skin="m1"] .fc-btns button:hover,
body[data-skin="m1"] .jn-two label:hover { background: var(--m1-ink); color: var(--m1-porcelain); }
}
body[data-skin="m1"] .pf-tabs { border-radius: var(--m1-r); padding: 3px; gap: 3px; }
body[data-skin="m1"] .pf-tabs button { border-radius: var(--m1-r); min-height: 42px !important; font-family: var(--font-manrope), sans-serif; font-size: 11.5px !important; font-weight: 600 !important; font-stretch: 112%; letter-spacing: .13em !important; text-transform: uppercase !important; color: var(--m1-muted) !important; }
body[data-skin="m1"] .jn-seg { gap: 0; margin-top: 18px; padding: 8px 20px; }
body[data-skin="m1"] .jn-seg button { border-radius: var(--m1-r); height: 46px; border: 1.5px solid var(--jn-line); background: var(--m1-porcelain); color: var(--m1-ink); font-family: var(--font-manrope), sans-serif; font-size: 11.5px; font-weight: 600; font-stretch: 112%; letter-spacing: .13em; text-transform: uppercase; }
body[data-skin="m1"] .jn-seg button + button { border-left: 0; }
body[data-skin="m1"] .jn-seg button.jn-seg-on { background: var(--m1-ink); color: var(--m1-porcelain); border-color: var(--m1-ink); box-shadow: inset 0 0 0 2px var(--m1-ink), inset 0 0 0 3px rgba(18,11,20,.22); }
body[data-skin="m1"] .jn-seg-n { border-radius: var(--m1-r); background: var(--m1-nude); color: var(--m1-cocoa); letter-spacing: 0; }
body[data-skin="m1"] .jn-seg-on .jn-seg-n { background: var(--m1-gold); color: var(--m1-ink); }
body[data-skin="m1"] .jn-starters button,
body[data-skin="m1"] .sh-chips button,
body[data-skin="m1"] .sh-social a { border-radius: var(--m1-r); border: 1px solid var(--m1-caramel); background: var(--m1-porcelain); color: var(--m1-cocoa); font-weight: 500; font-size: 13.5px; min-height: 40px; }
body[data-skin="m1"] .sh-social a { min-height: 44px; font: var(--m1-caps); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--m1-cocoa); padding: 0 16px; }
body[data-skin="m1"] .jn-starters .jn-log { border-color: var(--m1-ink); border-width: 1.5px; }
body[data-skin="m1"] .sh-chips button[aria-pressed="true"] { border-color: var(--m1-ink); transform: none; }
body[data-skin="m1"] .jn-field input,
body[data-skin="m1"] .jn-field textarea,
body[data-skin="m1"] .sa-field input,
body[data-skin="m1"] .cs-code { border-radius: var(--m1-r); border-width: 1px; }
body[data-skin="m1"] .jn-field input:focus,
body[data-skin="m1"] .jn-field textarea:focus,
body[data-skin="m1"] .cs-code:focus { border-color: var(--m1-ink); box-shadow: inset 0 0 0 1px var(--m1-ink) !important; outline: none !important; }
body[data-skin="m1"] .sh-party,
body[data-skin="m1"] .sh-giftcta,
body[data-skin="m1"] .sh-bundle,
body[data-skin="m1"] .fc-invite,
body[data-skin="m1"] .fc-pal,
body[data-skin="m1"] .jn-sv-card,
body[data-skin="m1"] .jn-sv-empty,
body[data-skin="m1"] .wh-faceask,
body[data-skin="m1"] .jn-sv-choice,
body[data-skin="m1"] .jn-pick { border-radius: var(--m1-r); background: var(--m1-porcelain); border: 1px solid var(--m1-line); box-shadow: none; }
body[data-skin="m1"] .fc-earned,
body[data-skin="m1"] .sa-card,
body[data-skin="m1"] .wh-note,
body[data-skin="m1"] .jh-existing { border-radius: var(--m1-r); border: 1px solid var(--m1-line); border-top: 1px solid var(--m1-rule); box-shadow: none; }
body[data-skin="m1"] .sh-pdate { border-radius: var(--m1-r); background: var(--m1-ink); color: var(--m1-porcelain); box-shadow: inset 0 0 0 3px var(--m1-ink), inset 0 0 0 4px rgba(18,11,20,.26); }
body[data-skin="m1"] .sh-pdate b { font-weight: 330; }
body[data-skin="m1"] .sh-party h2,
body[data-skin="m1"] .fc-inv h3,
body[data-skin="m1"] .fc-pal b,
body[data-skin="m1"] .sh-giftcta b,
body[data-skin="m1"] .sh-bundle b,
body[data-skin="m1"] .sh-prod b,
body[data-skin="m1"] .wh-list b,
body[data-skin="m1"] .wh-how b,
body[data-skin="m1"] .jn-sv-choice b,
body[data-skin="m1"] .yu-site b,
body[data-skin="m1"] .yu-wallet b,
body[data-skin="m1"] .rt-hrow b,
body[data-skin="m1"] .sh-facts b,
body[data-skin="m1"] .jn-drop-empty b,
body[data-skin="m1"] .rt-redeem b,
body[data-skin="m1"] .rt-used b { font-weight: 500; letter-spacing: -.005em; }
body[data-skin="m1"] .fc-sec,
body[data-skin="m1"] .sh-sec,
body[data-skin="m1"] .rt-history h2 { font-size: 28px; letter-spacing: -.035em; line-height: 1; }
body[data-skin="m1"] .sh-prod img,
body[data-skin="m1"] .sh-bundle img,
body[data-skin="m1"] .jn-ph,
body[data-skin="m1"] .jn-chip,
body[data-skin="m1"] .jn-lightbox img,
body[data-skin="m1"] .jn-drop { border-radius: var(--m1-r); }
body[data-skin="m1"] .sh-facts { margin-top: 24px; gap: 0; background: transparent; border: 0; border-top: 1px solid var(--m1-rule); border-radius: var(--m1-r); overflow: visible; }
body[data-skin="m1"] .sh-facts > div { background: transparent; padding: 14px 0; border-bottom: 1px solid var(--m1-line); }
body[data-skin="m1"] .sh-facts span { font: var(--m1-caps); font-size: 10.5px; font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--m1-muted); }
body[data-skin="m1"] .sh-facts b { font-size: 17px; margin-top: 4px; }
body[data-skin="m1"] .rt-history h2 { padding-bottom: 12px; margin-bottom: 0; border-bottom: 1px solid var(--m1-rule); }
body[data-skin="m1"] .rt-hrow { border-bottom: 1px solid var(--m1-line); align-items: baseline; min-height: 52px; }
body[data-skin="m1"] .rt-hrow b { font-size: 16px; }
body[data-skin="m1"] .wh-list,
body[data-skin="m1"] .wh-how { gap: 0; border-top: 1px solid var(--m1-rule); }
body[data-skin="m1"] .wh-list li,
body[data-skin="m1"] .wh-how li { border-radius: var(--m1-r); background: transparent; border: 0; border-bottom: 1px solid var(--m1-line); padding: 14px 0; }
body[data-skin="m1"] .wh-ic { border-radius: var(--m1-r); box-shadow: none; border: 1px solid var(--m1-line); }
body[data-skin="m1"] .fc-circle { gap: 0; border-top: 1px solid var(--m1-rule); }
body[data-skin="m1"] .fc-pal { background: transparent; border: 0; border-bottom: 1px solid var(--m1-line); padding: 12px 0; }
body[data-skin="m1"] .fc-link { border-radius: var(--m1-r); }
body[data-skin="m1"] .fc-qr { border-radius: var(--m1-r); background: var(--m1-porcelain); box-shadow: inset 0 0 0 1px var(--m1-line); }
body[data-skin="m1"] .fc-etop b { font-size: 60px; font-weight: 300; letter-spacing: -.05em; }
body[data-skin="m1"] .jn-composer { bottom: calc(57px + env(safe-area-inset-bottom)); }
body[data-skin="m1"] .ib-strip { bottom: calc(69px + env(safe-area-inset-bottom)); }
body[data-skin="m1"] .jn-bub { border-radius: var(--m1-r); background: var(--m1-porcelain); border-color: var(--m1-line); font-weight: 400; font-size: 15px; }
body[data-skin="m1"] .jn-me .jn-bub { border-radius: var(--m1-r); background: var(--m1-ink); border-color: var(--m1-ink); color: var(--m1-porcelain); }
body[data-skin="m1"] .jn-when { font-weight: 500; opacity: .7; }
body[data-skin="m1"] .jn-day::before,
body[data-skin="m1"] .jn-day::after { background: var(--m1-line); }
body[data-skin="m1"] .jn-event { border-radius: var(--m1-r); border: 1px solid var(--m1-line); color: var(--m1-muted); font-weight: 500; font-size: 12.5px; }
body[data-skin="m1"] .jn-event i { border-radius: var(--m1-r); width: 6px; height: 6px; transform: rotate(45deg); background: var(--m1-gold); }
body[data-skin="m1"] .jn-av { font-family: var(--font-manrope), sans-serif; font-weight: 400; }
body[data-skin="m1"] .jn-story { border-radius: var(--m1-r); border: 1px solid var(--m1-ink); font-weight: 600; font-size: 11px; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
body[data-skin="m1"] .jn-composer { background: linear-gradient(to top, var(--brand-bg) 80%, color-mix(in srgb, var(--brand-bg) 0%, transparent)); }
body[data-skin="m1"] .jn-bar { border-radius: var(--m1-r); background: var(--m1-porcelain); border: 1px solid var(--m1-caramel); box-shadow: none; }
body[data-skin="m1"] .jn-bar:focus-within { border-color: var(--m1-ink); box-shadow: inset 0 0 0 1px var(--m1-ink); }
body[data-skin="m1"] .jn-cam,
body[data-skin="m1"] .jn-send { width: 44px; height: 44px; border-radius: var(--m1-r); }
body[data-skin="m1"] .jn-keep span { box-shadow: none; }
body[data-skin="m1"] .jn-sv-mark { border: 1px solid var(--m1-line); }
body[data-skin="m1"] .jn-sv-text { font-family: var(--font-manrope), sans-serif; font-weight: 340; letter-spacing: -.02em; }
body[data-skin="m1"] .jn-sv-rm { border-radius: var(--m1-r); }
body[data-skin="m1"] .jn-x { border: 1px solid var(--m1-ink); color: var(--m1-ink); width: 44px; height: 44px; line-height: 42px; font-weight: 300; }
body[data-skin="m1"] .jn-redo { border-radius: var(--m1-r); background: var(--m1-porcelain); border: 1px solid var(--m1-ink); font-weight: 600; font-size: 11px; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
body[data-skin="m1"] .jn-drop { border: 1px dashed #4A3550; }
body[data-skin="m1"] .jn-sheet,
body[data-skin="m1"] .bk-sheet { border-radius: var(--m1-r); border-top: 1px solid var(--m1-gold); }
body[data-skin="m1"] .jn-grab { width: 44px; height: 4px; }
body[data-skin="m1"] .bk-head b { font-weight: 340; letter-spacing: -.03em; color: var(--m1-cocoa); }
body[data-skin="m1"] .rt-title { font-size: 46px; letter-spacing: -.045em; }
body[data-skin="m1"] .rt-sub,
body[data-skin="m1"] .rt-none { color: var(--m1-muted); }
body[data-skin="m1"] .rt-ticket { filter: drop-shadow(0 18px 22px rgba(0,0,0,.12)); }
body[data-skin="m1"] .rt-body,
body[data-skin="m1"] .rt-stub { border-radius: var(--m1-r); }
body[data-skin="m1"] .rt-body { border: 1px solid var(--m1-line); border-bottom: 0; }
body[data-skin="m1"] .rt-stub { border: 1px solid var(--m1-line); border-top: 1px dashed rgba(0,0,0,.28); }
body[data-skin="m1"] .rt-stub::before,
body[data-skin="m1"] .rt-stub::after { background: var(--brand-bg); box-shadow: inset 0 0 0 1px var(--m1-line); }
body[data-skin="m1"] .rt-ph { border-radius: var(--m1-r); margin: -22px -20px 16px; }
body[data-skin="m1"] .rt-ph::after { border-radius: var(--m1-r); }
body[data-skin="m1"] .rt-seal { box-shadow: 0 0 0 4px #2E1A34, 0 0 0 5px rgba(255,47,154,.7); }
body[data-skin="m1"] .rt-dim .rt-seal { box-shadow: 0 0 0 4px #2A1830; }
body[data-skin="m1"] .rt-amt { font-size: 50px; line-height: .95; letter-spacing: -.05em; font-weight: 330; }
body[data-skin="m1"] .rt-what,
body[data-skin="m1"] .rt-stub p,
body[data-skin="m1"] .rt-used span { color: var(--m1-muted); font-weight: 500; }
body[data-skin="m1"] .rt-qr { border-radius: var(--m1-r); box-shadow: inset 0 0 0 1px var(--m1-line); }
body[data-skin="m1"] .rt-dots i { border-radius: var(--m1-r); height: 2px; width: 12px; }
body[data-skin="m1"] .rt-dots i.on { width: 28px; }
body[data-skin="m1"] .sh-hero { border-bottom: 1px solid var(--m1-rule); }
body[data-skin="m1"] .sh-hero::after { display: none; }
body[data-skin="m1"] .sh-head { margin-top: 22px; }
body[data-skin="m1"] .sh-head h1 { font-size: 40px; line-height: .98; letter-spacing: -.045em; }
body[data-skin="m1"] .sh-head p,
body[data-skin="m1"] .sh-lead,
body[data-skin="m1"] .sh-party p,
body[data-skin="m1"] .sh-prod span,
body[data-skin="m1"] .sh-bundle span,
body[data-skin="m1"] .sh-giftcta small { color: var(--m1-muted); }
body[data-skin="m1"] .sh-runsheet li { font-weight: 500; }
body[data-skin="m1"] .sh-runsheet time { font-size: 14px; }
body[data-skin="m1"] .sh-site,
body[data-skin="m1"] .yu-site { border-radius: var(--m1-r); border: 1.5px solid var(--m1-ink); min-height: 60px; }
body[data-skin="m1"] .sh-site em,
body[data-skin="m1"] .yu-site em { font-style: normal; font-size: 13px; color: var(--m1-muted); font-stretch: 100%; }
body[data-skin="m1"] .sh-gcmini,
body[data-skin="m1"] .sh-designs button i,
body[data-skin="m1"] .sh-gcard { border-radius: var(--m1-r); }
body[data-skin="m1"] .sh-gcto { font-style: normal; font-family: var(--font-manrope), sans-serif; font-weight: 340; letter-spacing: -.02em; }
body[data-skin="m1"] .sh-arrow { font-weight: 300; }
body[data-skin="m1"] .sh-prod em { font-size: 24px; }
body[data-skin="m1"] .sh-prod em small { font-family: var(--font-manrope), sans-serif; font-weight: 500; font-stretch: 100%; letter-spacing: 0; }
body[data-skin="m1"] .sh-bundle em { font-size: 30px; }
body[data-skin="m1"] .yu-wallet { border-radius: var(--m1-r); }
body[data-skin="m1"] .yu-wmark { border-radius: 3px; }
body[data-skin="m1"] .yu-site small,
body[data-skin="m1"] .yu-gwallet small { color: var(--m1-muted); }
body[data-skin="m1"] .cw-wallet { margin-top: 12px; display: flex; justify-content: center; animation: skin-m1-rise .4s var(--ease-out) both; }
body[data-skin="m1"] .cw-gwallet { margin-top: 4px; }
body[data-skin="m1"] .cw-applewallet { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--m1-r); background: #000000; color: #ffffff; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s var(--ease-out), opacity .2s; }
body[data-skin="m1"] .cw-applewallet:active { transform: scale(.97); }
body[data-skin="m1"] .cw-applewallet:disabled { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .cw-wallet { animation: none; }
}
body[data-skin="m1"] .jh-hero,
body[data-skin="m1"] .wh-hero { border-radius: var(--m1-r); }
body[data-skin="m1"] .wh-hero { border-bottom: 1px solid var(--m1-rule); }
body[data-skin="m1"] .jh-head img,
body[data-skin="m1"] .wh-mark { border-radius: var(--m1-r); background: var(--m1-porcelain); padding: 10px; outline: 1.5px solid var(--m1-ink); outline-offset: -5px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.55); }
body[data-skin="m1"] .wh-mark { width: 68px; margin-left: -34px; bottom: -34px; }
body[data-skin="m1"] .jh-head img { width: 68px !important; }
body[data-skin="m1"] .jh-perks > div { border-radius: var(--m1-r) !important; }
body[data-skin="m1"] .wh-kicker { margin-top: 26px; }
body[data-skin="m1"] .wh-step h1 { font-size: 38px; letter-spacing: -.045em; line-height: .98; }
body[data-skin="m1"] .wh-lead,
body[data-skin="m1"] .wh-list li,
body[data-skin="m1"] .wh-how li,
body[data-skin="m1"] .wh-fine { color: var(--m1-muted); }
body[data-skin="m1"] .wh-dots i { border-radius: var(--m1-r); height: 2px; width: 14px; }
body[data-skin="m1"] .wh-dots i.on { width: 30px; }
body[data-skin="m1"] .wh-pass { border-radius: 3px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,143,196,.14); }
body[data-skin="m1"] .wh-pass-reward { font-family: var(--font-manrope), sans-serif; font-weight: 500; }
body[data-skin="m1"] .wh-pocket { border-radius: 0 0 6px 6px; }
body[data-skin="m1"] .ib-strip { border-radius: var(--m1-r); box-shadow: 0 14px 30px -18px rgba(0,0,0,.7); }
body[data-skin="m1"] .ib-strip b { font-weight: 600; }
body[data-skin="m1"] .ib-icon { border-radius: var(--m1-r); }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .wh-myicon { animation: none; }
}
body[data-skin="m1"] .fc-btns button:disabled,
body[data-skin="m1"] .wh-cta:disabled,
body[data-skin="m1"] .jn-save:disabled,
body[data-skin="m1"] .cs-go:disabled,
body[data-skin="m1"] .sa-go:disabled,
body[data-skin="m1"] .pk-go:disabled { opacity: 1 !important; background: var(--m1-nude) !important; border-color: var(--m1-nude); color: var(--m1-muted) !important; box-shadow: none; cursor: default; }
body[data-skin="m1"] .fc-btns button { white-space: nowrap; padding: 0 10px; font-size: 11px; letter-spacing: .1em; }
@media (min-width: 700px) {
  body[data-skin="m1"] .jn-composer,
body[data-skin="m1"] .ib-strip { left: calc(50% - 240px); right: calc(50% - 240px); }
  body[data-skin="m1"] .jn-scrim,
body[data-skin="m1"] .bk-scrim { justify-content: center; }
  body[data-skin="m1"] .jn-sheet,
body[data-skin="m1"] .bk-sheet { max-width: 480px; }
}
body[data-skin="m1"] .sh-more { display: inline-flex; align-items: center; min-height: 44px; }
body[data-skin="m1"] .sh-more { margin-top: 4px; }
body[data-skin="m1"] .fs-page { --fs-ink: #F3ECE2; --fs-cream: #1C1020; --fs-paper: #1C1020; --fs-honey: #3A1F42; --fs-led: #FF2F9A; --fs-muted: #C9BEC8; --fs-line: #33203A; --fs-nude: #2A1830; color: var(--fs-ink); font-family: var(--font-manrope), system-ui, sans-serif; padding: calc(env(safe-area-inset-top) + 22px) 20px calc(118px + env(safe-area-inset-bottom)); }
body[data-skin="m1"] .fs-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--fs-muted); }
body[data-skin="m1"] .fs-hero { margin: 12px -20px 0; padding: 22px 20px 18px; background: linear-gradient(180deg, var(--fs-honey) 0%, #1C1020 78%, var(--fs-paper) 100%); }
body[data-skin="m1"] .fs-give { font-size: 35px; line-height: 1.02; font-weight: 650; letter-spacing: -.04em; font-stretch: 110%; font-variation-settings: "wdth" 110; text-wrap: balance; }
body[data-skin="m1"] .fs-then { margin-top: 8px; font-size: 17px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: var(--fs-ink); text-wrap: pretty; }
body[data-skin="m1"] .fs-wave { display: block; width: 100%; margin-top: 14px; height: auto; overflow: visible; }
body[data-skin="m1"] .fs-relief { fill: url(#fs-relief); }
body[data-skin="m1"] .fs-track { fill: none; stroke: #33203A; stroke-width: 3; stroke-linecap: round; }
body[data-skin="m1"] .fs-lit { fill: none; stroke: var(--fs-led); stroke-width: 3.4; stroke-linecap: round; }
body[data-skin="m1"] .fs-bloom { fill: none; stroke: var(--fs-led); stroke-width: 12; stroke-linecap: round; opacity: .25; filter: blur(5px); }
body[data-skin="m1"] .fs-pulse { fill: none; stroke: #F3ECE2; stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 5 105; stroke-dashoffset: 5; opacity: 0; filter: drop-shadow(0 0 3px #FF5CB0); animation: fs-run 1.9s cubic-bezier(.45, .05, .3, 1) .7s 3; }
body[data-skin="m1"] .fs-her { fill: var(--fs-ink); stroke: var(--fs-ink); stroke-width: 1; }
body[data-skin="m1"] .fs-foil { fill: url(#fs-foil); stroke: #D61A7E; stroke-width: .8; }
body[data-skin="m1"] .fs-foiltxt { font: 650 11px var(--font-manrope), sans-serif; fill: #F3ECE2; text-anchor: middle; dominant-baseline: central; }
body[data-skin="m1"] .fs-wlabel { font: 600 10.5px var(--font-manrope), sans-serif; fill: var(--fs-muted); text-anchor: start; }
body[data-skin="m1"] .fs-wlabel-end { text-anchor: end; }
body[data-skin="m1"] .fs-progress { margin-top: 4px; font-size: 15px; font-weight: 600; }
body[data-skin="m1"] .fs-boost { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--fs-ink); }
body[data-skin="m1"] .fs-share { margin-top: 18px; }
body[data-skin="m1"] .fs-send { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-radius: var(--m1-r); background: var(--fs-ink); color: var(--fs-cream); font: 600 16.5px/1.1 var(--font-manrope), sans-serif; letter-spacing: -.01em; transition: transform .2s var(--ease-spring, ease), background .2s; }
body[data-skin="m1"] .fs-send:active { transform: scale(.985); }
body[data-skin="m1"] .fs-send:disabled { background: var(--fs-nude); color: var(--fs-muted); }
body[data-skin="m1"] .fs-quick { margin-top: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
body[data-skin="m1"] .fs-quick > a,
body[data-skin="m1"] .fs-quick > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 68px; padding: 8px 4px; border: 1px solid var(--fs-line); border-radius: var(--m1-r); background: var(--fs-cream); color: var(--fs-ink); text-decoration: none; font: 600 12px/1.1 var(--font-manrope), sans-serif; transition: transform .2s var(--ease-spring, ease), border-color .2s; }
body[data-skin="m1"] .fs-quick svg { width: 22px; height: 22px; }
body[data-skin="m1"] .fs-quick > :active { transform: scale(.96); border-color: var(--fs-ink); }
body[data-skin="m1"] .fs-quick span { white-space: nowrap; }
body[data-skin="m1"] .fs-words { margin-top: 20px; }
body[data-skin="m1"] .fs-label { display: block; font-size: 13px; font-weight: 600; color: var(--fs-muted); }
body[data-skin="m1"] .fs-picks { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
body[data-skin="m1"] .fs-picks button { min-height: 38px; padding: 0 12px; border: 1px solid var(--fs-line); border-radius: var(--m1-r); background: transparent; color: var(--fs-ink); font: 600 13px var(--font-manrope), sans-serif; transition: background .2s, color .2s; }
body[data-skin="m1"] .fs-picks button.is-on { background: var(--fs-ink); border-color: var(--fs-ink); color: var(--fs-cream); }
body[data-skin="m1"] .fs-msg { margin-top: 8px; padding: 12px 14px; background: var(--fs-nude); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
body[data-skin="m1"] .fs-codebtn { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; border: 1.5px solid var(--fs-ink); border-radius: var(--m1-r); background: transparent; color: var(--fs-ink); font: 600 15px var(--font-manrope), sans-serif; }
body[data-skin="m1"] .fs-codebtn svg { width: 20px; height: 20px; }
body[data-skin="m1"] .fs-codebtn:active { transform: scale(.985); }
body[data-skin="m1"] .fs-err { margin-top: 8px; font-size: 13px; color: #FF8A98; }
body[data-skin="m1"] .fs-h2 { font-size: 23px; line-height: 1.1; font-weight: 650; letter-spacing: -.035em; font-variation-settings: "wdth" 108; }
body[data-skin="m1"] .fs-sofar { margin-top: 34px; }
body[data-skin="m1"] .fs-stats { margin-top: 12px; display: flex; border-top: 1px solid var(--fs-line); border-bottom: 1px solid var(--fs-line); }
body[data-skin="m1"] .fs-stats > div { flex: 1; min-width: 0; padding: 12px 0 12px 12px; border-left: 1px solid var(--fs-line); }
body[data-skin="m1"] .fs-stats > div:first-child { padding-left: 0; border-left: 0; }
body[data-skin="m1"] .fs-stats b { display: block; font-size: 32px; line-height: 1; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
body[data-skin="m1"] .fs-stats span { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--fs-muted); }
body[data-skin="m1"] .fs-nobody { margin-top: 8px; font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
body[data-skin="m1"] .fs-note { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--fs-muted); }
body[data-skin="m1"] .fs-sofar .fc-points { margin-top: 16px; }
body[data-skin="m1"] .fs-sofar .fc-etop b { font-family: var(--font-manrope), sans-serif; font-size: 48px; font-weight: 600; letter-spacing: -.045em; }
body[data-skin="m1"] .fs-how { margin-top: 34px; }
body[data-skin="m1"] .fs-how ol { margin-top: 12px; display: grid; gap: 12px; list-style: none; padding: 0; }
body[data-skin="m1"] .fs-how li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; }
body[data-skin="m1"] .fs-how li i { width: 26px; height: 26px; display: grid; place-items: center; border: 1.5px solid var(--fs-led); font: normal 700 12.5px var(--font-manrope), sans-serif; color: var(--fs-ink); }
body[data-skin="m1"] .fs-terms { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--fs-muted); text-decoration: underline; text-underline-offset: 3px; }
body[data-skin="m1"] .fs-circle-h { margin-top: 30px; }
body[data-skin="m1"] .fs-page .fc-circle { margin-top: 10px; }
body[data-skin="m1"] .fs-sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 480px; max-height: 92dvh; padding: 0; border: 0; border-radius: var(--m1-r); background: var(--fs-cream, #1C1020); color: #F3ECE2; overflow: auto; animation: fs-up .38s cubic-bezier(.2, .9, .3, 1) both; }
body[data-skin="m1"] .fs-sheet::backdrop { background: rgba(0,0,0, .45); }
body[data-skin="m1"] .fs-sheet-in { position: relative; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); font-family: var(--font-manrope), system-ui, sans-serif; }
body[data-skin="m1"] .fs-x { position: absolute; top: 8px; right: 10px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; font: 600 14px var(--font-manrope), sans-serif; color: #F3ECE2; text-decoration: underline; text-underline-offset: 3px; }
body[data-skin="m1"] .fs-sheet-h { padding-right: 64px; font-size: 24px; line-height: 1.1; font-weight: 650; letter-spacing: -.035em; }
body[data-skin="m1"] .fs-sheet-p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: #C9BEC8; text-wrap: pretty; }
body[data-skin="m1"] .fs-bigqr { margin: 18px auto 0; width: 264px; height: 264px; display: grid; place-items: center; background: #1C1020; box-shadow: inset 0 0 0 1px #33203A; }
body[data-skin="m1"] .fs-code { margin-top: 12px; text-align: center; font-size: 14px; color: #C9BEC8; }
body[data-skin="m1"] .fs-code b { color: #F3ECE2; letter-spacing: .06em; }
body[data-skin="m1"] .fs-story { margin-top: 14px; min-height: 240px; display: grid; place-items: center; background: #2A1830; }
body[data-skin="m1"] .fs-story img { display: block; height: min(52dvh, 460px); width: auto; aspect-ratio: 9 / 16; box-shadow: 0 14px 30px -18px rgba(0,0,0, .55); }
body[data-skin="m1"] .fs-story span { padding: 24px; font-size: 14px; color: #C9BEC8; }
body[data-skin="m1"] .fs-sheet-btns { margin-top: 14px; display: grid; gap: 8px; }
body[data-skin="m1"] .fs-ghost { display: flex; align-items: center; justify-content: center; min-height: 50px; border: 1.5px solid #F3ECE2; border-radius: var(--m1-r); background: transparent; color: #F3ECE2; font: 600 15px var(--font-manrope), sans-serif; text-decoration: none; }
@media (min-width: 700px) {
  body[data-skin="m1"] .fs-sheet { inset: 0; margin: auto; max-height: 86dvh; }
}
@media (max-width: 350px) {
  body[data-skin="m1"] .fs-give { font-size: 30px; }
  body[data-skin="m1"] .fs-quick span { font-size: 11px; }
}
body[data-skin="m1"] .fs-page :focus-visible,
body[data-skin="m1"] .fs-sheet :focus-visible { outline: 2px solid var(--fs-ink, #F3ECE2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .fs-pulse { display: none; }
  body[data-skin="m1"] .fs-sheet { animation: none; }
}
body[data-skin="m1"] .fs-nudge { margin: 0 20px 16px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; background: linear-gradient(180deg, #3A1F42, #1C1020); color: #F3ECE2; font-family: var(--font-manrope), system-ui, sans-serif; animation: skin-m1-jn-pop .5s var(--ease-spring, ease) both; }
body[data-skin="m1"] .fs-nudge-t b { display: block; font-size: 17px; line-height: 1.15; font-weight: 650; letter-spacing: -.02em; }
body[data-skin="m1"] .fs-nudge-t span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: #C9BEC8; }
body[data-skin="m1"] .fs-nudge-b { display: grid; gap: 4px; }
body[data-skin="m1"] .fs-nudge-b button { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--m1-r); font: 600 14px var(--font-manrope), sans-serif; white-space: nowrap; }
body[data-skin="m1"] .fs-nudge-b button:first-child { background: #F3ECE2; color: #1C1020; }
body[data-skin="m1"] .fs-nudge-b button:last-child { background: transparent; color: #C9BEC8; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .fs-nudge { animation: none; }
}
body[data-skin="m1"] .jh-offers { padding: 14px 16px 6px; border: 1px solid var(--m1-line); border-top: 1px solid var(--m1-rule); background: var(--m1-porcelain); }
body[data-skin="m1"] .jh-offers p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--m1-ink); }
body[data-skin="m1"] .jh-offers label { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 4px; font-size: 13.5px; color: var(--m1-muted); cursor: pointer; }
body[data-skin="m1"] .jh-offers input { flex: none; }
body[data-skin="m1"] .pp-scrim { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); }
body[data-skin="m1"] .pp-sheet { --jn-ink: #F3ECE2; --jn-cream: #1C1020; width: 100%; max-width: 480px; background: var(--brand-bg); border-top: 1px solid var(--m1-gold); padding: 26px 22px calc(18px + env(safe-area-inset-bottom)); animation: skin-m1-jn-pop .5s var(--ease-spring) both; }
body[data-skin="m1"] .pp-kicker { font: var(--m1-caps); font-size: 10.5px; font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--m1-muted); }
body[data-skin="m1"] .pp-sheet h2 { margin-top: 8px; font-size: 32px; line-height: 1; letter-spacing: -.04em; font-weight: 340; color: var(--m1-ink); }
body[data-skin="m1"] .pp-list { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--m1-rule); }
body[data-skin="m1"] .pp-list li { padding: 12px 0; border-bottom: 1px solid var(--m1-line); }
body[data-skin="m1"] .pp-list b { display: block; font-size: 15.5px; font-weight: 500; color: var(--m1-ink); }
body[data-skin="m1"] .pp-list span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--m1-muted); }
body[data-skin="m1"] .pp-fine { margin: 12px 0 16px; font-size: 13px; color: var(--m1-muted); }
body[data-skin="m1"] .pp-sheet .jn-save { width: 100%; }
body[data-skin="m1"] .pp-skip { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 4px; font-size: 13.5px; color: var(--m1-muted); background: none; border: 0; }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .pp-sheet { animation: none; }
}
body[data-skin="m1"] .pf-sections { --jn-ink: #F3ECE2; --jn-muted: #C9BEC8; }
body[data-skin="m1"] .pf-sec { margin-top: 34px; }
body[data-skin="m1"] .pf-sec > h2 { font-size: 28px; font-weight: 340; letter-spacing: -.035em; line-height: 1; padding-bottom: 10px; border-bottom: 1px solid var(--m1-rule); color: var(--m1-ink); }
body[data-skin="m1"] .pf-lead { margin: 10px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--m1-muted); }
body[data-skin="m1"] .pf-sec > .yu-part:first-of-type,
body[data-skin="m1"] .pf-sec > .yu-site:first-of-type { margin-top: 14px; }
body[data-skin="m1"] .pf-sec .yu-part .yu-site:first-child,
body[data-skin="m1"] .pf-sec .yu-part .yu-wallet:first-child { margin-top: 0; }
body[data-skin="m1"] .pf-sec .yu-wallet { margin-top: 0; }
body[data-skin="m1"] .pf-row { width: 100%; text-align: left; background: transparent; }
body[data-skin="m1"] .pf-row em { font-size: 20px; }
body[data-skin="m1"] .yu-none { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--m1-muted); }
body[data-skin="m1"] .pf-sections form label { font: var(--m1-caps); font-size: 10.5px; font-stretch: 125%; letter-spacing: .14em; color: var(--m1-muted); }
body[data-skin="m1"] .pf-sections form input,
body[data-skin="m1"] .pf-sections form select { font-size: 16px; min-height: 48px; }
body[data-skin="m1"] .pf-sections form button[type="submit"] { min-height: 52px; border-radius: var(--m1-r); font-size: 11.5px; font-weight: 600; font-stretch: 112%; letter-spacing: .12em; }
body[data-skin="m1"] .pf-sections .rounded-xl { border-radius: var(--m1-r); }
body[data-skin="m1"] .pf-stack { border-top: 1px solid var(--m1-line); }
body[data-skin="m1"] .pf-stack .pf-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--m1-line) !important; border-radius: var(--m1-r); padding: 14px 0 12px; }
body[data-skin="m1"] .pf-stack .pf-label { font-family: var(--font-manrope), sans-serif; font-size: 15.5px; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--m1-ink); margin-bottom: 2px; }
body[data-skin="m1"] .pf-stack .pf-card label > span:first-child,
body[data-skin="m1"] .pf-stack .pf-card > p:not(.pf-label) { font-size: 13.5px; line-height: 1.45; color: var(--m1-muted); }
body[data-skin="m1"] .pf-stack .pf-card label { align-items: center; }
body[data-skin="m1"] .pf-stack .pf-track { width: 48px; height: 28px; border-radius: var(--m1-r) !important; background: #3A2440 !important; box-shadow: inset 0 0 0 1px #4A3550; transition: background .25s var(--ease-out); }
body[data-skin="m1"] .pf-stack input:checked + .pf-track { background: var(--m1-ink) !important; box-shadow: none; }
body[data-skin="m1"] .pf-stack .pf-knob { top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--m1-r) !important; background: #24152A; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
body[data-skin="m1"] .pf-stack input:checked ~ .pf-knob { transform: translateX(20px) !important; }
body[data-skin="m1"] .pf-stack input:focus-visible + .pf-track { box-shadow: 0 0 0 3px rgba(255,47,154,.45); }
body[data-skin="m1"] .pf-stack ol { font-size: 13.5px; }
body[data-skin="m1"] .pf-danger { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--m1-line); }
body[data-skin="m1"] .pf-danger p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--m1-muted); }
body[data-skin="m1"] .pf-danger p b { color: #FF8A98; font-weight: 600; }
body[data-skin="m1"] .pf-del { min-height: 44px; padding: 0; background: none; border: 0; font-size: 14px; font-weight: 500; color: #FF8A98; text-decoration: underline; text-underline-offset: 3px; }
body[data-skin="m1"] .pf-danger-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body[data-skin="m1"] .pf-btn { min-height: 48px; border-radius: var(--m1-r); border: 1px solid var(--m1-ink); background: transparent; color: var(--m1-ink); font-size: 11.5px; font-weight: 600; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
body[data-skin="m1"] .pf-btn-del { background: #FF8A98; border-color: #FF8A98; color: #F3ECE2; }
body[data-skin="m1"] .pf-btn:disabled { opacity: .6; }
body[data-skin="m1"] .pf-legal { display: flex; gap: 22px; margin-top: 18px; }
body[data-skin="m1"] .pf-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; color: var(--m1-muted); text-decoration: underline; text-underline-offset: 3px; }
body[data-skin="m1"] .pf-sections > .px-5 > .yu-part:last-child { margin-top: 30px; }
body[data-skin="m1"] .jh-label { display: block; margin: 16px 0 0; font: var(--m1-caps); font-size: 10.5px; font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--m1-muted); }
body[data-skin="m1"] .jh-rule { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0 6px; padding: 0; list-style: none; font-size: 13px; color: var(--m1-muted); }
body[data-skin="m1"] .jh-rule li { display: inline-flex; align-items: center; gap: 6px; }
body[data-skin="m1"] .jh-rule li::before { content: ""; width: 12px; height: 12px; border: 1px solid #4A3550; flex: none; }
body[data-skin="m1"] .jh-rule li.ok { color: var(--m1-ink); }
body[data-skin="m1"] .jh-rule li.ok::before { background: var(--m1-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23FBF5EC' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--m1-ink); }
body[data-skin="m1"] .jh-offer { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 22px; padding: 16px 16px 15px; background: var(--m1-porcelain); border: 1px solid var(--m1-line); border-top: 2px solid var(--m1-rule); }
body[data-skin="m1"] .jh-offer > svg { flex: none; margin-top: 3px; }
body[data-skin="m1"] .jh-offer b { display: block; font-size: 21px; line-height: 1.2; font-weight: 500; color: var(--m1-ink); }
body[data-skin="m1"] .jh-offer span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--m1-muted); }
body[data-skin="m1"] .jh-legal { font-size: 13px; color: var(--m1-muted); }
body[data-skin="m1"] .jh-legal a { color: var(--m1-ink); }
body[data-skin="m1"] .rt-show { display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 0; background: none; border: 0; font-size: 13.5px; font-weight: 500; color: var(--m1-muted); text-decoration: underline; text-underline-offset: 3px; }
body[data-skin="m1"] .jn-who,
body[data-skin="m1"] .sh-facts span,
body[data-skin="m1"] .pp-kicker,
body[data-skin="m1"] .pf-sections form label,
body[data-skin="m1"] .jh-label { font-size: 11.5px; letter-spacing: .12em; }
body[data-skin="m1"] .sh-pdate span,
body[data-skin="m1"] .sh-gcname { font-size: 11px; letter-spacing: .08em; }
body[data-skin="m1"] .fh-card { margin: 0 20px 16px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; background: #1C1020; border: 1px solid rgba(255,143,196,.22); color: #F3ECE2; font-family: var(--font-manrope), system-ui, sans-serif; }
body[data-skin="m1"] .fh-k { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FF2E9D; }
body[data-skin="m1"] .fh-t b { display: block; margin-top: 2px; font-size: 20px; line-height: 1.15; font-weight: 500; }
body[data-skin="m1"] .fh-t span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: #C9BEC8; }
body[data-skin="m1"] .fh-b { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: #F3ECE2; color: #1C1020; font: 600 14px var(--font-manrope), sans-serif; text-decoration: none; }
body[data-skin="m1"] .fh-b:active { transform: scale(.97); }
@keyframes skin-m1-breathe { 50% { opacity: .3; } }
@keyframes skin-m1-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes skin-m1-spin { to { transform: rotate(360deg); } }
@keyframes skin-m1-tear { 0% { transform: none; } 30% { transform: rotate(3deg) translateY(4px); } 60% { transform: rotate(-1deg); } 100% { transform: none; } }
@keyframes skin-m1-jn-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes skin-m1-jn-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes skin-m1-jn-spin { to { transform: rotate(360deg); } }
@keyframes skin-m1-jn-fade { from { opacity: 0; } }
@keyframes skin-m1-jn-up { from { transform: translateY(100%); } }
@keyframes skin-m1-sh-pan { to { transform: scale(1.08) translateX(-3%); } }
@keyframes skin-m1-sh-bump { 40% { transform: scale(1.03) rotate(-.6deg); } }
@keyframes skin-m1-sh-sheen { from { background-position: 120% 0; } 60%, to { background-position: -40% 0; } }
@keyframes skin-m1-wh-in { from { opacity: 0; transform: translateX(18px); } }
@keyframes skin-m1-wh-slide { from { transform: translateY(-34px) rotate(-4deg); opacity: 0; } }
@keyframes skin-m1-wh-drop { from { opacity: 0; transform: translateY(-40px) scale(.4); } }
@keyframes skin-m1-wh-glow { 50% { box-shadow: 0 0 0 2px var(--jn-led), 0 0 14px 4px rgba(255,47,154,.55); } }
@keyframes skin-m1-wh-tap { 0%, 60%, 100% { transform: none; } 70% { transform: scale(.88); } 80% { transform: scale(1.06); } }
@keyframes skin-m1-wh-ring { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-12deg); } 82% { transform: rotate(10deg); } 89% { transform: rotate(-6deg); } }
@keyframes fs-run {
  0% { stroke-dashoffset: 5; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; }
  100% { stroke-dashoffset: calc(var(--fs-lit) * -1 + 5); opacity: 0; }
}
@keyframes fs-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── M1 Nails Shudehill: its own voice on 1SN's components ───────────────
 * Hand-written, appended after the picked components (so these win at equal
 * specificity). M1's look, as its card and tab bar already have it:
 *   colour  the shopfront's ink #120B14, plum surfaces #1C1020 to #24152A,
 *           cream type #F3ECE2, plum grey #C9BEC8 for quiet text (10:1),
 *           the sign's hot pink #FF2F9A for every primary button and
 *           every earned state, its light #FF8FC4 for a glow.
 *   type    Khand 700 in capitals for headings, as the sign; Manrope for text.
 *   shape   18px surfaces, pills for buttons and chips, round stamps.
 * ──────────────────────────────────────────────────────────────────────── */
body[data-skin="m1"] {
  --m1-r: 18px;
  --m1-pink: #FF2F9A;
  --m1-pink-deep: #D61A7E;
  --m1-glow: #FF8FC4;
  --m1-plum: #1C1020;
  --m1-plum-hi: #24152A;
  --m1-hair: #33203A;
  --m1-cream: #F3ECE2;
  --m1-quiet: #C9BEC8;
  --m1-caps: 700 13px/1.1 var(--font-khand), Impact, sans-serif;
}

/* ── Headings: Khand caps, as the sign (1SN's are light Mona, tight) ────── */
body[data-skin="m1"] .rt-title, body[data-skin="m1"] .fs-title, body[data-skin="m1"] .sh-head h1,
body[data-skin="m1"] .wh-step h1, body[data-skin="m1"] .jh-head h1, body[data-skin="m1"] .yu-name,
body[data-skin="m1"] .jn-title, body[data-skin="m1"] .sh-sec, body[data-skin="m1"] .fs-h2,
body[data-skin="m1"] .jn-sheet-head h2, body[data-skin="m1"] .fs-sheet-h, body[data-skin="m1"] .pp-sheet h2,
body[data-skin="m1"] .ib-sheet h2, body[data-skin="m1"] .bk-head h2 {
  font-family: var(--font-khand), Impact, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
  font-stretch: 100%;
}
body[data-skin="m1"] .sh-head h1, body[data-skin="m1"] .rt-title, body[data-skin="m1"] .fs-title,
body[data-skin="m1"] .wh-step h1, body[data-skin="m1"] .jn-title { font-size: 38px; }
body[data-skin="m1"] .jh-head h1 { font-size: 40px; }

/* Small labels: Khand caps in the plum grey, never pink text on plum. */
body[data-skin="m1"] .sh-facts span, body[data-skin="m1"] .wh-kicker, body[data-skin="m1"] .fs-label,
body[data-skin="m1"] .sh-flabel, body[data-skin="m1"] .rt-eyebrow {
  font: var(--m1-caps);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m1-quiet);
}

/* ── Primary buttons: the sign's pink pill, ink type in Khand caps ─────── */
body[data-skin="m1"] .sh-book, body[data-skin="m1"] .wh-cta, body[data-skin="m1"] .jn-save,
body[data-skin="m1"] .rt-hold, body[data-skin="m1"] .fs-send, body[data-skin="m1"] .cs-go,
body[data-skin="m1"] .pk-go, body[data-skin="m1"] .sa-go, body[data-skin="m1"] .fh-b,
body[data-skin="m1"] .fc-btns button:first-child, body[data-skin="m1"] .fs-nudge-b button:first-child,
body[data-skin="m1"] .wh-cta.wh-install, body[data-skin="m1"] .sh-callbtn {
  background: var(--m1-pink);
  color: #120B14;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 24px -14px rgba(255,47,154,.9);
  font-family: var(--font-khand), Impact, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-stretch: 100%;
}
body[data-skin="m1"] .sh-book:active, body[data-skin="m1"] .wh-cta:active, body[data-skin="m1"] .jn-save:active,
body[data-skin="m1"] .fs-send:active { transform: scale(.97); }
body[data-skin="m1"] .wh-cta:disabled, body[data-skin="m1"] .jn-save:disabled { background: var(--m1-plum-hi); color: var(--m1-quiet); box-shadow: none; }
/* Apple Wallet's own black button keeps Apple's look. */
body[data-skin="m1"] .wh-cta.wh-walletcta { background: #000; color: #fff; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(243,236,226,.24); text-transform: none; letter-spacing: 0; font-family: var(--font-manrope), system-ui, sans-serif; font-weight: 600; font-size: 16px; }

/* Secondary buttons and links: a cream hairline pill. */
body[data-skin="m1"] .sh-site, body[data-skin="m1"] .yu-site {
  border-radius: var(--m1-r);
  border: 1.5px solid var(--m1-hair);
  background: var(--m1-plum);
  color: var(--m1-cream);
}
body[data-skin="m1"] .sh-site em, body[data-skin="m1"] .yu-site em { color: var(--m1-glow); font-family: var(--font-manrope), sans-serif; text-transform: none; font-size: 13px; }
body[data-skin="m1"] .sh-call button, body[data-skin="m1"] .sh-social a, body[data-skin="m1"] .fs-quick > *,
body[data-skin="m1"] .fs-codebtn, body[data-skin="m1"] .wh-skip { border-radius: 999px; }
body[data-skin="m1"] .sh-call button { background: var(--m1-plum-hi); color: var(--m1-cream); border: 1px solid var(--m1-hair); }

/* Chips and segments: the chosen one is pink. */
body[data-skin="m1"] .jn-seg button.jn-seg-on, body[data-skin="m1"] .fs-picks button.is-on,
body[data-skin="m1"] .sh-chips button[aria-pressed="true"] {
  background: var(--m1-pink); color: #120B14; border-color: var(--m1-pink); box-shadow: none;
}
body[data-skin="m1"] .jn-seg button, body[data-skin="m1"] .fs-picks button, body[data-skin="m1"] .sh-chips button { border-radius: 999px; }

/* ── Journal: the member's own messages in pink, the salon's in plum ────── */
body[data-skin="m1"] .jn-me .jn-bub { background: var(--m1-pink); color: #120B14; border-color: var(--m1-pink); }
body[data-skin="m1"] .jn-av.jn-salon { background: var(--m1-pink); border-color: var(--m1-pink); }
body[data-skin="m1"] .jn-av.jn-salon img { filter: brightness(0) saturate(100%) invert(5%) sepia(15%) saturate(1500%) hue-rotate(260deg); }

/* ── Sheets: plum, rounded top, a pink handle ──────────────────────────── */
body[data-skin="m1"] .jn-sheet, body[data-skin="m1"] .fs-sheet-in, body[data-skin="m1"] .pp-sheet {
  background: var(--m1-plum);
  color: var(--m1-cream);
  border-radius: 26px 26px 0 0;
  border-top: 1px solid var(--m1-hair);
}
body[data-skin="m1"] .jn-grab { background: var(--m1-pink); opacity: .8; }

/* ── Reward tickets: plum paper, a pink perforation ─────────────────────── */
body[data-skin="m1"] .rt-ticket { border-radius: var(--m1-r); }
body[data-skin="m1"] .rt-seal { background: var(--m1-pink); }

/* ── Salon tab ─────────────────────────────────────────────────────────── */
body[data-skin="m1"] .sh-hero { height: calc(300px + env(safe-area-inset-top)); border-bottom: 1px solid var(--m1-hair); }
body[data-skin="m1"] .sh-hero::after { display: block; height: 90px; background: linear-gradient(to bottom, transparent, #120B14); }
body[data-skin="m1"] .sh-hero img { animation-duration: 24s; }
body[data-skin="m1"] .sh-head { margin-top: -18px; }
body[data-skin="m1"] .sh-head p { color: var(--m1-quiet); }
body[data-skin="m1"] .sh-head .sh-tagline { color: var(--m1-glow); }
/* The facts as one plum panel (1SN's are menu rows under a gold rule, which
   on round corners would draw an arc). */
body[data-skin="m1"] .sh-facts { background: var(--m1-plum); border: 1px solid var(--m1-hair); border-radius: var(--m1-r); padding: 0 16px; overflow: hidden; }
body[data-skin="m1"] .sh-facts > div:last-child { border-bottom: 0; }
body[data-skin="m1"] .sh-facts b { color: var(--m1-cream); }
/* The salon's standing offers, under the facts: a pink tick each. */
body[data-skin="m1"] .sh-notes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
body[data-skin="m1"] .sh-notes li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.45; color: var(--m1-cream); }
body[data-skin="m1"] .sh-notes li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--m1-pink); box-shadow: 0 0 0 3px rgba(255,47,154,.22); }
body[data-skin="m1"] .sh-gcmini { border-radius: 8px; }
body[data-skin="m1"] .sh-gcmini em { font-family: var(--font-khand), Impact, sans-serif; font-weight: 700; color: #F3ECE2; font-size: 17px; }
body[data-skin="m1"] .sh-giftcta { border-radius: var(--m1-r); }

/* ── Welcome: M1's pass, a round stamp per visit on the ink ─────────────── */
body[data-skin="m1"] .wh-pass { border-radius: 14px; background: #120B14; box-shadow: 0 18px 30px -16px rgba(0,0,0,.7), inset 0 0 0 1px rgba(243,236,226,.16); }
body[data-skin="m1"] .wh-pass-top span { font-family: var(--font-khand), Impact, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
body[data-skin="m1"] .wh-pass-plain .wh-pass-strip { background: #1C1020; justify-content: center; padding: 0 10px; }
body[data-skin="m1"] .wh-pass-dots { display: grid; grid-template-columns: repeat(var(--wh-dots, 10), 1fr); gap: 4px; width: 100%; align-items: center; justify-items: center; }
body[data-skin="m1"] .wh-pass-dot { width: 100%; max-width: 22px; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #4A3550; display: grid; place-items: center; }
body[data-skin="m1"] .wh-pass-dot:first-child { border-color: var(--m1-pink); border-style: dashed; }
body[data-skin="m1"] .wh-pass-dotreward { border-color: var(--m1-pink); box-shadow: inset 0 0 0 2px #1C1020, inset 0 0 0 12px rgba(255,47,154,.35); }
body[data-skin="m1"] .wh-pass-dotreward em { font: 700 8px/1 var(--font-manrope), sans-serif; font-style: normal; color: var(--m1-cream); }
body[data-skin="m1"] .wh-pocket { background: linear-gradient(170deg, #2A1830, #0C070E); }
body[data-skin="m1"] .wh-dots i.on { background: var(--m1-pink); }
body[data-skin="m1"] .wh-dots i.done { background: var(--m1-glow); }
/* No shopfront photograph in the skin: the mark sits on a plum disc instead. */
body[data-skin="m1"] .wh-hero:not([style]) { background: radial-gradient(120% 90% at 80% 0%, rgba(255,47,154,.35), transparent 60%), #1C1020; }

/* ── Join (house): the reward first, labels over the boxes ──────────────── */
body[data-skin="m1"] .jh-offer { border-radius: var(--m1-r); border-top-color: var(--m1-pink); }
body[data-skin="m1"] .jh-offer b { font-family: var(--font-khand), Impact, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
body[data-skin="m1"] .jh-label { font: var(--m1-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--m1-quiet); }

/* ── Home-screen strip and the notifications ask ─────────────────────────── */
body[data-skin="m1"] .ib-strip { border-radius: 999px; background: #24152A; color: var(--m1-cream); border: 1px solid var(--m1-hair); bottom: calc(86px + env(safe-area-inset-bottom)); }
body[data-skin="m1"] .ib-go { border-radius: 999px; background: var(--m1-pink); color: #120B14; }

@media (prefers-reduced-motion: reduce) {
  body[data-skin="m1"] .sh-hero img { animation: none; }
}

/* Tickets without a photograph (M1 has no shoot yet, and never borrows the
   platform's stock): the head of the ticket is the sign's pink light on
   plum, the seal where the photo's foot would be. */
body[data-skin="m1"] .rt-body:not(:has(.rt-ph))::before {
  content: ""; display: block; height: 120px; margin: -22px -20px 16px; border-radius: var(--m1-r) var(--m1-r) 0 0;
  background: radial-gradient(90% 120% at 85% 0%, rgba(255,47,154,.55), transparent 60%), radial-gradient(60% 80% at 10% 100%, rgba(255,143,196,.18), transparent 70%), #24152A;
}
body[data-skin="m1"] .rt-body:not(:has(.rt-ph)) .rt-seal { top: 94px; }
body[data-skin="m1"] .rt-seal { background: var(--m1-pink); }
body[data-skin="m1"] .rt-mini-ph { background: radial-gradient(90% 120% at 85% 0%, rgba(255,47,154,.55), transparent 60%), #24152A; }

/* ── Friends: the line runs as the sign's neon on ink (1SN's plaster relief
   and gold foil are its wave wall, not M1's) ─────────────────────────────── */
body[data-skin="m1"] .fs-relief { fill: rgba(255,47,154,.07); }
body[data-skin="m1"] .fs-foil { fill: var(--m1-pink); stroke: var(--m1-glow); }
body[data-skin="m1"] .fs-foiltxt { fill: #120B14; font-family: var(--font-khand), Impact, sans-serif; font-weight: 700; }
body[data-skin="m1"] .fs-her { fill: var(--m1-cream); }
/* The avatars' pastel tones are set inline for 1SN's cream; on ink, plum with pink. */
body[data-skin="m1"] .fc-av { background: #33203A !important; color: var(--m1-glow); }
body[data-skin="m1"] .rt-amt { letter-spacing: .005em; font-weight: 700; line-height: .95; }

/* The card page's "Bring a friend" and "Secure your account" cards: M1's round panels. */
body[data-skin="m1"] .fh-card, body[data-skin="m1"] .sa-card { border-radius: var(--m1-r); }
body[data-skin="m1"] .fh-k { font: var(--m1-caps); letter-spacing: .12em; }