/* G3 member portal v2 (2026-09-29)
 *
 * The phone reskin: warm canvas, white cards with soft shadows, bigger
 * type (Figtree), a pill tab bar, and the G3 dots used quietly (the
 * member pass, the Home wallpaper, medal celebrations).
 *
 * Loaded AFTER g3-core.css and g3-mobile.css by members/_base_mobile.html,
 * so it re-tunes the shared tokens and restyles existing m-* components
 * without touching those files. New v2 components live here too.
 *
 * Tone rule (Shawn, 2026-09-29): the tool stays serious and exact; only
 * the rewards are playful. Keep numbers aligned, labels plain, and the
 * motion for real moments.
 *
 * Widths: phones from 344px (Fold cover) to ~480px (Z Fold 8 cover,
 * extra wide) must look like a clean phone layout. ≥768px uses the
 * desktop chrome from g3-mobile.css (the unfolded Fold is fine there).
 */

/* ============================================================
 * TOKENS
 * ============================================================ */
:root {
  --bg: #F6F3EF;            /* warm canvas */
  --bg-elev: #FBF9F7;
  --surface: #FFFFFF;
  --surface-2: #FBF9F7;
  --border: #ECE6DF;
  --text: #1B1F24;
  --text-dim: #6B6560;
  --text-muted: #6B6560;
  --accent: #C2410C;        /* text + controls: 5.2:1 on white */
  --accent-hot: #9A3412;
  --accent-mark: #F16B2C;   /* the logo orange, for marks only */
  --accent-soft: #FEF1E9;
  --accent-ink: #9A3412;
  --good: #15803D;
  --good-soft: #DCFCE7;
  --warn: #B45309;
  --warn-soft: #FEF3C7;
  --alert: #B91C1C;
  --alert-soft: #FEE2E2;
  --info: #0369A1;
  --info-soft: #E0F2FE;
  --neutral-soft: #F0ECE7;
  --scrim: rgba(24, 16, 10, 0.62);
  --shadow: 0 1px 2px rgba(60, 40, 25, 0.05), 0 8px 24px -6px rgba(60, 40, 25, 0.10);
  --shadow-lg: 0 18px 40px -14px rgba(60, 40, 25, 0.30);
  --r-card: 20px;
  --r-btn: 14px;
  --r-sm: 12px;
  --header-h: 52px;
  --tabbar-h: 62px;
  /* Machine hues (the badge's dots, softened for tiles) */
  --hue-print-bg: #FFEDD5;  --hue-print-fg: #C2410C;
  --hue-laser-bg: #FFE4E6;  --hue-laser-fg: #BE123C;
  --hue-fiber-bg: #EDE9FE;  --hue-fiber-fg: #6D28D9;
  --hue-cnc-bg: #E0F2FE;    --hue-cnc-fg: #0369A1;
  --hue-metal-bg: #FEF3C7;  --hue-metal-fg: #B45309;
  --hue-wood-bg: #F5EBDD;   --hue-wood-fg: #8A5A1F;
  --hue-green-bg: #DCFCE7;  --hue-green-fg: #15803D;
  --hue-other-bg: #F0ECE7;  --hue-other-fg: #57524C;
  --font: 'Figtree', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="dark"] {
  --bg: #0E1216;
  --bg-elev: #151B21;
  --surface: #171D23;
  --surface-2: #1D242B;
  --border: #26303A;
  --text: #F3F4F6;
  --text-dim: #9AA4AE;
  --text-muted: #9AA4AE;
  --accent: #FB923C;
  --accent-hot: #FDBA74;
  --accent-mark: #F16B2C;
  --accent-soft: #3A2012;
  --accent-ink: #FDBA74;
  --good: #86EFAC;
  --good-soft: #0F2E1B;
  --warn: #FCD34D;
  --warn-soft: #3A2A08;
  --alert: #FCA5A5;
  --alert-soft: #3B1316;
  --info: #7DD3FC;
  --info-soft: #0C2A3F;
  --neutral-soft: #222A32;
  --scrim: rgba(0, 0, 0, 0.72);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
  --hue-print-bg: #3A2012;  --hue-print-fg: #FDBA74;
  --hue-laser-bg: #3B1320;  --hue-laser-fg: #FDA4AF;
  --hue-fiber-bg: #261A45;  --hue-fiber-fg: #C4B5FD;
  --hue-cnc-bg: #0C2A3F;    --hue-cnc-fg: #7DD3FC;
  --hue-metal-bg: #3A2A08;  --hue-metal-fg: #FCD34D;
  --hue-wood-bg: #33261A;   --hue-wood-fg: #E6C08E;
  --hue-green-bg: #0F2E1B;  --hue-green-fg: #86EFAC;
  --hue-other-bg: #222A32;  --hue-other-fg: #C5CCD3;
}

/* ============================================================
 * BASE
 * ============================================================ */
[hidden] { display: none !important; }
html, body { background: var(--bg); font-family: var(--font); }
body { font-size: 15px; font-variant-numeric: tabular-nums; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.m-large-title {
  font-size: 30px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  margin: 2px 0 6px; text-wrap: balance;
}
.m-lede { color: var(--text-dim); font-size: 14.5px; line-height: 1.45; margin: 0; }
.m-content { padding: 12px 16px 28px; }

/* ============================================================
 * HEADER: translucent, and the title fades in once the page's big
 * title scrolls away (iOS large-title pattern). m-app.js toggles
 * .is-titled / .is-scrolled; body gets .has-large-title.
 * ============================================================ */
.m-header {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.m-header.is-scrolled { border-bottom-color: var(--border); }
.m-header__title { font-size: 17px; font-weight: 800; transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.has-large-title .m-header__title { opacity: 0; transform: translateY(6px); }
.has-large-title .m-header.is-titled .m-header__title { opacity: 1; transform: none; }
.m-back { font-weight: 700; }
.m-bell {
  width: 44px; height: 44px; border-radius: 999px; background: var(--surface);
  box-shadow: var(--shadow); border: 0;
}

/* ============================================================
 * TAB BAR: the active tab gets a soft orange pill behind its icon.
 * ============================================================ */
.m-tabbar {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  backdrop-filter: saturate(1.5) blur(18px);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.m-tabbar__tab { font-size: 11px; font-weight: 600; gap: 3px; -webkit-tap-highlight-color: transparent; }
.m-tabbar__tab-icon {
  width: 58px; height: 30px; margin: 0; border-radius: 999px;
  transition: background 200ms var(--ease), transform 120ms var(--ease);
}
.m-tabbar__tab-icon svg { width: 22px; height: 22px; }
.m-tabbar__tab--active { color: var(--accent); font-weight: 800; }
.m-tabbar__tab--active .m-tabbar__tab-icon { background: var(--accent-soft); }
.m-tabbar__tab--active .m-tabbar__tab-icon::after { display: none; }
.m-tabbar__tab:active .m-tabbar__tab-icon { transform: scale(0.9); }

/* ============================================================
 * CARDS, BUTTONS, PILLS
 * ============================================================ */
.m-card {
  border-radius: var(--r-card);
  border: 1px solid transparent;
  box-shadow: var(--shadow);
}
[data-theme="dark"] .m-card { border-color: var(--border); }
a.m-card:hover, .m-card[role="button"]:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.m-card__label { letter-spacing: 0.08em; font-weight: 700; }
.m-btn { border-radius: var(--r-btn); font-weight: 700; min-height: 48px; }
.m-btn:active { transform: scale(0.97); }
.m-pill { border-radius: 999px; font-weight: 700; }

.m-chip2 {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap;
  background: var(--neutral-soft); color: var(--text-dim);
}
.m-chip2 i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.m-chip2--success { background: var(--good-soft); color: var(--good); }
.m-chip2--warning { background: var(--warn-soft); color: var(--warn); }
.m-chip2--info { background: var(--info-soft); color: var(--info); }
.m-chip2--accent { background: var(--accent-soft); color: var(--accent-ink); }
.m-chip2--danger { background: var(--alert-soft); color: var(--alert); }
.m-chip2--new { background: var(--hue-fiber-bg); color: var(--hue-fiber-fg); }

.m-sec { display: flex; align-items: baseline; gap: 8px; margin: 22px 2px 10px; }
.m-sec h2 { margin: 0; font-size: 19px; }
.m-sec a { margin-left: auto; font-size: 14px; font-weight: 700; }

/* Machine icon tile */
.m-mtile {
  width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  flex: none; background: var(--hue-other-bg); color: var(--hue-other-fg);
}
.m-mtile svg { width: 22px; height: 22px; }
.m-mtile--print { background: var(--hue-print-bg); color: var(--hue-print-fg); }
.m-mtile--laser { background: var(--hue-laser-bg); color: var(--hue-laser-fg); }
.m-mtile--fiber { background: var(--hue-fiber-bg); color: var(--hue-fiber-fg); }
.m-mtile--cnc { background: var(--hue-cnc-bg); color: var(--hue-cnc-fg); }
.m-mtile--metal { background: var(--hue-metal-bg); color: var(--hue-metal-fg); }
.m-mtile--wood { background: var(--hue-wood-bg); color: var(--hue-wood-fg); }
.m-mtile--green { background: var(--hue-green-bg); color: var(--hue-green-fg); }
.m-mtile--off { background: var(--neutral-soft); color: var(--text-dim); }

/* ============================================================
 * HOME
 * ============================================================ */
.m-home { position: relative; }
/* The wallpaper bleeds off the right edge of the screen but never widens
   the page: the clip box spans exactly the 16px gutters. */
.m-home__wallclip {
  position: absolute; top: -70px; left: -16px; right: -16px; height: 380px;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.m-home__wall {
  position: absolute; top: 0; right: -44px; width: 240px; opacity: 0.09;
  transform: rotate(-8deg); pointer-events: none;
}
[data-theme="dark"] .m-home__wall { opacity: 0.12; }
.m-home > :not(.m-home__wallclip) { position: relative; z-index: 1; }
.m-hello { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px; }
.m-hello__text { flex: 1; min-width: 0; }
.m-hello__date { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.m-hello__name { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; margin: 2px 0 0; }
.m-hello__next { margin: 6px 0 0; color: var(--text-dim); font-size: 14.5px; font-weight: 500; }
.m-avatar2 {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #F16B2C, #9A3412);
}
.m-stack2 { display: flex; flex-direction: column; gap: 14px; }

/* Announcement: top of Home while it's new */
.m-ann {
  border: 1.5px solid var(--accent); border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--shadow); padding: 14px 14px 14px 16px;
}
.m-ann--urgent { border-color: var(--alert); background: var(--alert-soft); }
.m-ann__top { display: flex; align-items: center; gap: 8px; }
.m-ann__eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.m-ann--urgent .m-ann__eyebrow, .m-ann--urgent .m-ann__title, .m-ann--urgent .m-ann__body { color: var(--alert); }
.m-ann__x {
  margin-left: auto; width: 44px; height: 44px; margin: -5px -5px -5px auto; border-radius: 50%; border: 0; background: var(--neutral-soft);
  color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.m-ann__title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 8px 0 4px; }
.m-ann__body { font-size: 14px; color: var(--text-dim); margin: 0; line-height: 1.45; white-space: pre-line; }
.m-ann__acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.m-ann__acts .m-btn { min-height: 42px; padding: 0 16px; font-size: 14px; }

/* Urgent banner pinned at the top of every page */
.m-urgent {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 12px 14px;
  border-radius: 16px; background: var(--alert-soft); color: var(--alert); border: 1px solid color-mix(in srgb, var(--alert) 40%, transparent);
}
.m-urgent strong { display: block; font-size: 15px; }
.m-urgent span { font-size: 13px; line-height: 1.4; }

/* The member pass card */
.m-pass {
  position: relative; overflow: hidden; display: block; color: #fff; text-decoration: none;
  border-radius: 24px; padding: 18px 18px 16px;
  background: linear-gradient(120deg, #7C2D12 0%, #C2410C 55%, #F16B2C 100%);
  box-shadow: 0 14px 30px -12px rgba(194, 65, 12, 0.55);
}
.m-pass:hover { text-decoration: none; }
.m-pass__wall { position: absolute; right: -24px; top: -40px; width: 170px; opacity: 0.2; transform: rotate(-8deg); pointer-events: none; }
.m-pass__row { display: flex; align-items: center; gap: 10px; position: relative; }
.m-pass__logo {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}
.m-pass__org { font-size: 14px; font-weight: 600; opacity: 0.92; }
.m-pass__status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
  padding: 5px 10px; border-radius: 999px; background: rgba(60, 15, 0, 0.34);
}
.m-pass__status i { width: 7px; height: 7px; border-radius: 50%; background: #86EFAC; }
.m-pass__status--warn i { background: #FCD34D; }
.m-pass__name { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; margin: 16px 0 2px; position: relative; }
.m-pass__sub { font-size: 14px; opacity: 0.88; position: relative; }
.m-pass__foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; position: relative; flex-wrap: wrap; }
.m-pass__chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); font-size: 12px; font-weight: 700;
}
.m-pass__btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px;
  background: #fff; color: #C2410C; font-size: 14px; font-weight: 800;
}
.m-pass__btn svg { width: 16px; height: 16px; }

/* In the space */
.m-here {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-card);
  background: var(--good-soft); color: var(--good);
}
.m-here__icon {
  width: 44px; height: 44px; border-radius: 14px; background: var(--surface); display: inline-flex;
  align-items: center; justify-content: center; flex: none;
}
.m-here__text { flex: 1; min-width: 0; }
.m-here__text strong { display: block; font-size: 16px; }
.m-here__text span { font-size: 13px; opacity: 0.9; }
.m-here form { margin: 0; }
.m-here .m-btn { min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--surface); color: var(--good); border: 0; font-size: 14px; }

/* Up next */
.m-next { padding: 4px 16px; }
.m-next__row {
  display: flex; align-items: center; gap: 14px; padding: 12px 0; color: inherit; text-decoration: none;
}
.m-next__row + .m-next__row { border-top: 1px solid var(--border); }
.m-next__row:hover { text-decoration: none; }
.m-date {
  width: 54px; height: 58px; border-radius: 14px; flex: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: var(--hue-print-bg); color: var(--hue-print-fg);
}
.m-date small { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.m-date b { font-size: 22px; font-weight: 800; line-height: 1; }
.m-next__main { flex: 1; min-width: 0; }
.m-next__main strong { display: block; font-size: 16px; }
.m-next__main span { font-size: 13px; color: var(--text-dim); }
.m-next__main .m-chip2 { margin-top: 5px; }
.m-chev { color: var(--text-dim); flex: none; }

/* Quick actions */
.m-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.m-action {
  display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--text); text-decoration: none;
  font-size: 12px; font-weight: 700; text-align: center; -webkit-tap-highlight-color: transparent;
}
.m-action:hover { text-decoration: none; }
.m-action span:first-child {
  width: 64px; height: 64px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 120ms var(--ease);
}
.m-action:active span:first-child { transform: scale(0.92); }
.m-action svg { width: 26px; height: 26px; }
@media (max-width: 360px) { .m-action span:first-child { width: 56px; height: 56px; } }

/* This month */
.m-month__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 12px; }
.m-num b { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; }
.m-num i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--text-dim); margin-left: 2px; }
.m-num span { display: block; font-size: 12px; color: var(--text-dim); font-weight: 500; }
.m-bar { display: flex; gap: 3px; height: 10px; }
.m-bar i { display: block; height: 100%; border-radius: 5px; min-width: 6px; }
.m-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.m-legend span { display: inline-flex; align-items: center; gap: 6px; }
.m-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Horizontal scrollers bleed to the screen edge */
.m-scroller {
  display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 16px;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.m-scroller::-webkit-scrollbar { display: none; }
.m-scroller > * { scroll-snap-align: start; flex: none; }
.m-nowcard {
  width: 156px; padding: 14px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none;
}
[data-theme="dark"] .m-nowcard { border: 1px solid var(--border); }
.m-nowcard:hover { text-decoration: none; }
.m-nowcard strong { font-size: 15px; line-height: 1.2; }
.m-makecard { width: 200px; color: inherit; text-decoration: none; }
.m-makecard:hover { text-decoration: none; }
.m-makecard img, .m-makecard .m-makecard__ph {
  width: 200px; height: 150px; object-fit: cover; border-radius: 18px; display: block; background: var(--neutral-soft);
}
.m-makecard strong { display: block; font-size: 14px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-makecard span { font-size: 12px; color: var(--text-dim); }

/* Events on Home and the events page */
.m-event {
  display: flex; gap: 14px; align-items: center; padding: 12px 16px; color: inherit; text-decoration: none;
}
.m-event + .m-event { border-top: 1px solid var(--border); }
.m-event:hover { text-decoration: none; }
.m-event .m-date { background: var(--hue-fiber-bg); color: var(--hue-fiber-fg); }
.m-event--repair_cafe .m-date { background: var(--hue-wood-bg); color: var(--hue-wood-fg); }
.m-event--training .m-date { background: var(--hue-cnc-bg); color: var(--hue-cnc-fg); }
.m-event--open_night .m-date { background: var(--hue-green-bg); color: var(--hue-green-fg); }
.m-event__main { flex: 1; min-width: 0; }
.m-event__main strong { display: block; font-size: 16px; }
.m-event__main span { font-size: 13px; color: var(--text-dim); }

/* ============================================================
 * ME: profile header, stats, medals
 * ============================================================ */
.m-profile { display: flex; align-items: center; gap: 16px; margin: 4px 0 16px; }
.m-profile .m-avatar2 { width: 72px; height: 72px; font-size: 25px; }
.m-profile__name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.m-profile__mail { font-size: 13px; color: var(--text-dim); word-break: break-all; }
.m-profile__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.m-stats3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 14px 8px; }
.m-stats3 b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.m-stats3 span { font-size: 12px; color: var(--text-dim); }

.m-medal { display: block; width: 100%; height: 100%; overflow: visible; }
.m-medal__face { fill: var(--surface); fill-opacity: 0.55; }
.m-medal__locked-face { fill: var(--neutral-soft); }
.m-medal__locked-ring { stroke: var(--border); }
.m-medal__progress { stroke: var(--accent); }
.m-medal__locked-glyph { stroke: var(--text-dim); stroke-opacity: 0.75; }
.m-medal__lock-bg { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.m-medal__dot { stroke: var(--surface); stroke-width: 1.8; }

.m-spot {
  position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; padding: 16px;
  border-radius: 24px; color: #1B1F24; box-shadow: var(--shadow); text-align: left; width: 100%;
  background: linear-gradient(120deg, #FFF3E6, #E8F6EA); border: 1.5px solid rgba(91, 185, 71, 0.35); cursor: pointer;
  font: inherit;
}
[data-theme="dark"] .m-spot { background: linear-gradient(120deg, #2A1C12, #12261A); color: #F3F4F6; }
.m-spot .m-spot__medal { width: 84px; height: 84px; flex: none; }
.m-spot__wall { position: absolute; right: -30px; top: -26px; width: 150px; opacity: 0.1; transform: rotate(-8deg); pointer-events: none; }
.m-spot__main { flex: 1; min-width: 0; position: relative; }
.m-spot__new { display: inline-block; background: #15803D; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; border-radius: 999px; padding: 2px 8px; }
.m-spot__title { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin: 4px 0 2px; }
.m-spot__line { display: block; font-size: 13px; opacity: 0.8; line-height: 1.35; }
.m-prog { margin-top: 8px; }
.m-prog__lab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; }
.m-prog__lab span:last-child { font-weight: 600; opacity: 0.75; }
.m-prog__bar { height: 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.75); overflow: hidden; margin-top: 5px; }
[data-theme="dark"] .m-prog__bar { background: rgba(255, 255, 255, 0.14); }
.m-prog__bar i { display: block; height: 100%; border-radius: 5px; background: #15803D; }

.m-shelf { padding: 16px 8px 12px; }
.m-shelf__group { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 6px 8px 8px; }
.m-shelf__group:not(:first-child) { margin-top: 18px; }
.m-shelf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); row-gap: 14px; }
.m-medalcell {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none;
  font: inherit; color: var(--text); border-radius: 14px; cursor: pointer; min-height: 44px; -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease);
}
.m-medalcell:active { transform: scale(0.93); }
.m-medalcell .m-medal { width: 60px; height: 60px; }
.m-medalcell b { font-size: 11.5px; line-height: 1.2; text-align: center; font-weight: 700; }
.m-medalcell.is-locked b { color: var(--text-dim); font-weight: 600; }
.m-medalcell small { font-size: 10px; color: var(--accent); font-weight: 800; margin-top: -3px; }
.m-medalcell.is-unseen .m-medal { animation: m2-land 700ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes m2-land { 0% { transform: scale(.55); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }

.m-rows { padding: 4px 16px; }
.m-rowlink {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; color: inherit; text-decoration: none; width: 100%;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer; min-height: 52px;
}
.m-rowlink + .m-rowlink, .m-rows form + .m-rowlink, .m-rowlink + form { border-top: 1px solid var(--border); }
.m-rowlink:hover { text-decoration: none; }
.m-rowlink__icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--neutral-soft); display: inline-flex; align-items: center;
  justify-content: center; flex: none; color: var(--text);
}
.m-rowlink__icon svg { width: 18px; height: 18px; }
.m-rowlink__main { flex: 1; min-width: 0; }
.m-rowlink__main strong { display: block; font-size: 15px; font-weight: 700; }
.m-rowlink__main span { display: block; font-size: 12.5px; color: var(--text-dim); }
.m-rowlink__val { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.m-rowlink--danger strong { color: var(--alert); }
.m-rowlink--danger .m-rowlink__icon { background: var(--alert-soft); color: var(--alert); }
.m-grouplabel { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 20px 4px 8px; }

/* ============================================================
 * MEDAL CELEBRATION (ui/static/js/m-medals.js)
 * Float and tilt live on separate layers: an animation on the tilt
 * element would override the drag (the prototype bug).
 * ============================================================ */
.mm-ovl {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
.mm-scrim { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mm-ovl canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.mm-dot { position: absolute; border-radius: 50%; z-index: 2; will-change: transform, opacity; }
.mm-stage {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px; width: 100%; max-width: 420px;
}
.mm-count {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.16);
  color: #fff; border-radius: 999px; font-size: 12px; font-weight: 800; padding: 4px 10px;
}
.mm-wrap { position: relative; width: 176px; height: 176px; margin: 24px 0 62px; }
.mm-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 120, .55), rgba(255, 160, 80, 0)); opacity: 0; pointer-events: none; }
.mm-rare .mm-glow { background: radial-gradient(closest-side, rgba(248, 194, 23, .6), rgba(248, 194, 23, 0)); }
.mm-float { position: relative; width: 100%; height: 100%; }
.mm-floating .mm-float { animation: mm-bob 3.4s ease-in-out infinite; }
.mm-shadow { position: absolute; left: 20%; right: 20%; bottom: -22px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); opacity: 0; pointer-events: none; }
.mm-floating .mm-shadow { opacity: .5; animation: mm-shadow 3.4s ease-in-out infinite; }
@keyframes mm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mm-shadow { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(.78); opacity: .28; } }
.mm-tilt { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.mm-tilt.is-idle { animation: mm-wobble 5.2s ease-in-out infinite; }
.mm-tilt.is-dragging { cursor: grabbing; }
@keyframes mm-wobble {
  0%, 100% { transform: perspective(700px) rotateY(0) rotateX(0); }
  25% { transform: perspective(700px) rotateY(11deg) rotateX(-4deg); }
  75% { transform: perspective(700px) rotateY(-11deg) rotateX(4deg); }
}
.mm-tilt .m-medal { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .35)); pointer-events: none; }
.mm-shine { position: absolute; inset: 6%; border-radius: 50%; overflow: hidden; pointer-events: none; }
.mm-shine i { position: absolute; top: -20%; left: -70%; width: 45%; height: 140%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); transform: rotate(22deg); }
.mm-gloss { position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at var(--lx, 35%) var(--ly, 28%), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 46%); mix-blend-mode: soft-light; }
.mm-hint {
  position: absolute; left: 50%; bottom: -54px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center;
  font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .14); padding: 6px 12px; border-radius: 999px;
  opacity: 0; transition: opacity .45s; white-space: nowrap; pointer-events: none;
}
.mm-hint svg { width: 15px; height: 15px; }
.mm-hint.is-shown { opacity: 1; }
.mm-copy { color: #fff; }
.mm-ey { font-size: 12.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #FDBA74; }
.mm-rare .mm-ey { color: #F8C217; }
.mm-copy h2 { color: #fff; font-size: 34px; letter-spacing: -.02em; line-height: 1.05; margin: 8px 0; font-weight: 800; }
.mm-copy p { margin: 0 auto; font-size: 15.5px; opacity: .88; max-width: 32ch; }
.mm-rule { font-size: 12.5px !important; opacity: .7 !important; margin-top: 6px !important; }
.mm-meta { margin: 16px auto 0; width: min(280px, 100%); font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.mm-meta .m-prog__lab { color: #fff; }
.mm-meta .m-prog__bar { background: rgba(255, 255, 255, .2); }
.mm-meta .m-prog__bar i { background: #86EFAC; }
.mm-acts { display: flex; flex-direction: column; gap: 8px; width: min(320px, 100%); margin-top: 26px; }
.mm-btn { height: 54px; border-radius: 16px; border: 0; background: #C2410C; color: #fff; font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(194, 65, 12, .7); }
.mm-btn:active { transform: scale(.97); }
.mm-btn--ghost { background: transparent; box-shadow: none; font-weight: 700; font-size: 15px; height: 46px; }
.mm-skip { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .55); font-size: 12px; z-index: 2; font-weight: 700; }

.mm-toast {
  position: fixed; left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 390;
  display: flex; gap: 12px; align-items: center; max-width: 460px; margin: 0 auto; padding: 10px 14px 10px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg);
  color: var(--text); text-decoration: none; transform: translateY(-160%);
}
.mm-toast .m-medal { width: 48px; height: 48px; flex: none; }
.mm-toast b { display: block; font-size: 15px; }
.mm-toast span { font-size: 12.5px; color: var(--text-dim); }
.mm-toast em { font-style: normal; margin-left: auto; font-size: 11px; font-weight: 800; color: var(--good); background: var(--good-soft); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }

.mm-sheetbg { position: fixed; inset: 0; background: var(--scrim); z-index: 380; opacity: 0; transition: opacity .25s; }
.mm-sheetbg.is-open { opacity: 1; }
.mm-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 381; max-width: 560px; margin: 0 auto; background: var(--surface);
  border-radius: 28px 28px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)); text-align: center;
  transform: translateY(105%); transition: transform .42s cubic-bezier(.2, 1.1, .3, 1); box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
  max-height: 92vh; overflow-y: auto;
}
.mm-sheet.is-open { transform: none; }
.mm-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--border); margin: 0 auto 14px; }
.mm-sheet .mm-wrap { width: 132px; height: 132px; margin: 6px auto 52px; }
.mm-sheet .mm-hint { color: var(--text-dim); background: var(--surface-2); bottom: -40px; }
.mm-sheet h3 { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.mm-sheet p { margin: 0 auto; color: var(--text-dim); max-width: 34ch; font-size: 14.5px; }
.mm-facts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
.mm-fact { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; }
.mm-sheet .m-prog { max-width: 300px; margin: 0 auto 16px; text-align: left; }
.mm-sheet .m-prog__bar { background: var(--neutral-soft); }
.mm-sheet .m-prog__bar i { background: var(--accent); }
.mm-sheet .mm-btn { width: 100%; }
.mm-sheet .mm-btn--sec { background: var(--surface-2); color: var(--text); box-shadow: none; border: 1px solid var(--border); margin-top: 8px; height: 50px; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .mm-floating .mm-float, .mm-floating .mm-shadow, .mm-tilt.is-idle, .m-medalcell.is-unseen .m-medal { animation: none; }
  .mm-sheet, .mm-sheetbg { transition: none; }
}

/* ============================================================
 * MEMBER PASS PAGE (/pass)
 * ============================================================ */
body.m-passpage { background: linear-gradient(160deg, #7C2D12 0%, #C2410C 60%, #F16B2C 100%); }
.m-passpage .m-header { background: transparent; border-color: transparent !important; color: #fff; }
.m-passpage .m-header__title, .m-passpage .m-back { color: #fff; }
.m-passpage .m-bell { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.m-passfull { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 8px; }
.m-passfull__wall { position: fixed; right: -80px; bottom: 60px; width: 420px; opacity: .12; transform: rotate(-8deg); pointer-events: none; }
.m-passfull__card {
  position: relative; width: 100%; max-width: 360px; background: #fff; color: #1B1F24; border-radius: 28px; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 20px 40px -10px rgba(76, 20, 0, .45);
}
.m-passfull__card .m-avatar2 { width: 64px; height: 64px; font-size: 22px; background: #C2410C; }
.m-passfull__name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; text-align: center; }
.m-passfull__sub { font-size: 14px; color: #6B6560; margin-top: -8px; text-align: center; }
.m-passfull__qr { width: 220px; max-width: 70vw; aspect-ratio: 1; }
.m-passfull__qr svg { width: 100%; height: 100%; display: block; }
.m-passfull__facts { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; border-top: 1px solid #ECE6DF; padding-top: 12px; }
.m-passfull__facts span { font-size: 12px; color: #6B6560; font-weight: 700; }
.m-passfull__facts b { display: block; font-size: 15px; }
.m-passfull__note { color: #fff; text-align: center; max-width: 36ch; font-size: 14px; margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(60, 15, 0, .34); }
.m-passfull form { margin: 0; }
.m-passfull__new { background: rgba(60, 15, 0, .38); color: #fff; border: 0; border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; min-height: 44px; }

/* ============================================================
 * LOG A PRINT: grams quick-add
 * ============================================================ */
.m-log { display: flex; flex-direction: column; gap: 16px; }
.m-log__label { font-size: 13px; font-weight: 800; color: var(--text-dim); margin-bottom: 8px; display: block; }
.m-matchips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-matchips label { position: relative; }
.m-matchips input { position: absolute; opacity: 0; pointer-events: none; }
.m-matchips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s, color .15s;
}
.m-matchips input:checked + span { background: var(--text); color: var(--surface); border-color: var(--text); }
.m-matchips input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.m-grams {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border);
}
.m-grams__step {
  width: 52px; height: 52px; flex: none; border-radius: 14px; border: 0; background: var(--surface); box-shadow: var(--shadow);
  font-size: 26px; font-weight: 600; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.m-grams__step:active { transform: scale(.94); }
.m-grams__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.m-grams__row { display: flex; align-items: baseline; justify-content: center; gap: 4px; width: 100%; }
.m-grams__input {
  width: 100%; max-width: 170px; border: 0; background: transparent; text-align: center; font: inherit; font-size: 42px;
  font-weight: 800; letter-spacing: -.03em; color: var(--text); padding: 0; -moz-appearance: textfield; appearance: textfield;
}
.m-grams__input::-webkit-outer-spin-button, .m-grams__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m-grams__input:focus { outline: none; }
.m-grams__unit { font-size: 18px; font-weight: 800; color: var(--text-dim); }
.m-grams__hint { font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.m-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.m-quick button {
  min-height: 46px; border-radius: 14px; border: 0; background: var(--accent-soft); color: var(--accent-ink); font: inherit; font-weight: 800;
  font-size: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.m-quick button:active { transform: scale(.94); }
.m-recent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-recent button {
  min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.m-recent .m-clear {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--neutral-soft); border-color: transparent; color: var(--text-dim);
}
.m-costbox { border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); padding: 12px 14px; font-size: 14px; font-weight: 600; }
.m-costbox strong { font-size: 16px; }

/* ============================================================
 * INSTALL GUIDE (/install)
 * ============================================================ */
.m-install { display: flex; flex-direction: column; gap: 14px; }
.m-install__icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--shadow); }
.m-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--border); }
.m-seg button {
  flex: 1; min-height: 44px; border: 0; border-radius: 11px; background: transparent; font: inherit; font-weight: 700; color: var(--text-dim); cursor: pointer;
}
.m-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.m-step { background: var(--surface); border-radius: 22px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.m-step__head { display: flex; gap: 12px; align-items: flex-start; }
.m-step__num { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.m-step__head h2 { margin: 3px 0 2px; font-size: 18px; }
.m-step__head p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.4; }
.m-stage { background: var(--surface-2); border: 1px solid var(--border); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.m-mock { width: 100%; background: #fff; color: #1C1C1E; border-radius: 14px; box-shadow: var(--shadow); font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; }
.m-mock--bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }
.m-mock--bar .m-mock__b { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #8E8E93; }
.m-mock__b svg { width: 22px; height: 22px; }
.m-mock__hot { color: #007AFF !important; box-shadow: 0 0 0 3px #C2410C, 0 0 0 9px rgba(194, 65, 12, .25); background: #fff; }
.m-mock__url { flex: 1; margin: 0 6px; height: 36px; border-radius: 999px; background: #F2F2F7; display: flex; align-items: center; justify-content: center; font-size: 12.5px; gap: 6px; overflow: hidden; white-space: nowrap; }
.m-mock__list > div { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #E5E5EA; font-size: 15px; }
.m-mock__list > div:last-child { border-bottom: 0; }
.m-mock__list svg { width: 20px; height: 20px; }
.m-mock__list .m-mock__pick { background: #FEF1E9; font-weight: 700; border-radius: 10px; box-shadow: 0 0 0 3px #C2410C; border-bottom-color: transparent; }
.m-taphere { background: #C2410C; color: #fff; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; }
.m-or { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 12px; color: var(--text-dim); font-weight: 700; }
.m-or::before, .m-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.m-homegrid { display: grid; grid-template-columns: repeat(4, 56px); gap: 14px 18px; justify-content: center; padding: 6px 0; }
.m-homegrid span { width: 56px; height: 56px; border-radius: 14px; background: rgba(255, 255, 255, .6); display: block; }
.m-homegrid .m-homegrid__g3 { background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #1C1C1E; height: auto; }
.m-homegrid__g3 img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 3px #C2410C, 0 0 0 9px rgba(194, 65, 12, .25); }
.m-stage--home { background: linear-gradient(135deg, #FDE7D6, #CFE8F5); }
.m-install__copy { display: flex; gap: 8px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 4px 4px 4px 14px; }
.m-install__copy button { min-height: 44px; }
.m-install__copy code { flex: 1; font: inherit; font-weight: 700; font-size: 14px; word-break: break-all; }
.m-install__done { display: flex; gap: 12px; align-items: center; background: var(--good-soft); color: var(--good); border-radius: 20px; padding: 16px; }

/* ============================================================
 * BOOK: live status + waitlist
 * ============================================================ */
.m-book__machine { align-items: center; gap: 12px; }
.m-book__now { margin-top: 5px; }
.m-wait {
  display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border);
}
.m-wait__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--hue-fiber-bg); color: var(--hue-fiber-fg); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.m-wait__icon svg { width: 18px; height: 18px; }
.m-wait__main { flex: 1; min-width: 0; }
.m-wait__main strong { display: block; font-size: 14.5px; }
.m-wait__main span { font-size: 13px; color: var(--text-dim); }
.m-wait form { margin: 0; }
.m-wait .m-btn { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 999px; }

/* ============================================================
 * SIGN IN
 * ============================================================ */
body.m-shell--bare { background: var(--bg); }
.m-signin__wall { position: fixed; right: -70px; bottom: 40px; width: 300px; opacity: .08; transform: rotate(-8deg); pointer-events: none; z-index: 0; }
.m-signin__logo { width: 88px; height: 88px; border-radius: 22px; box-shadow: var(--shadow); }

/* Wide phones (Z Fold 8 cover ≈ 420–480px): keep it a phone layout,
   just let rows breathe instead of stretching things. */
@media (min-width: 420px) and (max-width: 767px) {
  .m-content { padding-left: 20px; padding-right: 20px; }
  .m-scroller { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .m-actions { gap: 12px; }
}