/* ══════════════════════════════════════════════════════════════
   CRAFTFITI BKK — DARK MOODY BAR
   Design system: charcoal + candlelit amber + warm neutrals
   ══════════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  /* ── Surface tones (warm-charcoal, not blue-grey) ───────── */
  --bg:        #12100e;                      /* main backdrop  */
  --bg-grain:  #15130f;
  --s0:        #1a1714;                      /* card base      */
  --s1:        #201c18;                      /* elevated       */
  --s2:        #2a2520;                      /* input / hover  */
  --s3:        #362f28;                      /* pressed / pill */
  --line:      rgba(232, 200, 140, 0.09);    /* hairline border*/
  --line-2:    rgba(232, 200, 140, 0.18);    /* hover border   */

  /* ── Ink ────────────────────────────────────────────────── */
  --ink:       #f5ecdc;                      /* cream headline */
  --ink-body:  #e2d5bc;                      /* body text      */
  --ink-mute:  #9c8f78;                      /* muted          */
  --ink-hint:  #6a5f52;                      /* placeholder    */

  /* ── CI-derived palette — mustard yellow from BKK marker ── */
  --amber:     #f5c544;                      /* primary accent (BKK yellow) */
  --amber-hi:  #fdd76a;                      /* hover state    */
  --amber-lo:  #a87c20;                      /* deep amber     */
  --amber-glow:rgba(245, 197, 68, 0.20);
  --copper:    #c97247;                      /* rust (beer pour) */
  --malt:      #a87a4a;                      /* secondary warm */
  --beer:      #e8a34a;                      /* beer-body orange */

  /* ── Member card colors (from brief) ─────────────────────── */
  --blue:      #4a90c8;
  --blue-glow: rgba(74, 144, 200, 0.18);
  --green:     #6ba85a;
  --green-glow:rgba(107, 168, 90, 0.18);
  --red:       #c8564a;
  --red-glow:  rgba(200, 86, 74, 0.2);

  /* ── Semantic ─────────────────────────────────────────────── */
  --ok:        #6ba85a;
  --warn:      #e8a34a;
  --danger:    #c8564a;

  /* ── Type — matches CI: Cormorant serif + Caveat handwritten + Permanent Marker ── */
  --serif:   'Cormorant Garamond', 'IBM Plex Sans Thai', Georgia, serif;
  --marker:  'Permanent Marker', 'Caveat', cursive;
  --hand:    'Caveat', cursive;
  --sans:    'IBM Plex Sans Thai', -apple-system, system-ui, sans-serif;
  --mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 24px -12px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 1px var(--amber-glow), 0 10px 40px -12px var(--amber-glow);
}

html,body{min-height:100vh}
body{
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* subtle film-grain — barely visible, adds texture */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,163,74,0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(200,86,74,0.04), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.8 0 0 0 0 0.6 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

::selection{ background: var(--amber); color:#1a1200 }

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--s2);border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--s3)}

/* ══════════════════════════════════════════════════════════════
   TOPBAR — warm "tavern sign" header
   ══════════════════════════════════════════════════════════════ */
.topbar{
  position: sticky; top:0; z-index:100;
  background: linear-gradient(180deg, rgba(26,23,20,0.96), rgba(26,23,20,0.88));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner{
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 0 20px; height: 64px;
}
.brand{
  display:flex; align-items:baseline; gap:6px;
  text-decoration:none; color:var(--ink);
  padding-right: 18px; margin-right: 4px;
  border-right: 1px solid var(--line);
  flex-shrink: 0;
  white-space: nowrap;
}
.brand-name{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: 0.12em;
  line-height: 1;
}
.brand-bkk{
  font-family: var(--marker);
  color: var(--amber);
  font-size: 17px;
  letter-spacing: 0.01em;
  transform: rotate(-4deg) translateY(1px);
  display: inline-block;
  line-height: 1;
}

.nav{
  display: flex; align-items: center; gap: 2px;
  flex: 1; min-width: 0; overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar{display:none}

.nav-tab{
  position:relative;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
  transition: color .15s, background .15s;
  border: 1px solid transparent;
}
.nav-tab:hover{ color: var(--ink); background: var(--s1) }
.nav-tab.active{
  color: var(--amber);
  background: var(--s1);
  border-color: var(--line);
}
.nav-tab.active::after{
  content:''; position:absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--amber);
  box-shadow: 0 0 10px var(--amber-glow);
}
.nav-tab .tab-ico{ font-size: 14px; opacity:.85 }
.nav-tab.active .tab-ico{ opacity: 1 }

.cpill{
  background: var(--amber); color:#1a1200;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px;
  min-width: 18px; text-align: center;
  line-height: 1.4;
}
.cpill:empty{ display:none }

.topbar-right{
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-mute); font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  flex-shrink: 0;
}
.topbar-right .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 8px var(--ok);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

@media(max-width: 640px){
  .topbar-inner{ padding: 0 12px; height: 56px }
  .brand{ padding-right: 12px; margin-right: 2px }
  .brand-sub{ display:none }
  .brand-name{ font-size: 15px }
  .brand-mark{ width: 30px; height: 30px; font-size: 16px }
  .nav-tab{ padding: 7px 10px; font-size: 12px }
  .topbar-right{ display: none }
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════ */
.main{
  max-width: 1400px; margin: 0 auto;
  padding: 22px 20px 80px;
}
.pane{ display:none; animation: paneIn .35s ease both }
.pane.active{ display:block }
@keyframes paneIn{ from{opacity:0; transform: translateY(6px)} to{opacity:1; transform: translateY(0)} }

@media(max-width:640px){ .main{ padding: 14px 12px 60px } }

/* Page header — each tab gets a little editorial masthead */
.ph{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ph-left{ min-width: 0 }
.ph-kicker{
  font-family: var(--mono); font-size: 10px;
  color: var(--amber); letter-spacing: 0.22em;
  text-transform: uppercase; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.ph-kicker::before{
  content:''; width: 18px; height:1px; background: var(--amber);
  display:inline-block;
}
.ph-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px; line-height: 1.05;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.ph-title .hand{
  font-family: var(--marker);
  color: var(--amber);
  font-size: 26px;
  letter-spacing: 0.01em;
  display: inline-block;
  transform: rotate(-4deg) translateY(-2px);
  margin-left: 6px;
}
.ph-sub{
  font-size: 13px; color: var(--ink-mute);
  margin-top: 4px;
}
.ph-right{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
}
@media(max-width:640px){
  .ph{ flex-direction: column; align-items: flex-start; gap: 6px }
  .ph-title{ font-size: 22px }
}

/* ══════════════════════════════════════════════════════════════
   SHARED — panels, inputs, buttons, badges
   ══════════════════════════════════════════════════════════════ */
.panel{
  background: var(--s0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
}
.panel-title{
  font-family: var(--serif);
  font-size: 20px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  letter-spacing: 0.03em;
}
.panel-title .tnum{
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  font-style: normal;
  color: var(--amber); background: var(--amber-glow);
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.06em;
}

/* Inputs */
.inp{
  width:100%;
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 13px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: var(--sans);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.inp::placeholder{ color: var(--ink-hint) }
.inp:hover{ background: var(--s2) }
.inp:focus{
  outline:none;
  border-color: var(--amber);
  background: var(--s2);
  box-shadow: 0 0 0 3px var(--amber-glow);
}
.inp.err{ border-color: var(--danger) }

.inp-ico{ position:relative }
.inp-ico .inp{ padding-left: 38px }
.inp-ico .ico{
  position:absolute; left: 13px; top:50%; transform: translateY(-50%);
  font-size: 14px; color: var(--ink-mute); pointer-events:none;
}

select.inp{
  appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239c8f78' d='M6 9L1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}

textarea.inp{ resize: vertical; min-height: 64px; line-height: 1.6 }

/* Buttons */
.btn{
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 600;
  font-family: var(--sans);
  transition: transform .1s, background .15s, border-color .15s, color .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  line-height: 1.2;
}
.btn:active{ transform: translateY(1px) }

.btn-amber{
  background: var(--amber); color:#1a1200;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 20px -8px var(--amber);
}
.btn-amber:hover{ background: var(--amber-hi) }

/* Hand-drawn accent above major buttons */
.hand-accent{
  font-family: var(--marker);
  color: var(--amber);
  font-size: 13px;
  letter-spacing: 0.02em;
  display: inline-block;
  transform: rotate(-3deg);
  margin-right: 6px;
}

.btn-copper{
  background: var(--copper); color: #1a1200;
}
.btn-copper:hover{ background: #d98a5e }

.btn-ghost{
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink-body);
}
.btn-ghost:hover{ border-color: var(--amber); color: var(--amber); background: var(--s1) }

.btn-line{
  background: rgba(6,199,85,0.06);
  border-color: rgba(6,199,85,0.3);
  color: #4fc571;
}
.btn-line:hover{ background: rgba(6,199,85,0.12) }

.btn-danger{
  background: transparent;
  border-color: rgba(200,86,74,0.35);
  color: var(--danger);
}
.btn-danger:hover{ background: rgba(200,86,74,0.1) }

.btn-full{ width:100%; }

.btn-sm{ padding: 6px 10px; font-size: 11px }

/* Badges */
.badge{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.b-t1{ background: rgba(74,144,200,0.12); color: var(--blue); border-color: rgba(74,144,200,0.2) }
.b-t2{ background: rgba(168,122,74,0.14); color: var(--malt); border-color: rgba(168,122,74,0.25) }
.b-t3{ background: rgba(107,168,90,0.12); color: var(--green); border-color: rgba(107,168,90,0.22) }
.b-t4{ background: rgba(201,114,71,0.12); color: var(--copper); border-color: rgba(201,114,71,0.22) }
.b-tap{ background: rgba(232,163,74,0.14); color: var(--amber); border-color: rgba(232,163,74,0.25) }
.b-cider{ background: rgba(245,192,106,0.12); color: var(--amber-hi); border-color: rgba(245,192,106,0.22) }
.b-test{ background: rgba(156,143,120,0.1); color: var(--ink-mute); border-color: var(--line-2) }
.b-hmd{ background: rgba(200,86,74,0.14); color: var(--danger); border-color: rgba(200,86,74,0.3); font-weight:600 }
.b-ok{ background: rgba(107,168,90,0.12); color: var(--green); border-color: rgba(107,168,90,0.22) }
.b-w8{ background: rgba(232,163,74,0.1); color: var(--amber-hi); border-color: rgba(232,163,74,0.22) }
.b-other{ background: var(--s2); color: var(--ink-mute); border-color: var(--line) }
.b-wine-r{ background: rgba(200,86,74,0.12); color: #d97a6e; border-color: rgba(200,86,74,0.22) }
.b-wine-w{ background: rgba(184,217,110,0.1); color: #c4dc82; border-color: rgba(184,217,110,0.22) }
.b-wine-ro{ background: rgba(244,160,181,0.1); color: #eeafc0; border-color: rgba(244,160,181,0.22) }

.sup-tag{
  font-family: var(--mono); font-size: 10px;
  background: var(--s2); border: 1px solid var(--line);
  color: var(--ink-mute);
  padding: 2px 7px; border-radius: 3px;
  letter-spacing: 0.04em;
}

/* Form labels */
.flabel{
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute);
  margin-bottom: 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 4px;
}
.req{ color: var(--amber) }
.err-msg{ font-size: 11px; color: var(--danger); margin-top: 5px; display:none }

/* Toast */
.toast{
  border-radius: var(--r-sm);
  padding: 10px 14px; font-size: 12px;
  margin-top: 12px; display: none;
  animation: paneIn .25s ease;
}
.toast.success{ background: rgba(107,168,90,0.1); border:1px solid rgba(107,168,90,0.3); color: var(--green) }
.toast.error  { background: rgba(200,86,74,0.1); border:1px solid rgba(200,86,74,0.3); color: var(--danger) }

/* Loading */
.loading{ text-align:center; padding: 48px; color: var(--ink-mute); font-size: 12px }
.spin{ display:inline-block; animation: spin .9s linear infinite; font-size: 22px; margin-bottom: 8px }
@keyframes spin{ to{ transform: rotate(360deg) } }

/* Stat cards (dashboard metrics) */
.stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
@media(max-width:640px){ .stats{ grid-template-columns: repeat(2, 1fr) } }
.stat{
  background: var(--s0);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  position: relative; overflow: hidden;
}
.stat::before{
  content:''; position:absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--accent, var(--amber)); opacity: .4;
}
.stat.c-amber{ --accent: var(--amber) }
.stat.c-green{ --accent: var(--green) }
.stat.c-blue { --accent: var(--blue) }
.stat.c-red  { --accent: var(--danger) }
.stat.c-malt { --accent: var(--malt) }
.stat-label{
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 6px;
}
.stat-num{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 36px; line-height: 1;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.stat.c-amber .stat-num{ color: var(--amber-hi) }
.stat.c-green .stat-num{ color: var(--green) }
.stat.c-blue  .stat-num{ color: #7cb5dc }
.stat.c-red   .stat-num{ color: var(--danger) }
.stat.c-malt  .stat-num{ color: var(--malt) }

/* Toolbars */
.toolbar{
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
.toggle-group{
  display: inline-flex;
  background: var(--s0);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 3px;
}
.tgtab{
  padding: 6px 14px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  color: var(--ink-mute);
  border-radius: 4px;
  transition: background .15s, color .15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.tgtab:hover{ color: var(--ink) }
.tgtab.active{
  background: var(--amber); color:#1a1200;
  font-weight: 600;
}

.meta{
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.06em;
  margin-left: auto; white-space: nowrap;
}
/* ── FN1 Filter row ───────────────────────────────────── */
.fn1-filters{
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.fn1-filters .inp{
  flex: 1 1 110px; min-width: 0;
  padding: 8px 11px; font-size: 12px;
}
.fn1-filters select.inp{ padding-right: 28px }
.fn1-clear-btn{
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-mute);
  border-radius: var(--r-sm);
  font-size: 11px; font-weight: 500;
  font-family: var(--mono); letter-spacing: 0.06em;
  cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s;
  display: none;
}
.fn1-clear-btn.show{ display: inline-flex; align-items: center; gap: 5px }
.fn1-clear-btn:hover{ color: var(--danger); border-color: rgba(200,86,74,0.3) }
.fn1-active-cnt{
  font-family: var(--mono); font-size: 10px;
  color: var(--amber);
  background: var(--amber-glow);
  padding: 2px 7px; border-radius: 4px;
  margin-left: 4px; display: none;
  letter-spacing: 0.04em;
}
.fn1-active-cnt.show{ display: inline-flex }
@media(max-width:640px){
  .fn1-filters .inp{ flex-basis: calc(50% - 4px); font-size: 11px }
  .fn1-clear-btn{ flex-basis: 100% }
}
/* ══════════════════════════════════════════════════════════════
   FN1 — ORDER BUILDER
   ══════════════════════════════════════════════════════════════ */
.fn1-grid{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
}
@media(max-width:900px){ .fn1-grid{ grid-template-columns: 1fr } }

.beer-list{
  max-height: 420px; overflow-y: auto;
  margin-top: 10px;
  display: flex; flex-direction: column;
  gap: 2px;
}
.beer-item{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  transition: background .12s;
  border: 1px solid transparent;
}
.beer-item:hover{
  background: var(--s1);
  border-color: var(--line);
}
.bi-icon{
  font-size: 22px;
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--s1); border-radius: var(--r-sm);
}
.bi-name{ flex:1; font-size: 13px; font-weight: 500; color: var(--ink) }
.bi-sup{ font-family: var(--mono); font-size: 10px; color: var(--ink-mute); margin-top: 1px }
.add-btn{
  background: var(--amber); color:#1a1200;
  border: none; width: 30px; height: 30px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .12s, transform .12s;
}
.add-btn:hover{ background: var(--amber-hi) }
.add-btn:active{ transform: scale(.92) }

.cart-item{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item:last-child{ border-bottom: none }
.ci-name{ flex:1; font-size: 13px; font-weight: 500; color: var(--ink) }
.ci-sup{ font-family: var(--mono); font-size: 10px; color: var(--ink-mute); margin-top: 2px }
.qty-row{ display:flex; align-items:center; gap: 4px }
.qbtn{
  background: var(--s2); border:1px solid var(--line); color: var(--ink);
  width: 24px; height: 24px; border-radius: 4px;
  cursor:pointer; font-size: 13px;
  display:flex; align-items:center; justify-content:center;
}
.qbtn:hover{ border-color: var(--amber); color: var(--amber) }
.qty-input{
  width: 48px; text-align: center;
  background: var(--s1); border:1px solid var(--line);
  color: var(--ink); padding: 4px 0;
  border-radius: 4px; font-family: var(--mono); font-size: 13px; font-weight:600;
}
.qty-input:focus{ outline:none; border-color: var(--amber) }
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button{ opacity: 0 }
.del-btn{
  color: var(--ink-hint); cursor: pointer;
  padding: 4px 6px; border-radius: 4px;
  transition: color .12s, background .12s;
}
.del-btn:hover{ color: var(--danger); background: rgba(200,86,74,0.1) }

.empty-cart{
  text-align: center; padding: 36px 16px;
  color: var(--ink-hint); font-size: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.empty-cart .big{ font-size: 36px; margin-bottom: 10px; opacity: .6 }

.order-out{
  background: #0d0b09;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-family: var(--mono); font-size: 12px;
  line-height: 1.9; white-space: pre-wrap;
  color: var(--ink-body);
  max-height: 320px; overflow-y: auto;
}
.copy-row{ display:flex; gap: 8px; margin-top: 12px; flex-wrap: wrap }
.result-panel{ display:none; margin-top: 12px }

/* ══════════════════════════════════════════════════════════════
   FN2 — ADD BEER
   ══════════════════════════════════════════════════════════════ */
.fn2-wrap{ max-width: 640px; margin: 0 auto }
.form-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 16px;
}
.fg-full{ grid-column: 1 / -1 }
.form-hint{
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-hint); margin-top: 4px;
  letter-spacing: 0.03em;
}
.tag-wrap{
  display:flex; flex-wrap:wrap; gap: 6px;
  padding: 9px 11px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 42px; cursor:text; align-items:center;
  transition: border-color .15s, background .15s;
}
.tag-wrap:focus-within{ border-color: var(--amber); background: var(--s2); box-shadow: 0 0 0 3px var(--amber-glow) }
.ftag{
  background: var(--s2); border:1px solid var(--line);
  color: var(--ink-body); padding: 3px 9px;
  border-radius: 14px; font-size: 11px;
  display:flex; align-items:center; gap: 5px;
}
.ftag .x{ cursor:pointer; color: var(--ink-hint); font-size: 13px; line-height:1 }
.ftag .x:hover{ color: var(--danger) }
.tag-input{
  background:none; border:none; color: var(--ink); font-size: 12px;
  min-width: 120px; outline:none; font-family: var(--sans);
}
.img-drop{
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-md);
  padding: 26px; text-align: center;
  color: var(--ink-hint); font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.img-drop:hover{ border-color: var(--amber); color: var(--ink-mute); background: var(--s1) }
.img-drop .icon{ font-size: 28px; margin-bottom: 6px; display:block; opacity:.6 }

/* ── FN2: ปุ่ม AI กรอกชื่อ + preview รูปที่จะ upload ── */
.ai-fill-btn{ width: 100%; justify-content: center; font-size: 13px; }
.ai-fill-hint{
  font-size: 11px; color: var(--ink-hint); line-height: 1.5;
  margin: 8px 2px 18px; text-align: center;
}
/* รูปเดียว: 2 ปุ่ม ถ่ายรูป / อัลบั้ม */
.beer-img-pick{ display: flex; gap: 10px; }
.beer-img-pick .btn{ flex: 1; justify-content: center; font-size: 13px; }
/* ช่อง Display Name + ปุ่ม ✨ AI ข้างกัน */
.name-row{ display: flex; gap: 8px; align-items: stretch; }
.name-row .inp{ flex: 1; min-width: 0; }
.name-row .ai-name-btn{ flex: 0 0 auto; white-space: nowrap; font-size: 13px; }
@media (max-width: 480px){
  .name-row{ flex-wrap: wrap; }
  .name-row .ai-name-btn{ flex: 1 0 100%; justify-content: center; }
}
/* ── FN2: ค้น/แก้ไขเบียร์ที่มีอยู่ ── */
.beer-edit-search{ margin-bottom: 14px; position: relative; }
.beer-search-results{
  margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--s1); overflow: hidden;
}
.bsr-item{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.bsr-item:last-child{ border-bottom: 0; }
.bsr-item:hover{ background: var(--s2); }
.bsr-thumb{
  width: 30px; height: 30px; border-radius: var(--r-sm); object-fit: cover;
  flex: 0 0 auto; background: var(--s2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.bsr-name{ flex: 1; min-width: 0; font-weight: 600; font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsr-meta{ font-family: var(--mono); font-size: 10px; color: var(--ink-mute); flex: 0 0 auto; }
.bsr-empty{ padding: 11px 12px; font-size: 12px; color: var(--ink-hint); }
.edit-banner{
  display: none; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(245,200,90,.12); border: 1px solid var(--amber);
  border-radius: var(--r-md); padding: 9px 12px; margin-bottom: 14px;
  font-size: 13px; color: var(--ink);
}
.edit-banner b{ color: var(--amber); }
.edit-cancel{
  flex: 0 0 auto; background: transparent; border: 1px solid var(--line-2);
  color: var(--ink-mute); border-radius: var(--r-sm); padding: 5px 10px;
  font-size: 11px; cursor: pointer; white-space: nowrap;
}
.edit-cancel:hover{ border-color: var(--danger,#c0392b); color: var(--danger,#c0392b); }
.beer-img-prev{ position: relative; display: inline-block; max-width: 100%; }
.beer-img-prev img{
  max-width: 100%; max-height: 240px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  display: block;
}
.beer-img-x{
  position: absolute; top: -8px; right: -8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--danger, #c0392b); color: #fff; border: 2px solid var(--s0);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.beer-img-cap{ font-family: var(--mono); font-size: 10px; color: var(--ink-mute); margin-top: 6px; }

/* ── DB card: รูปจริง (thumbnail + รูปใหญ่ในรายละเอียด) + ปุ่มค้น Google ── */
.dc-icon.has-img{ padding: 0; overflow: hidden; background: #0d0b09; }
.dc-icon-img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-detail-img{
  width: 100%; max-height: 320px; object-fit: contain;
  background: #0d0b09; border-radius: var(--r-sm);
  border: 1px solid var(--line); margin-bottom: 10px; display: block;
}
.dc-gsearch{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--amber); text-decoration: none;
  padding: 8px 12px; margin-bottom: 10px;
  border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  font-family: var(--mono); letter-spacing: .03em;
}
.dc-gsearch:hover{ border-color: var(--amber); color: var(--amber-hi); background: var(--s1); }

/* ══════════════════════════════════════════════════════════════
   FN3 — TASTE
   ══════════════════════════════════════════════════════════════ */
.taste-wrap{ max-width: 780px; margin: 0 auto }
.taste-hero{
  background: var(--s0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 18px;
}
.taste-hero .inp{ font-size: 15px; padding: 14px 14px 14px 46px; border-radius: var(--r-sm) }
.taste-hero .ico{ font-size: 18px; left: 16px }

.taste-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media(max-width:640px){ .taste-grid{ grid-template-columns: 1fr } }

.taste-card{
  background: var(--s0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex; gap: 14px;
  transition: border-color .15s, transform .15s, background .15s;
}
.taste-card:hover{
  border-color: var(--line-2);
  background: var(--s1);
  transform: translateY(-1px);
}
.tc-icon{
  font-size: 32px;
  flex-shrink: 0;
  width: 52px; height: 52px;
  display:flex; align-items:center; justify-content:center;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.tc-body{ flex:1; min-width: 0 }
.tc-name{
  font-family: var(--serif);
  font-size: 21px; font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.tc-meta{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin-bottom:10px }
.tc-notes{
  font-size: 13px; color: var(--ink-body);
  line-height: 1.7;
  padding: 10px 14px;
  background: #0d0b09;
  border-radius: var(--r-sm);
  border-left: 2px solid var(--amber);
  margin-bottom: 10px;
  font-style: italic;
}
.tc-notes::before{
  content: '"'; color: var(--amber); font-family: var(--serif); font-size: 20px;
  line-height: 0; margin-right: 2px;
}
.tc-vibe{ display:flex; flex-wrap:wrap; gap: 5px }
.vtag{
  background: var(--s1); border:1px solid var(--line);
  color: var(--ink-mute);
  font-size: 10px; font-family: var(--mono);
  padding: 2px 8px; border-radius: 10px;
}
.vtag.hi{ color: var(--amber); border-color: rgba(232,163,74,0.25) }
.taste-card.sm .tc-icon{ font-size: 24px; width: 42px; height: 42px }
.taste-card.sm .tc-name{ font-size: 15px }
.taste-card.sm .tc-notes{ font-size: 12px; padding: 8px 12px }
.no-result{
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-mute);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.no-result .big{ font-size: 42px; margin-bottom: 10px; opacity: .5 }

/* ══════════════════════════════════════════════════════════════
   FN4 — MENU TODAY
   ══════════════════════════════════════════════════════════════ */
.menu-section{ margin-bottom: 28px }
.sec-header{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, var(--s1), transparent 80%);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 14px;
}
.sec-ico{ font-size: 16px }
.sec-name{
  font-family: var(--serif);
  font-size: 20px; font-weight: 500;
  color: var(--amber-hi);
  letter-spacing: 0.03em;
}
.sec-cnt{
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute);
  margin-left: auto;
  letter-spacing: 0.1em;
}
.menu-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.menu-card{
  background: var(--s0);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  transition: border-color .15s, transform .15s, background .15s;
  position: relative;
}
.menu-card:hover{
  border-color: var(--amber);
  background: var(--s1);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.menu-card.food{ padding-left: 52px }
.menu-card.food .mc-ico{
  position: absolute; left: 14px; top: 13px;
  font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
}
.mc-name{
  font-size: 13px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px; line-height: 1.4;
}
.mc-size{
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute);
}
.mc-price{
  font-family: var(--serif);
  font-size: 22px; font-weight: 600;
  color: var(--amber-hi);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.mc-price::before{ content: '฿'; font-size: 13px; opacity: .7; margin-right: 2px }
.mc-notes{
  font-size: 11px; color: var(--ink-mute);
  margin-top: 6px; line-height: 1.5;
  font-style: italic;
}
.mc-vibe{
  font-family: var(--mono);
  font-size: 10px; color: var(--ink-hint);
  margin-top: 4px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   FN5 — DATABASE
   ══════════════════════════════════════════════════════════════ */
.db-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.db-card{
  background: var(--s0);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  position: relative; overflow: hidden;
}
.db-card:hover{
  border-color: var(--line-2);
  background: var(--s1);
  transform: translateY(-1px);
}
.db-card.hmd{ border-left: 3px solid var(--danger) }
.db-card.hmd::before{
  content:''; position:absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, var(--danger), transparent);
}
.dc-top{ display:flex; align-items:flex-start; gap: 10px; margin-bottom: 10px }
.dc-icon{
  font-size: 24px;
  width: 40px; height: 40px;
  flex-shrink: 0;
  display:flex; align-items:center; justify-content:center;
  background: var(--s1); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.dc-info{ flex:1; min-width: 0 }
.dc-name{
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  line-height: 1.35; margin-bottom: 2px;
}
.dc-sup{ font-family: var(--mono); font-size: 10px; color: var(--ink-mute) }
.dc-price{
  font-family: var(--serif);
  font-size: 18px; font-weight: 600;
  color: var(--amber-hi);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.dc-badges{ display:flex; gap: 5px; flex-wrap:wrap; margin-bottom: 8px }
.dc-notes{
  font-size: 11px; color: var(--ink-mute);
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  margin-bottom: 8px;
  font-style: italic;
}
.dc-footer{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line);
}
.dc-vibe{
  font-family: var(--mono); font-size: 10px; color: var(--ink-hint);
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dc-more{
  font-size: 10px; color: var(--amber);
  cursor: pointer; flex-shrink: 0; padding-left: 6px;
  font-family: var(--mono); letter-spacing: 0.04em;
}
.dc-more:hover{ color: var(--amber-hi) }
.dc-detail{ display:none; margin-top: 10px; border-top:1px solid var(--line); padding-top: 10px }
.dc-detail.open{ display: block; animation: paneIn .2s ease }
.dc-detail-notes{
  font-size: 12px; color: var(--ink-body); line-height: 1.7;
  padding: 10px 12px; background: #0d0b09;
  border-radius: var(--r-sm);
  border-left: 2px solid var(--amber);
  margin-bottom: 8px;
  font-style: italic;
}
.dc-detail-tags{ display:flex; flex-wrap:wrap; gap: 4px }

.load-more-btn{
  text-align:center; padding: 14px;
  color: var(--ink-mute); font-size: 12px;
  cursor: pointer;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  margin-top: 12px;
  transition: border-color .15s, color .15s;
  font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.load-more-btn:hover{ color: var(--amber); border-color: var(--amber) }

.db-count{
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute); white-space: nowrap;
  letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════════════════════
   FN6 — MEMBER
   ══════════════════════════════════════════════════════════════ */
.mem-hint{
  background: linear-gradient(135deg, rgba(232,163,74,0.08), rgba(74,144,200,0.04));
  border: 1px solid rgba(232,163,74,0.18);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--ink-body);
  display: flex; align-items: center; gap: 10px;
}
.mem-hint .bang{
  font-size: 16px; flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,163,74,0.15);
  border-radius: 50%;
  color: var(--amber);
}

.member-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  transition: max-height .4s ease;
}
.member-grid.collapsed{ max-height: 310px; overflow: hidden }

.mem-expand-wrap{ position: relative; margin-bottom: 10px }
.mem-fade{
  position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg) 90%);
  pointer-events: none;
  transition: opacity .3s;
}
.mem-expand-wrap.expanded .mem-fade{ opacity: 0 }

.mem-expand-btn{
  width: 100%; padding: 12px;
  background: var(--s1); border: 1px solid var(--line);
  color: var(--amber);
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600;
  font-family: var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  margin-bottom: 8px;
}
.mem-expand-btn:hover{ background: var(--s2); border-color: var(--amber) }

.m-card{
  background: var(--s0);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  position: relative;
  animation: paneIn .3s ease;
  overflow: hidden;
}
.m-card::before{
  content:''; position:absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--mem-accent); opacity: .8;
}
.m-card.blue  { --mem-accent: var(--blue); --mem-glow: var(--blue-glow) }
.m-card.green { --mem-accent: var(--green); --mem-glow: var(--green-glow) }
.m-card.red   { --mem-accent: var(--danger); --mem-glow: var(--red-glow) }
.m-card.staff { border-color:#f5c544; --mem-accent: #f5c544; --mem-glow: rgba(245,197,68,.35) }
.m-card:hover{
  border-color: var(--mem-accent);
  background: var(--s1);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--mem-glow), 0 10px 28px -10px var(--mem-glow);
}
.m-card:active{ transform: translateY(0) }

.mc-top-row{ display:flex; align-items:center; gap: 10px; margin-bottom: 10px }
.m-avatar{
  width: 42px; height: 42px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 22px; flex-shrink: 0;
  background: var(--s1);
  border: 1px solid var(--line);
  transition: transform .25s;
}
.m-card:hover .m-avatar{ transform: rotate(-6deg) scale(1.08) }
.m-name{ font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; word-break: break-word }
.m-code{ font-family: var(--mono); font-size: 10px; color: var(--ink-mute); margin-top: 2px; letter-spacing: 0.04em }

.m-bdg{
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono);
  padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.m-card.blue  .m-bdg{ background: rgba(74,144,200,0.12); color: #7cb5dc; border: 1px solid rgba(74,144,200,0.2) }
.m-card.green .m-bdg{ background: rgba(107,168,90,0.12); color: var(--green); border: 1px solid rgba(107,168,90,0.22) }
.m-card.red   .m-bdg{ background: rgba(200,86,74,0.12); color: var(--danger); border: 1px solid rgba(200,86,74,0.3) }
.m-card.staff .m-bdg{ background: rgba(245,197,68,0.12); color: #f5c544; border: 1px solid rgba(245,197,68,0.3) }

.m-dots{ display:flex; gap: 3px; flex-wrap:wrap }
.m-dot{ width: 10px; height: 10px; border-radius: 2px }
.m-dot.u { background: rgba(107,168,90,0.6) }
.m-dot.e { background: var(--s2); border: 1px solid var(--line) }
.m-dot.c { border: 1px solid var(--amber); background: transparent }
.m-dot.cu{ background: var(--amber); border: 1px solid var(--amber) }

.m-used-pill{
  position: absolute; top: 12px; right: 12px;
  font-family: var(--mono);
  font-size: 9px; color: var(--green);
  background: rgba(107,168,90,0.12);
  border: 1px solid rgba(107,168,90,0.25);
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.04em;
}

/* OVERLAY & DRAWER */
.mem-overlay{
  display: none; position: fixed; inset: 0;
  background: rgba(10,8,6,0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  align-items: flex-start; justify-content: center;
  padding: 30px 14px;
  overflow-y: auto;
}
.mem-overlay.open{ display:flex; animation: paneIn .2s ease }
.mem-overlay.center{ align-items: center }
body.mem-locked{ overflow: hidden }

.mem-drawer{
  background: var(--s0);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  width: 100%; max-width: 640px;
  padding: 22px;
  position: relative;
  max-height: 92vh; overflow-y: auto;
  animation: drawerUp .35s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px var(--line);
  margin: auto;
}
@keyframes drawerUp{ from{opacity:0; transform: translateY(30px)} to{opacity:1; transform: translateY(0)} }

.mem-close{
  position: absolute; top: 16px; right: 16px;
  background: var(--s2); border: 1px solid var(--line);
  color: var(--ink-mute);
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, transform .15s;
  z-index: 2;
}
.mem-close:hover{ color: var(--ink); background: var(--s3); transform: rotate(90deg) }

.mem-already-popup{
  background: var(--s0);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  max-width: 360px; width: 100%;
  text-align: center;
  position: relative;
  animation: popIn .35s ease;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8);
}
@keyframes popIn{ 0%{opacity:0; transform: scale(.8)} 60%{transform: scale(1.03)} 100%{opacity:1; transform: scale(1)} }
.mem-ap-emoji{
  font-size: 64px; margin-bottom: 14px;
  display: inline-block;
  animation: shake .5s ease;
}
@keyframes shake{ 0%,100%{transform: translateX(0)} 20%,60%{transform: translateX(-6px)} 40%,80%{transform: translateX(6px)} }
.mem-ap-title{
  font-family: var(--serif);
  font-size: 23px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.mem-ap-title span{ color: var(--amber-hi); font-weight: 700 }
.mem-ap-msg{ font-size: 13px; color: var(--ink-mute); line-height: 1.6; margin-bottom: 20px }
.mem-ap-btn{
  width: 100%; padding: 12px;
  background: var(--s2); border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--sans);
  transition: border-color .15s, background .15s;
}
.mem-ap-btn:hover{ border-color: var(--amber); background: var(--s3) }

/* Detail drawer content */
.mem-d-header{
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
  padding-right: 40px;
  align-items: start;
}
@media(max-width: 600px){
  .mem-d-header{ grid-template-columns: 1fr; gap: 16px; text-align: left }
}

.mem-card-art{
  width: 170px; height: 260px;
  border-radius: var(--r-md);
  border: 2px solid var(--line-2);
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 18px 16px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}
.mem-card-photo{
  width: 170px; height: 260px;
  border-radius: var(--r-md);
  border: 2px solid var(--line-2);
  object-fit: cover;
  display: block;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6);
  background: var(--s0);
}
.mem-card-photo-wrap{
  position: relative;
  width: 170px; height: 260px;
  flex-shrink: 0;
}
.mem-card-code-overlay{
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  color: #1a1a1a;
  background: #ffffff;
  font-family: var(--sans), sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  padding: 6px 14px;
  border-radius: 4px;
  min-width: 72%;
  text-align: center;
  box-sizing: border-box;
}
.mem-card-art::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.06), transparent 60%);
  pointer-events: none;
}
.mem-card-art.blue {
  background: linear-gradient(155deg, #1e3a5c, #0f1e30);
  border-color: rgba(74,144,200,0.5);
}
.mem-card-art.green{
  background: linear-gradient(155deg, #2a4a24, #122014);
  border-color: rgba(107,168,90,0.5);
}
.mem-card-art.red  {
  background: linear-gradient(155deg, #4a1e1a, #2a0e0c);
  border-color: rgba(200,86,74,0.5);
}
.mca-top{
  font-family: var(--serif);
  font-size: 13px; color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em; line-height: 1.3;
  position: relative;
}
.mca-top em{
  display: block; font-size: 10px;
  font-family: var(--mono); font-style: normal;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.mca-mid{
  font-family: var(--serif);
  font-size: 30px; font-weight: 600;
  line-height: 1.05;
  position: relative;
  letter-spacing: 0.02em;
}
.mem-card-art.blue  .mca-mid{ color: #7cb5dc }
.mem-card-art.green .mca-mid{ color: #8fc877 }
.mem-card-art.red   .mca-mid{ color: #e87868 }
.mca-bottom{
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--mono); font-size: 9px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.12em; text-transform: uppercase;
  position: relative;
}
.mca-bottom .mca-code{ color: rgba(255,255,255,0.85); font-size: 11px }

.mem-d-info{ min-width: 0; padding-top: 4px }
.mem-d-ava{ font-size: 48px; line-height: 1; margin-bottom: 6px }
.mem-d-name{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  color: var(--ink);
  margin-bottom: 4px; line-height: 1.1;
  letter-spacing: 0.02em;
}
.mem-d-code{ font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin-bottom: 4px; letter-spacing: 0.06em }
.mem-d-tel { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); margin-bottom: 10px }

/* ปุ่มแก้ไขข้อมูล member ใน drawer */
.mem-edit-info-btn{
  width: 100%; padding: 9px 12px; margin-top: 4px;
  background: var(--s2); border: 1px solid var(--line); color: var(--ink-body);
  border-radius: var(--r-sm); font: 600 12px var(--sans); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mem-edit-info-btn:hover{ border-color: var(--amber); background: var(--s3); color: var(--ink) }
/* แถบ id/สีในฟอร์มแก้ไข (อ่านอย่างเดียว) */
.em-id{
  font-family: var(--mono); font-size: 13px; color: var(--amber);
  background: #0d0b09; border: 1px solid var(--line);
  padding: 10px 12px; border-radius: var(--r-sm);
}

.mem-d-priv{
  font-size: 12px; color: var(--ink-body);
  background: #0d0b09; border: 1px solid var(--line);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  line-height: 1.85;
  border-left: 2px solid var(--amber);
  margin-top: 8px;
}
.mem-d-priv strong{ color: var(--amber); font-weight: 600 }

.mem-month-sec{ margin-bottom: 18px }
.mem-ms-lbl{
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute);
  margin-bottom: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.mem-months-grid{ display:flex; gap: 4px; flex-wrap: wrap }
.mem-mo{
  width: 38px; height: 44px;
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  background: var(--s1); color: var(--ink-hint);
  border: 1px solid var(--line);
}
.mem-mo .m-lbl{ font-size: 9px; letter-spacing: 0.05em }
.mem-mo .m-ym{ font-size: 8px; opacity: .6; margin-top: 2px }
.mem-mo.u { background: rgba(107,168,90,0.15); color: var(--green); border-color: rgba(107,168,90,0.3) }
.mem-mo.e { /* default empty */ }
.mem-mo.c { border-color: var(--amber); color: var(--amber); background: rgba(232,163,74,0.05); box-shadow: 0 0 0 2px rgba(232,163,74,0.15) }
.mem-mo.cu{ background: var(--amber); color: #1a1200; border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-glow) }
.mem-mo.u, .mem-mo.cu { cursor: pointer }
.mem-mo .m-day{ font-size: 10px; font-weight: 700; margin-top: 2px }

.freecup-toast{
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(12px);
  background: #1a1200; color: var(--amber); border: 1px solid var(--amber);
  padding: 10px 16px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; text-align: center;
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  max-width: 86vw;
}
.freecup-toast.show{ opacity: 1; transform: translateX(-50%) translateY(0) }

.mem-free-btn{
  width: 100%;
  padding: 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, transform .15s, color .15s;
  font-family: var(--sans);
}
.mem-free-btn.ready{
  background: var(--amber); color: #1a1200;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px -8px var(--amber);
}
.mem-free-btn.ready:hover{ background: var(--amber-hi); transform: translateY(-1px) }
.mem-free-btn.ready:active{ transform: translateY(1px) }
.mem-free-btn.done{
  background: rgba(107,168,90,0.15);
  border-color: rgba(107,168,90,0.3);
  color: var(--green);
  animation: pop .4s ease;
}
@keyframes pop{ 0%{transform: scale(1)} 40%{transform: scale(1.12)} 100%{transform: scale(1)} }
.mem-free-btn.loading{ background: var(--s2); color: var(--ink-mute); cursor: wait }

/* ── Staff evolve: ตัวนับสิทธิ์ + reveal ── */
.mem-evo-credit{
  text-align: center; font-size: 11px; color: var(--ink-mute);
  margin-top: 6px; font-family: var(--mono);
}
.mem-evo-credit b{ color: var(--amber); font-size: 13px; }
.mem-evo-reveal{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; border-radius: var(--r-sm);
  background: rgba(232,163,74,0.12); border: 1px solid rgba(232,163,74,0.3);
  animation: pop .4s ease;
}
.mem-evo-rv-img{
  width: 56px; height: 56px; image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.mem-evo-rv-txt{ font-size: 13px; font-weight: 700; color: var(--amber); line-height: 1.4; }

.mem-cfwrap{
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.mem-cf{
  position: absolute; width: 8px; height: 8px;
  border-radius: 2px;
  animation: confetti 1s ease forwards;
}
@keyframes confetti{
  0%{ opacity: 1; transform: translateY(0) rotate(0deg) }
  100%{ opacity: 0; transform: translateY(-90px) rotate(360deg) }
}

/* Add member popup */
.mem-add-popup{
  background: var(--s0);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 24px;
  max-width: 440px; width: 100%;
  position: relative;
  max-height: 90vh; overflow-y: auto;
  animation: popIn .3s ease;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8);
}
.mem-add-title{
  font-family: var(--serif);
  font-size: 24px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}
.mem-add-sub{
  font-size: 11px; color: var(--ink-mute);
  margin-bottom: 20px; line-height: 1.55;
  font-family: var(--mono); letter-spacing: 0.02em;
}
.mem-add-field{ margin-bottom: 14px }
.mem-add-err{ font-size: 11px; color: var(--danger); margin-top: 4px; min-height: 14px }
.mem-card-type-picker{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.mem-ct-opt{
  padding: 12px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--s1); color: var(--ink-mute);
  cursor: pointer; text-align: center;
  font-size: 12px; font-weight: 600;
  font-family: var(--mono); letter-spacing: 0.04em;
  transition: border-color .15s, background .15s, color .15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mem-ct-opt span{ font-size: 14px }
.mem-ct-opt:hover{ border-color: var(--line-2); color: var(--ink) }
.mem-ct-opt.selected.blue { background: rgba(74,144,200,0.14); border-color: var(--blue); color: #7cb5dc }
.mem-ct-opt.selected.green{ background: rgba(107,168,90,0.14); border-color: var(--green); color: var(--green) }
.mem-ct-opt.selected.red  { background: rgba(200,86,74,0.14); border-color: var(--danger); color: var(--danger) }
.mem-add-actions{ display: flex; gap: 8px; margin-top: 18px }
.mem-add-actions .mem-ap-btn{ flex: 1 }
.mem-submit-btn{
  flex: 2; padding: 12px;
  background: var(--amber); color: #1a1200;
  border: none; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--sans);
  transition: background .15s;
}
.mem-submit-btn:hover{ background: var(--amber-hi) }
.mem-submit-btn:disabled{ background: var(--s2); color: var(--ink-mute); cursor: wait }

.mem-add-row{ margin-top: 18px; display: flex; justify-content: center }
.mem-add-btn{
  padding: 12px 24px;
  background: transparent;
  border: 1.5px dashed var(--line-2);
  color: var(--ink-mute);
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--sans);
  transition: border-color .15s, color .15s, background .15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.mem-add-btn:hover{ border-color: var(--amber); color: var(--amber); background: rgba(232,163,74,0.04) }

/* Summary */
.mem-summary-section{ margin-top: 32px }
.mem-sum-tabs{ display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap }
.msum-tab{
  padding: 7px 16px;
  background: var(--s0); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer; color: var(--ink-mute);
  transition: border-color .15s, color .15s, background .15s;
}
.msum-tab:hover{ color: var(--ink) }
.msum-tab.active{
  background: var(--s2); border-color: var(--amber); color: var(--amber);
}

.msum-box{
  background: var(--s0);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.msum-row{
  display: flex; align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.msum-row:last-child{ border-bottom: none }
.msum-row:hover{ background: var(--s1) }
.msum-av{ font-size: 17px; width: 24px; text-align: center; flex-shrink: 0 }
.msum-name{ flex: 1; font-size: 13px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 6px; min-width: 0 }
.msum-bar{
  flex: 0 0 100px; height: 5px;
  background: var(--s2); border-radius: 3px; overflow: hidden;
}
.msum-bar-fill{
  height: 100%; border-radius: 3px;
  transition: width .6s cubic-bezier(.16,1,.3,1);
}
.msum-count{
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute);
  min-width: 52px; text-align: right;
  letter-spacing: 0.04em;
}
.msum-top-b{
  background: rgba(232,163,74,0.12); color: var(--amber-hi);
  font-family: var(--mono); font-size: 10px;
  padding: 2px 7px; border-radius: 3px;
  border: 1px solid rgba(232,163,74,0.22);
}
.msum-never-b{
  background: rgba(200,86,74,0.1); color: #e8867c;
  font-family: var(--mono); font-size: 10px;
  padding: 2px 7px; border-radius: 3px;
  border: 1px solid rgba(200,86,74,0.2);
}