/*
 * /member — the member page's own styles ("m-" classes): member.php's static
 * sections and what js/member-page.js renders. Loaded by member.php only, so
 * nothing here waits on a Tailwind rebuild of css/output.*.
 * Colours are the site's (css/input.css @theme): red #FF0000, yellow #FFCB00,
 * cream #FFFCEB, on black. Each tier wears its own: White pearl, Red red,
 * Black black and gold — a champagne gold (--g-*), never the brand yellow.
 * A Black member's whole page wears it too (.m-theme-black, at the end).
 */
:root {
    --m-red: #ff0000;
    --m-red-deep: #b40000;
    --m-yellow: #ffcb00;
    --m-cream: #fffceb;
    --m-line: #06c755;
    --m-panel: rgba(24, 24, 27, 0.82);
    --m-border: rgba(255, 255, 255, 0.09);
    --m-muted: #a1a1aa;
    --m-dim: #71717a;
    /* Latin wordmarks only (MEMBERS, tier names); Thai falls to Kanit. */
    --m-display: "Archivo Black", "Kanit", sans-serif;
    /* Black's gold: light, mid, deep; the ink set on it; the metal as a fill. */
    --g-light: #f6e3ab;
    --g-mid: #d6b26a;
    --g-deep: #9c7436;
    --g-ink: #1b1407;
    --g-metal: linear-gradient(135deg, #f8e8b8 0%, #d9b46c 45%, #b8893f 70%, #f1d896 100%);
}

[hidden] { display: none !important; }

/* The site's face for Thai headings is Kanit, as on every other page, at 700
   rather than the global heading rule's 900 (css/input.css). */
.m-wrap h1, .m-wrap h2, .m-wrap h3 {
    font-family: "Kanit", "Noto Sans JP", sans-serif !important;
    font-weight: 700 !important;
}
.m-wrap h1.m-hero-title { font-family: var(--m-display) !important; font-weight: 400 !important; }

.m-main { flex-grow: 1; padding: 84px 16px 40px; }
.m-wrap { width: 100%; max-width: 30rem; margin: 0 auto; }

/* --- Hero + lookup; folded into the bar once a member is found ---------- */
.m-hero { text-align: center; padding: 18px 0 16px; }
.m-hero-kicker { display: block; font-size: 12px; letter-spacing: 0.32em; color: var(--m-red); font-weight: 700; }
.m-hero-title { font-family: var(--m-display); font-size: 44px; line-height: 1; color: #fff; letter-spacing: 0.02em; margin: 6px 0 8px; }
.m-hero p { color: var(--m-muted); font-size: 14px; margin: 0; }

.m-found-bar { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 12px; }
.m-found-brand { font-family: var(--m-display); font-size: 14px; letter-spacing: 0.16em; color: var(--m-red); }
.m-found-brand b { color: #fff; font-weight: 400; }
.m-link-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #3f3f46; color: #d4d4d8; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-family: inherit; cursor: pointer; }
.m-link-btn:hover { border-color: var(--m-yellow); color: #fff; }
.m-link-btn[aria-expanded="true"] { border-color: var(--m-yellow); color: #fff; background: rgba(255, 203, 0, 0.1); }
.m-wrap.is-found .m-hero { display: none; }
.m-wrap.is-found .m-found-bar { display: flex; }
.m-wrap.is-found:not(.is-changing) .m-lookup { display: none; }
.m-wrap.is-changing .m-lookup { margin-bottom: 14px; }

.m-lookup { background: var(--m-panel); border: 1px solid var(--m-border); border-radius: 18px; padding: 14px; }
.m-lookup label { display: block; font-size: 12px; color: var(--m-muted); margin: 0 0 8px 4px; }
.m-lookup-row { display: flex; gap: 8px; }
.m-lookup input {
    flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.55); border: 1px solid #3f3f46; border-radius: 12px;
    color: #fff; font-size: 20px; letter-spacing: 0.12em; text-align: center; padding: 12px 10px; font-family: inherit;
}
.m-lookup input::placeholder { color: #52525b; }
.m-lookup input:focus { outline: none; border-color: var(--m-yellow); box-shadow: 0 0 0 1px var(--m-yellow); }

/* --- Buttons ------------------------------------------------------------ */
.m-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px;
    padding: 12px 16px; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.m-btn:disabled { opacity: 0.6; cursor: wait; }
.m-btn-primary { background: var(--m-yellow); color: #000; white-space: nowrap; }
.m-btn-primary:hover { background: #fff; }
.m-btn-line { background: var(--m-line); color: #fff; width: 100%; }
.m-btn-line:hover { background: #05b34c; }
.m-btn-red { background: var(--m-red); color: #fff; padding: 9px 12px; font-size: 13px; }
.m-btn-red:hover { background: var(--m-red-deep); }

/* --- Alerts, notes, hints ----------------------------------------------- */
.m-alert { margin-top: 14px; display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 0, 0, 0.08); border: 1px solid rgba(255, 0, 0, 0.25); border-radius: 14px; padding: 14px; }
.m-alert i { font-size: 26px; color: #f87171; flex-shrink: 0; }
.m-alert b { color: #fff; }
.m-alert p { margin: 2px 0 0; font-size: 13px; color: var(--m-muted); }
.m-hint { font-size: 12px; color: var(--m-dim); margin: 8px 0 0; line-height: 1.5; }
/* "ผูก LINE สาขา … ด้วย" / "ใช้ LINE ของสาขา … แทน": reopen /member for another branch */
.m-more { margin-top: 8px; display: grid; gap: 2px; justify-items: start; }
.m-linkbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 0; color: var(--m-line); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.m-linkbtn:hover { color: #05b34c; }
.m-linkbtn i { font-size: 15px; flex-shrink: 0; }

/* --- Sections ----------------------------------------------------------- */
.m-result { margin-top: 4px; }
.m-section { margin-top: 22px; }
.m-h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; color: #fff; margin: 0 0 10px; }
.m-h2 i { color: var(--m-yellow); font-size: 20px; }
.m-count:not(:empty) { background: var(--m-red); color: #fff; font-size: 12px; border-radius: 999px; padding: 1px 8px; margin-left: 2px; }
.m-panel { background: var(--m-panel); border: 1px solid var(--m-border); border-radius: 16px; padding: 14px; }
.m-lead { font-size: 13px; color: var(--m-muted); line-height: 1.6; margin: -2px 0 12px; }

/* --- The member card ---------------------------------------------------- */
/* Each skin sets the card's inks; the rules below only read them.
   The default (dark, neutral) is the card before LINE says which tier. */
.m-card {
    --c-ink: var(--m-cream);            /* body text */
    --c-strong: #fff;                   /* name, figures, bold runs */
    --c-line: rgba(255, 255, 255, 0.14);  /* dividers */
    --c-wash: rgba(255, 255, 255, 0.12);  /* buttons, pills */
    --c-wash-line: rgba(255, 255, 255, 0.24);
    --c-points: var(--m-yellow);
    --c-chip-bg: rgba(255, 255, 255, 0.16);
    --c-chip-ink: var(--m-cream);
    --c-chip-line: rgba(255, 255, 255, 0.28);
    --c-track: rgba(255, 255, 255, 0.16);
    --c-fill: linear-gradient(90deg, #f59e0b, var(--m-yellow));
    --c-sheen: rgba(255, 255, 255, 0.10);
    --c-base: #1c1c1f;                  /* the card's own colour, solid: tiers ahead, text on --c-strong */
    position: relative; overflow: hidden; border-radius: 20px; padding: 18px 18px 12px; color: var(--c-ink);
    background: linear-gradient(140deg, #34343a 0%, #18181b 60%, #0c0c0e 100%);
    border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* White — the base tier: pearl white, ink-black type. */
.m-card-white {
    --c-ink: #3f3f46; --c-strong: #09090b; --c-line: rgba(0, 0, 0, 0.1);
    --c-wash: rgba(0, 0, 0, 0.05); --c-wash-line: rgba(0, 0, 0, 0.16);
    --c-points: #09090b; --c-chip-bg: #fff; --c-chip-ink: #09090b; --c-chip-line: #09090b;
    --c-track: rgba(0, 0, 0, 0.1); --c-fill: linear-gradient(90deg, #a1a1aa, #18181b);
    --c-sheen: rgba(255, 255, 255, 0.9); --c-base: #f4f4f5;
    background: linear-gradient(140deg, #ffffff 0%, #f4f4f5 55%, #e4e4e7 100%);
    border-color: rgba(255, 255, 255, 0.6);
}
.m-card-red {
    --c-points: #fff; --c-chip-bg: #fff; --c-chip-ink: #c80000; --c-chip-line: #fff;
    --c-fill: linear-gradient(90deg, rgba(255, 255, 255, 0.55), #fff); --c-base: #a30000;
    background: linear-gradient(140deg, #ff2a2a 0%, #c80000 45%, #6e0000 100%); border-color: rgba(255, 255, 255, 0.22);
}
/* Black — black lacquer, a gold edge and gold type. */
.m-card-black {
    --c-ink: #e8dcc0; --c-strong: var(--g-light); --c-line: rgba(214, 178, 106, 0.28);
    --c-wash: rgba(214, 178, 106, 0.10); --c-wash-line: rgba(214, 178, 106, 0.42);
    --c-points: var(--g-light); --c-chip-bg: var(--g-metal); --c-chip-ink: var(--g-ink); --c-chip-line: transparent;
    --c-track: rgba(214, 178, 106, 0.18); --c-fill: linear-gradient(90deg, var(--g-deep), var(--g-light)); --c-base: #0e0c09;
    --c-sheen: rgba(246, 227, 171, 0.16);
    border-color: transparent;
    background:
        linear-gradient(150deg, #211d15 0%, #0e0c09 50%, #000 100%) padding-box,
        linear-gradient(135deg, var(--g-light), rgba(156, 116, 54, 0.5) 35%, rgba(156, 116, 54, 0.15) 60%, var(--g-mid)) border-box;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 32px rgba(214, 178, 106, 0.12);
}
/* Fine foil lines across the lacquer, under the type. */
.m-card-black::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(115deg, rgba(214, 178, 106, 0.045) 0 1px, transparent 1px 8px);
}
.m-card-black .m-card-points-num {
    background: linear-gradient(180deg, #fbefc8 0%, var(--g-mid) 60%, var(--g-deep) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.m-card-black .m-card-tier { font-weight: 400; box-shadow: 0 2px 10px rgba(214, 178, 106, 0.25); }
.m-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 100% 0%, var(--c-sheen), transparent 55%); }
.m-card > * { position: relative; z-index: 1; }
.m-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.m-card-brand { font-family: var(--m-display); font-size: 13px; letter-spacing: 0.18em; color: var(--c-strong); opacity: 0.9; }
.m-card-tier { font-family: var(--m-display); font-size: 12px; letter-spacing: 0.14em; background: var(--c-chip-bg); color: var(--c-chip-ink); border: 1px solid var(--c-chip-line); border-radius: 999px; padding: 4px 12px; }
.m-card-name { font-size: 22px; font-weight: 800; color: var(--c-strong); margin-top: 16px; line-height: 1.2; word-break: break-word; }
.m-card-phone { font-size: 13px; letter-spacing: 0.08em; opacity: 0.75; margin-top: 2px; }
.m-card-points { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 14px; }
.m-card-points-num { font-size: 40px; font-weight: 900; line-height: 1; color: var(--c-points); }
.m-card-points-unit { font-size: 15px; font-weight: 600; color: var(--c-strong); }
.m-card-points-worth { font-size: 13px; text-align: right; line-height: 1.4; color: var(--c-strong); }
.m-card-points-worth small { display: block; font-size: 11px; color: var(--c-ink); opacity: 0.75; }
.m-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: 11px; }
.m-card-terms { display: inline-flex; align-items: center; gap: 4px; color: var(--c-strong); text-decoration: none; font-size: 12px; font-weight: 600; background: var(--c-wash); border: 1px solid var(--c-wash-line); border-radius: 999px; padding: 4px 10px; }
.m-card-terms:hover { border-color: var(--c-strong); }
.m-card-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--c-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.m-card-verified i { color: #22c55e; font-size: 14px; }

/* Under the card: "จองโต๊ะ" and "ดูเมนู" side by side; the menu's branch sheet */
.m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.m-actions .m-btn { padding: 13px 10px; white-space: nowrap; }
.m-btn-outline { background: var(--m-panel); color: var(--m-cream); border: 1px solid rgba(255, 255, 255, 0.22); }
.m-btn-outline:hover { border-color: var(--m-yellow); color: #fff; }
.m-menu-branches { display: grid; gap: 10px; margin-top: 14px; }
.m-menu-branch { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 14px; font-size: 16px; font-weight: 800; text-decoration: none; }
.m-menu-branch span { flex: 1; min-width: 0; }
.m-menu-branch > i:first-child { font-size: 20px; }
.m-menu-branch-main { background: #ff0000; color: #fff; }
.m-menu-branch-ratchayothin { background: #ffcb00; color: #111; }
.m-menu-branch:hover { filter: brightness(1.08); }

/* LINE + profile, one row under the card */
.m-account { margin-top: 10px; padding: 12px 14px; }
.m-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: #d4d4d8; cursor: pointer; }
.m-switch-row i { color: var(--m-line); margin-right: 4px; }
.m-switch { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 22px; background: #3f3f46; position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.25s; margin: 0; }
.m-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.25s; }
.m-switch:checked { background: var(--m-line); }
.m-switch:checked::after { left: 21px; }
.m-switch:focus-visible { outline: 2px solid var(--m-yellow); outline-offset: 2px; }

/* --- The tier, inside the card (LINE-verified owner) --------------------- */
.m-card-tierinfo { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: 13px; }
.m-ct-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.m-ct-row small { font-size: 11px; opacity: 0.75; }
.m-ct-row > b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.m-ct-row b, .m-ct-sub b { color: var(--c-strong); }
.m-ct-bar { height: 6px; border-radius: 6px; background: var(--c-track); overflow: hidden; margin: 6px 0 4px; }
.m-ct-bar i { display: block; height: 100%; border-radius: 6px; background: var(--c-fill); }
.m-ct-sub { margin: 2px 0 0; font-size: 12px; line-height: 1.5; }
.m-ct-hold { margin-top: 10px; align-items: center; }
.m-ct-pill { font-style: normal; font-size: 11px; font-weight: 700; white-space: nowrap; border-radius: 999px; padding: 2px 9px; background: var(--c-wash); border: 1px solid var(--c-wash-line); color: var(--c-strong); }
.m-ct-pill.is-soon { background: rgba(255, 0, 0, 0.85); border-color: transparent; color: #fff; }
.m-ct-benefits { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
.m-ct-benefits span { font-weight: 700; color: var(--c-strong); margin-right: 2px; }
.m-ct-asof { margin: 6px 0 0; font-size: 10px; opacity: 0.65; }
.m-ct-note { margin: 0; font-size: 12px; }
.m-ct-note a { color: var(--c-strong); }
.m-ct-login { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; padding: 9px 12px; background: var(--m-line); color: #fff; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; }
.m-ct-login:hover { background: #05b34c; }

/* The steps White → Red → Black (js/member-page.js ladderHtml): a node per tier
   at its threshold, filled to the member's spend, "คุณ" above it, the names
   under it. The track's 7px side margin keeps the end nodes inside the card;
   the bubble and the names share it so they line up with the nodes. */
.m-steps { display: block; position: relative; margin: 4px 0 2px; }
.m-steps-marks { display: block; position: relative; height: 26px; margin: 0 7px; }
.m-steps-bubble {
    position: absolute; bottom: 8px; left: clamp(10px, var(--at), calc(100% - 10px)); transform: translateX(-50%);
    background: var(--c-strong); color: var(--c-base); border-radius: 7px; padding: 1px 7px; font-size: 11px; font-weight: 800; line-height: 1.5; white-space: nowrap;
}
.m-steps-track { display: block; position: relative; height: 4px; margin: 0 7px; border-radius: 4px; background: var(--c-track); }
.m-steps-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--c-fill); }
.m-steps-node {
    position: absolute; top: 50%; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--c-base); border: 2px solid var(--c-wash-line);
}
.m-steps-node.is-reached { background: var(--c-strong); border-color: var(--c-strong); }
.m-steps-node.is-mine { width: 14px; height: 14px; box-shadow: 0 0 0 4px var(--c-wash-line); }
.m-steps-knob { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--c-strong); box-shadow: 0 0 0 3px var(--c-wash-line); }
.m-steps-names { display: block; position: relative; height: 16px; margin: 8px 7px 0; }
.m-steps-name { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; line-height: 16px; white-space: nowrap; }
.m-steps-name.is-start { transform: translateX(-7px); }
.m-steps-name.is-end { transform: translateX(calc(-100% + 7px)); }
.m-steps-name.is-mine { color: var(--c-strong); font-weight: 800; }
.m-steps-name.is-ahead { opacity: 0.7; }
.m-steps + .m-ct-sub { margin-top: 8px; }
/* Locked (not linked): no fill, the nodes in the tier colours, a lock above. */
.m-steps.is-locked .m-steps-node { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.35); }
.m-steps-node-white { background: linear-gradient(140deg, #fff, #d4d4d8); }
.m-steps-node-red { background: linear-gradient(140deg, #ff2a2a, #8a0000); }
.m-steps-node-black { background: #000; }
.m-steps.is-locked .m-steps-node-black { border-color: var(--g-mid); }
.m-steps-node-other { background: #3f3f46; }

/* --- Not linked yet: the tier locked in the card, the invitation under it */
.m-ct-teaser { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--c-wash); border: 1px dashed var(--c-wash-line); border-radius: 12px; padding: 10px 12px; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; }
.m-ct-teaser:hover { border-style: solid; }
.m-ct-teaser.has-steps { flex-wrap: wrap; row-gap: 10px; padding-top: 4px; }
.m-ct-teaser.has-steps .m-steps { flex: 1 0 100%; }
.m-ct-teaser-swatches { display: flex; flex-shrink: 0; }
.m-swatch { width: 22px; height: 30px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.m-swatch + .m-swatch { margin-left: -9px; }
.m-swatch-white { background: linear-gradient(140deg, #fff, #d4d4d8); }
.m-swatch-red { background: linear-gradient(140deg, #ff2a2a, #8a0000); }
.m-swatch-black { background: linear-gradient(140deg, #2a251b, #000); border-color: var(--g-mid); }
.m-swatch-other { background: #3f3f46; }
.m-ct-teaser-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-ct-teaser-text b { color: var(--c-strong); font-size: 14px; }
.m-ct-teaser-text small { font-size: 12px; opacity: 0.85; }
.m-blur { filter: blur(4px); user-select: none; font-weight: 700; }
.m-ct-teaser-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; background: var(--m-line); color: #fff; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; }

.m-account.is-invite {
    padding: 16px; border-color: transparent;
    background:
        linear-gradient(160deg, #10241a, #121214 55%) padding-box,
        linear-gradient(135deg, rgba(6, 199, 85, 0.85), rgba(6, 199, 85, 0.12) 45%, rgba(6, 199, 85, 0.4)) border-box;
    box-shadow: 0 12px 32px rgba(6, 199, 85, 0.08);
}
.m-invite-head { display: flex; align-items: center; gap: 12px; }
.m-invite-badge { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--m-line); color: #fff; font-size: 26px; box-shadow: 0 6px 18px rgba(6, 199, 85, 0.35); }
.m-invite-head b { display: block; color: #fff; font-size: 17px; line-height: 1.3; }
.m-invite-head small { display: block; color: var(--m-muted); font-size: 12px; margin-top: 2px; }
.m-invite-perks { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 6px; }
.m-invite-perks li { display: flex; align-items: center; gap: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--m-border); border-radius: 12px; padding: 10px 12px; }
.m-invite-perks li > i:first-child { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(6, 199, 85, 0.14); color: #34d399; font-size: 18px; }
.m-invite-perks span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-invite-perks b { color: #f4f4f5; font-size: 14px; line-height: 1.35; }
.m-invite-perks small { color: var(--m-muted); font-size: 12px; line-height: 1.4; }
.m-invite-lock { color: var(--m-dim); font-size: 15px; flex-shrink: 0; }
/* The ask: a big button with a light that sweeps across it now and then. */
.m-invite-btn { position: relative; overflow: hidden; padding: 14px; font-size: 16px; box-shadow: 0 8px 24px rgba(6, 199, 85, 0.3); }
.m-invite-btn .ph-caret-right { margin-left: auto; }
.m-invite-btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: m-sweep 3.2s ease-in-out infinite;
}
@keyframes m-sweep { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.m-account.is-invite .m-more { margin-top: 10px; justify-items: center; }

/* "มี PIN? ใส่ PIN แทน" under the locked tier */
.m-ct-pinlink { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; background: none; border: 0; padding: 2px 0; color: var(--c-strong); font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* --- The owner's own: the PIN and this remembered device ------------------ */
.m-owner { margin-top: 10px; padding: 4px 14px; }
.m-owner-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.m-owner-row + .m-owner-row { border-top: 1px solid var(--m-border); }
.m-owner-row > i { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); color: var(--m-yellow); font-size: 17px; }
.m-owner-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-owner-row b { color: #f4f4f5; font-size: 14px; }
.m-owner-row small { color: var(--m-muted); font-size: 12px; line-height: 1.4; }
.m-owner-ok { font-style: normal; font-size: 11px; font-weight: 700; color: #4ade80; margin-left: 4px; }
.m-chip-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 7px 12px; border: 1px solid var(--m-yellow); background: transparent; color: var(--m-yellow); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.m-chip-btn:hover { background: rgba(255, 203, 0, 0.1); }
.m-chip-btn.is-quiet { border-color: #3f3f46; color: #d4d4d8; }
.m-chip-btn.is-quiet:hover { border-color: #71717a; background: transparent; }

/* --- Sheets: the PIN, setting it, "ลืม PIN" -------------------------------- */
.m-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@media (min-width: 480px) { .m-sheet { align-items: center; } }
.m-sheet-card { position: relative; width: 100%; max-width: 24rem; background: #18181b; border: 1px solid var(--m-border); border-radius: 20px; padding: 22px 18px 18px; color: var(--m-cream); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.m-sheet-card h3 { margin: 0 32px 6px 0; font-size: 19px; color: #fff; font-family: "Kanit", sans-serif; font-weight: 700; }
.m-sheet-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.08); color: #d4d4d8; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; }
.m-sheet-sub { margin: 0 0 12px; font-size: 13px; color: var(--m-muted); line-height: 1.55; }
.m-sheet-label { display: block; font-size: 12px; color: var(--m-muted); margin: 10px 0 6px; }
.m-pin-input { width: 100%; box-sizing: border-box; background: #000; border: 1px solid #3f3f46; border-radius: 14px; padding: 14px; color: #fff; font-family: inherit; font-size: 26px; font-weight: 700; letter-spacing: 0.6em; text-align: center; text-indent: 0.6em; }
.m-pin-input:focus { outline: none; border-color: var(--m-yellow); box-shadow: 0 0 0 1px var(--m-yellow); }
.m-sheet-error { margin: 10px 0 0; font-size: 13px; color: #fca5a5; line-height: 1.5; }
.m-sheet-go { width: 100%; margin-top: 14px; padding: 13px; font-size: 15px; }
.m-btn-ghost { background: transparent; color: #f4f4f5; border: 1px solid #3f3f46; }
.m-btn-ghost:hover { border-color: #71717a; }
.m-sheet-link { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--m-muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.m-sheet-link:hover { color: #fff; }
.m-sheet-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--m-dim); font-size: 12px; }
.m-sheet-or::before, .m-sheet-or::after { content: ""; flex: 1; height: 1px; background: var(--m-border); }

/* Onboarding after a LINE link (js/member-page.js openOnboarding), in the sheet */
.m-onb-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 32px 14px; }
.m-onb-dots i { width: 22px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.m-onb-dots i.is-done { background: rgba(255, 203, 0, 0.5); }
.m-onb-dots i.is-on { background: var(--m-yellow); }
.m-onb-count { margin: 0 0 6px; text-align: center; font-size: 11px; letter-spacing: 0.08em; color: var(--m-dim); }
.m-onb-icon { width: 56px; height: 56px; margin: 4px auto 12px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: rgba(255, 203, 0, 0.12); color: var(--m-yellow); font-size: 30px; }
.m-onb-icon.is-line { background: var(--m-line); color: #fff; box-shadow: 0 8px 22px rgba(6, 199, 85, 0.35); }
.m-sheet-card .m-onb-icon + h3 { text-align: center; margin-right: 0; }
.m-sheet-card .m-onb-icon + h3 + .m-sheet-sub { text-align: center; }
.m-onb-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.m-onb-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--m-muted); background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 10px 12px; }
.m-onb-list li i { font-size: 20px; color: var(--m-dim); flex-shrink: 0; }
.m-onb-list li.is-ok { color: #f4f4f5; }
.m-onb-list li.is-ok i { color: #4ade80; }

/* --- Coupons: one compact row each --------------------------------------- */
.m-coupons { display: grid; gap: 8px; }
.m-coupon { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(255, 203, 0, 0.10), rgba(0, 0, 0, 0.6)); border: 1px solid rgba(255, 203, 0, 0.32); border-radius: 14px; padding: 12px; }
.m-coupon-omikuji { background: linear-gradient(135deg, rgba(255, 0, 0, 0.12), rgba(0, 0, 0, 0.6)); border-color: rgba(255, 0, 0, 0.35); }
.m-coupon-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--m-yellow); color: #000; font-size: 20px; }
.m-coupon-omikuji .m-coupon-icon { background: var(--m-red); color: #fff; }
.m-coupon-body { min-width: 0; }
.m-coupon-body h3 { color: #fff; font-size: 15px; line-height: 1.3; margin: 2px 0 1px; word-break: break-word; }
.m-coupon-body p { font-size: 12px; color: var(--m-muted); margin: 1px 0 0; }
.m-coupon-meta { color: var(--m-dim) !important; font-size: 11px !important; }
.m-coupon-meta .is-points { color: var(--m-yellow); }
.m-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: var(--m-yellow); border: 1px solid rgba(255, 203, 0, 0.4); border-radius: 6px; padding: 0 6px; }
.m-coupon-omikuji .m-tag { color: #fca5a5; border-color: rgba(255, 0, 0, 0.45); }
.m-coupon-terms { color: var(--m-muted); text-decoration: underline; }
.m-coupon-terms:hover { color: var(--m-yellow); }
.m-btn-use { background: #fff; color: #000; font-size: 13px; padding: 9px 12px; border-radius: 10px; white-space: nowrap; }
.m-btn-use:hover { background: var(--m-yellow); }
/* Not usable yet (a เซียมซี coupon before its first day) */
.m-btn-use:disabled { cursor: not-allowed; background: rgba(255, 255, 255, 0.55); }
.m-empty { display: flex; gap: 12px; align-items: center; background: var(--m-panel); border: 1px dashed #3f3f46; border-radius: 14px; padding: 12px 14px; color: #d4d4d8; font-size: 14px; }
.m-empty i { font-size: 26px; color: #52525b; }
.m-empty small { color: var(--m-dim); }

/* Folded lists: coupon history, points rules, the program's conditions */
.m-history, .m-acc { background: rgba(24, 24, 27, 0.6); border: 1px solid var(--m-border); border-radius: 14px; }
.m-history summary, .m-acc summary, .m-fold summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; padding: 12px 14px; font-size: 14px; color: #d4d4d8; font-weight: 600; }
.m-history summary::-webkit-details-marker, .m-acc summary::-webkit-details-marker, .m-fold summary::-webkit-details-marker { display: none; }
.m-history summary i, .m-acc summary i, .m-fold summary i { transition: transform 0.2s; color: var(--m-dim); }
.m-history[open] summary i, .m-acc[open] summary i, .m-fold[open] summary i { transform: rotate(180deg); }
.m-history-list { display: grid; gap: 2px; padding: 0 10px 10px; }
.m-history .m-hint { padding: 0 14px 12px; margin: 0; }
.m-history-row { display: flex; gap: 10px; align-items: center; padding: 8px 6px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.m-history-row i { font-size: 18px; color: #4ade80; flex-shrink: 0; }
.m-history-row.is-used i, .m-history-row.is-expired i { color: #52525b; }
.m-history-row div { min-width: 0; display: flex; flex-direction: column; }
.m-history-row b { font-size: 13px; color: #a1a1aa; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-history-row.is-used b, .m-history-row.is-expired b { text-decoration: line-through; color: #71717a; }
.m-history-row small { font-size: 11px; color: var(--m-dim); }

/* --- Points ------------------------------------------------------------- */
.m-points-headline { font-size: 14px; color: #e4e4e7; margin: 0 0 10px; line-height: 1.5; }
.m-points-table { display: grid; grid-template-columns: repeat(var(--m-steps, 4), 1fr); gap: 6px; }
.m-points-table > div { background: rgba(0, 0, 0, 0.4); border: 1px solid var(--m-border); border-radius: 12px; padding: 10px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; transition: border-color 0.2s; }
.m-points-table span { font-size: 12px; color: var(--m-muted); line-height: 1.25; }
.m-points-table b { font-size: 18px; color: #fff; }
/* The most this member can redeem now (js/member-page.js). */
.m-points-table .is-best { border-color: var(--m-yellow); background: rgba(255, 203, 0, 0.08); }
.m-points-table .is-best b { color: var(--m-yellow); }
.m-fold { margin: 10px -14px -14px; border-top: 1px solid var(--m-border); }
.m-fold .m-rules { margin: 0; padding: 0 14px 14px; }

.m-rules { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.m-rules li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #d4d4d8; line-height: 1.55; }
.m-rules li i { color: var(--m-yellow); margin-top: 3px; flex-shrink: 0; }

/* --- The program: one row per tier, then the conditions ------------------ */
.m-tierlist { display: grid; gap: 8px; }
.m-tierrow { border-radius: 14px; padding: 12px 14px; border: 1px solid var(--m-border); }
.m-tierrow-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.m-tierrow-head b { font-family: var(--m-display); font-weight: 400; font-size: 17px; letter-spacing: 0.06em; }
.m-tierrow-head span { font-size: 12px; opacity: 0.85; }
.m-tierrow-mine { display: none; margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: rgba(255, 255, 255, 0.9); color: #000; }
.m-tierrow.is-mine .m-tierrow-mine { display: inline-block; }
/* A ring off the row's edge: it reads on a white row as well as a black one. */
.m-tierrow.is-mine { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 3px; }
.m-tierrow p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; opacity: 0.92; }
.m-tierrow-white { background: linear-gradient(140deg, #ffffff, #e4e4e7); color: #18181b; border-color: rgba(255, 255, 255, 0.6); }
.m-tierrow-white .m-tierrow-mine { background: #18181b; color: #fff; }
.m-tierrow-red { background: linear-gradient(140deg, #e60000, #7a0000); color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.m-tierrow-black {
    color: #e8dcc0; border-color: transparent;
    background:
        linear-gradient(140deg, #201c14, #000) padding-box,
        linear-gradient(135deg, var(--g-light), rgba(156, 116, 54, 0.3) 45%, var(--g-mid)) border-box;
}
.m-tierrow-black .m-tierrow-head b { background: var(--g-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-tierrow-black .m-tierrow-mine { background: var(--g-metal); color: var(--g-ink); }
.m-tierrow-other { background: var(--m-panel); color: #fff; }

.m-accs { display: grid; gap: 8px; margin-top: 10px; }
.m-acc .m-rules { margin: 0; padding: 0 14px 14px; }
.m-acc .m-rules li i { color: var(--m-dim); }

/* --- Review + notes ----------------------------------------------------- */
.m-review { display: grid; gap: 10px; background: linear-gradient(135deg, rgba(120, 53, 15, 0.35), rgba(124, 45, 18, 0.2)); border: 1px solid rgba(245, 158, 11, 0.22); border-radius: 14px; padding: 14px; }
.m-review-text { display: flex; flex-direction: column; gap: 2px; }
.m-review-text b { color: #fbbf24; font-size: 15px; }
.m-review-text span { color: #d4d4d8; font-size: 13px; line-height: 1.5; }
.m-review-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }

.m-notes { margin-top: 24px; text-align: center; display: grid; gap: 8px; }
.m-notes p { margin: 0; font-size: 12px; color: var(--m-dim); }
.m-notes p i { color: var(--m-yellow); }
.m-disclaimer { font-size: 11px !important; color: #52525b !important; line-height: 1.5; }
.m-back { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; color: var(--m-dim); text-decoration: none; margin-top: 6px; }
.m-back:hover { color: #fff; }

/* --- Black's page: black and gold (js/member-page.js sets it on <body>) ---
   The tokens above turn gold; the rest gives the panels a gold edge and the
   buttons the metal. LINE keeps its green. */
body.m-theme-black {
    --m-yellow: var(--g-mid);
    --m-red: var(--g-mid);
    --m-panel: rgba(23, 20, 15, 0.9);
    --m-border: rgba(214, 178, 106, 0.2);
    --m-muted: #b9ad92;
    --m-dim: #8a7f68;
    /* A warm glow at the top, sized in px: iOS ignores a fixed background. */
    background: radial-gradient(120% 520px at 50% 0%, #2a2214 0%, #0d0b08 70%, transparent 100%) no-repeat, #070605;
}
.m-theme-black ::selection { background: var(--g-mid); color: var(--g-ink); }
.m-theme-black #navbar { border-bottom-color: rgba(214, 178, 106, 0.28); }
.m-theme-black .m-found-brand { color: var(--g-mid); }
.m-theme-black .m-found-brand b { color: var(--g-light); }
.m-theme-black .m-h2 { color: #f1e4c3; }
.m-theme-black .m-link-btn { border-color: rgba(214, 178, 106, 0.4); color: var(--g-light); }
/* Panels: dark, with a gold edge brightest at the top-left. */
.m-theme-black .m-panel,
.m-theme-black .m-lookup,
.m-theme-black .m-acc,
.m-theme-black .m-history,
.m-theme-black .m-coupon {
    border-color: transparent;
    background:
        linear-gradient(160deg, #1d1912, #0f0d0a) padding-box,
        linear-gradient(135deg, rgba(246, 227, 171, 0.75), rgba(156, 116, 54, 0.18) 40%, rgba(156, 116, 54, 0.1) 70%, rgba(214, 178, 106, 0.45)) border-box;
}
.m-theme-black .m-history summary, .m-theme-black .m-acc summary, .m-theme-black .m-fold summary,
.m-theme-black .m-rules li, .m-theme-black .m-switch-row, .m-theme-black .m-points-headline { color: #e8dcc0; }
/* Buttons wear the metal. */
.m-theme-black .m-btn-primary,
.m-theme-black .m-btn-use,
.m-theme-black .mp-btn:not(.line):not(.ghost),
.m-theme-black .bg-taro-yellow { background: var(--g-metal); color: var(--g-ink); }
.m-theme-black .m-btn-primary:hover,
.m-theme-black .m-btn-use:hover,
.m-theme-black .mp-btn:not(.line):not(.ghost):hover,
.m-theme-black .bg-taro-yellow:hover { background: var(--g-light); }
.m-theme-black .m-btn-red { background: transparent; color: var(--g-light); border: 1px solid rgba(214, 178, 106, 0.5); }
.m-theme-black .m-btn-red:hover { background: rgba(214, 178, 106, 0.12); }
.m-theme-black .m-btn-outline { border-color: rgba(214, 178, 106, 0.5); color: var(--g-light); }
.m-theme-black .m-btn-outline:hover { border-color: var(--g-light); }
.m-theme-black .m-menu-branch { background: rgba(214, 178, 106, 0.08); color: var(--g-light); border: 1px solid rgba(214, 178, 106, 0.45); }
.m-theme-black .m-count:not(:empty) { background: var(--g-metal); color: var(--g-ink); }
/* Coupons: the gold icon; Omikuji keeps a red seal so the two still differ. */
.m-theme-black .m-coupon-icon { background: var(--g-metal); color: var(--g-ink); }
.m-theme-black .m-coupon-omikuji .m-coupon-icon { background: #b40000; color: var(--g-light); }
.m-theme-black .m-tag { border-color: rgba(214, 178, 106, 0.45); }
.m-theme-black .m-coupon-omikuji .m-tag { color: #f0a8a0; border-color: rgba(240, 168, 160, 0.4); }
.m-theme-black .m-points-table > div { background: rgba(0, 0, 0, 0.35); }
.m-theme-black .m-points-table .is-best { background: rgba(214, 178, 106, 0.1); }
.m-theme-black .m-points-table b { color: #f1e4c3; }
.m-theme-black .m-points-table .is-best b { color: var(--g-light); }
.m-theme-black .m-tierrow.is-mine { outline-color: var(--g-mid); }
.m-theme-black .m-review { background: linear-gradient(135deg, rgba(214, 178, 106, 0.12), rgba(0, 0, 0, 0.4)); border-color: rgba(214, 178, 106, 0.3); }
.m-theme-black .m-review-text b { color: var(--g-light); }
/* The owner panel and the sheets (in <body>, so the theme reaches them). */
.m-theme-black .m-owner-row > i { background: rgba(214, 178, 106, 0.12); }
.m-theme-black .m-chip-btn:not(.is-quiet) { border-color: var(--g-mid); color: var(--g-light); }
.m-theme-black .m-sheet-card { background: linear-gradient(160deg, #1d1912, #0f0d0a); border-color: rgba(214, 178, 106, 0.3); }
.m-theme-black .m-pin-input:focus { border-color: var(--g-mid); box-shadow: 0 0 0 1px var(--g-mid); }
.m-theme-black .m-onb-dots i.is-on { background: var(--g-mid); }
.m-theme-black .m-onb-dots i.is-done { background: rgba(214, 178, 106, 0.5); }
.m-theme-black .m-onb-icon:not(.is-line) { background: rgba(214, 178, 106, 0.14); color: var(--g-light); }
/* "ข้อมูลของฉัน" (js/member-profile.js styles it with fixed colours). */
.m-theme-black .mp-card { border-color: rgba(214, 178, 106, 0.22); background: rgba(23, 20, 15, 0.9); }
.m-theme-black .mp-head, .m-theme-black .mp-note i { color: var(--g-mid); }
.m-theme-black .mp-check input { accent-color: var(--g-mid); }
.m-theme-black .mp-card textarea:focus { border-color: var(--g-mid); box-shadow: 0 0 0 1px var(--g-mid); }
.m-theme-black .mp-btn.ghost { border-color: rgba(214, 178, 106, 0.45); color: var(--g-light); }

@media (min-width: 480px) {
    .m-hero-title { font-size: 52px; }
}
@media (max-width: 360px) {
    .m-points-table { grid-template-columns: repeat(2, 1fr); }
    .m-card-points-num { font-size: 34px; }
    .m-coupon { grid-template-columns: 40px 1fr; }
    .m-coupon .m-btn-use { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .m-card, .m-switch, .m-switch::after { transition: none; }
    .m-invite-btn::after { animation: none; display: none; }
}