/* WO-249: สมุดสมาชิก — CSS เรียบพออ่านได้ (สกินใหม่จะมาแทนทีหลัง) · ตัวแปรสีตาม customer.css · JS สลับแค่ data-view / class */
:root { --red: #B8161E; --black: #050505; --white: #fff7f2; --muted: rgba(255,247,242,.6); --faint: rgba(255,247,242,.32); --line: rgba(255,255,255,.12); --ok: #52d273; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--white); font: 15px/1.4 -apple-system, "SF Pro Text", "Sukhumvit Set", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, a.btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#app { max-width: 480px; margin: 0 auto; padding: 16px 20px 40px; }
#brand { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.logo { width: 22px; height: 23px; fill: var(--red); flex: none; }
h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
h1 small { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 6px; }
p { color: var(--muted); margin: 0; }

/* พื้นที่ข้อความสถานะจองไว้เสมอ — ไม่ดันเลย์เอาต์ */
#status { min-height: 22px; font-size: 13px; color: var(--muted); margin: 10px 0; }
#status.error, .error { color: var(--red); }

/* view ไหนโชว์ ดูจาก data-view ของ #app เท่านั้น */
.view { display: none; flex-direction: column; gap: 16px; }
#app[data-view="signup"] #signup, #app[data-view="unlinked"] #unlinked, #app[data-view="welcome"] #tap-welcome, #app[data-view="book"] #book { display: flex; }
#book[data-public] #memories, #book[data-public] #points, #book[data-public] #card { display: none; }

.page { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 24px; border-bottom: 1px solid var(--line); }
.no { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); display: flex; justify-content: space-between; }

.btn { min-height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; width: 100%; border: 1px solid rgba(255,255,255,.22); text-decoration: none; }
.btn.primary { background: var(--red); border-color: transparent; }
.btn.wallet { background: #000; }

.fcard { position: relative; border-radius: 22px; aspect-ratio: 1.586; padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  background: linear-gradient(135deg, #1a0607 0%, #0d0d0e 55%, #161617 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.fcard[data-face="photo"] { background-image: var(--face-photo), linear-gradient(160deg, #3a1113 0%, #121212 60%); background-size: cover; background-position: center; }
.fcard .top { display: flex; justify-content: space-between; align-items: center; }
.fcard .brand { font-weight: 700; letter-spacing: .14em; font-size: 12px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.fcard .tier { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,247,242,.25); }
.fcard .name { font-size: 22px; font-weight: 600; margin-top: auto; }
.fcard .since { font-size: 12px; color: var(--muted); margin-top: 3px; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rows li:last-child { border-bottom: 0; }
.rows .d { width: 44px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.15; }
.rows .d b { display: block; color: var(--white); font-size: 17px; }
.rows .t { flex: 1; min-width: 0; }
.rows .t b { display: block; font-weight: 600; }
.rows .t small { color: var(--muted); font-size: 12.5px; }
.rows .p { color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; }
.rows .p.minus { color: var(--red); }

.pts { font-size: 56px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pts small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ladder li { text-align: center; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ladder li::before { content: ''; display: block; height: 4px; border-radius: 2px; background: #222; margin-bottom: 8px; }
.ladder li.on { color: var(--white); }
.ladder li.on::before { background: var(--red); }

.seg { display: flex; background: #161617; border-radius: 12px; padding: 3px; }
.seg button { flex: 1; min-height: 44px; border-radius: 9px; color: var(--muted); }
.seg button.on { background: #2a2a2c; color: var(--white); font-weight: 600; }
#card-photo, #face-photo { width: 100%; border-radius: 16px; }
.pill { display: inline-block; padding: 8px 12px; border-radius: 999px; background: #161617; font-size: 13px; }

.bonus { font-size: 72px; font-weight: 600; letter-spacing: -.04em; text-align: center; color: var(--ok); animation: pop .6s cubic-bezier(.2,.9,.2,1.2) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bonus { animation: none; } }

/* ---------- แอปพนักงาน (staff.html) ---------- */
#app[data-view="login"] #login, #app[data-view="work"] #work { display: flex; }
.mode { display: flex; flex-direction: column; gap: 12px; }
.input { min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: #111112; color: var(--white); padding: 0 14px; font: inherit; width: 100%; }
.line { display: flex; gap: 10px; }
.line .btn { width: auto; flex: 1; padding: 0 14px; }
.pick li { cursor: pointer; min-height: 48px; }
#selected { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
#cards-out { white-space: pre-wrap; font-size: 13px; color: var(--muted); margin: 0; }

/* ---------- r3: pairing / not-owner / ตั้งค่า ---------- */
#app[data-view="pair"] #pair, #app[data-view="not-owner"] #not-owner { display: flex; }
.paircode { font-size: 64px; font-weight: 600; letter-spacing: .2em; text-align: center; font-variant-numeric: tabular-nums; }
textarea.input { min-height: 200px; padding: 12px 14px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
#photo-preview { width: 100%; border-radius: 12px; }

/* ---------- r4: ฟอร์มตั้งค่าต่อ field ---------- */
.row-field { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.field { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: 12px; color: var(--muted); }