/* ===========================================================================
 * catchGo Console — style.css
 * flat / native · ภาษาไทย · ไม่มี framework · ไม่ใช้เงา/gradient
 * accent เทศกาล = ทอง · อันตราย = แดง · info = ฟ้า
 * =========================================================================== */
:root {
  --bg:            #e9e7e0;   /* พื้นหลังนอกสุด */
  --section:       #f4f3ee;   /* พื้น section เทาอ่อน */
  --surface:       #ffffff;   /* card ขาว */
  --border:        rgba(0,0,0,.10);  /* ขอบบาง */
  --border-strong: rgba(0,0,0,.18);
  --text:          #201f1c;
  --muted:         #6c6a62;
  --faint:         #9b9890;

  /* info / ฟ้า (avatar, primary ปกติ) */
  --info-bg:   #E6F1FB;
  --info:      #185FA5;
  /* danger / แดง */
  --danger-bg: #FCEBEB;
  --danger:    #A32D2D;
  --danger-bd: #F09595;
  /* festival / ทอง */
  --gold:      #BA7517;   /* accent เข้ม */
  --gold-bg:   #FAEEDA;   /* พื้น */
  --gold-text: #854F0B;   /* ข้อความ */
  --gold-bd:   #EF9F27;

  --primary:   #185FA5;   /* ปุ่มปกติ = ฟ้า info */
  --primary-d: #134e87;

  --radius:    12px;
  --radius-md: 8px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", "Noto Sans Thai", "Sarabun", Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
}
.ti { vertical-align: -2px; }

/* --- header ---------------------------------------------------------------- */
.app-header {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface);
  border-bottom: .5px solid var(--border-strong);
  padding: 10px 20px; position: relative;
}
/* แฮมเบอร์เกอร์เมนู (desktop + mobile) */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 9px; border: .5px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); cursor: pointer; font-family: inherit; flex: 0 0 auto;
}
.nav-toggle:hover { background: var(--section); }
.nav-toggle .ti { font-size: 20px; }
.app-header .brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 500; font-size: 16px; color: var(--text);
}
.app-header .brand::before {
  font-family: "tabler-icons"; content: "\eae7"; /* ti-map-2 */
  font-size: 18px; color: var(--gold);
}
/* nav = dropdown panel (ซ่อนไว้ · เปิดด้วยปุ่มแฮมเบอร์เกอร์) */
.app-header nav {
  display: none; position: absolute; top: calc(100% + 4px); left: 12px; z-index: 2000;
  flex-direction: column; gap: 2px; min-width: 240px; max-height: 80vh; overflow-y: auto;
  background: var(--surface); border: .5px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 6px;
}
.app-header.nav-open nav { display: flex; }
.app-header nav a {
  text-decoration: none; color: var(--muted); white-space: nowrap;
  padding: 9px 12px; border-radius: var(--radius-md); font-weight: 400;
}
.app-header nav a:hover { background: var(--section); color: var(--text); }
.app-header nav a.active {
  background: var(--gold-bg); color: var(--gold-text);
  border: .5px solid var(--gold-bd);
}
#admin-bar { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.admin-who { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.admin-email { color: var(--text); font-size: 13px; }
.admin-role  { color: var(--muted); font-size: 11px; }
#admin-bar .btn-ghost::before {
  font-family: "tabler-icons"; content: "\eba8"; /* ti-logout */ font-size: 14px;
}

/* --- layout ---------------------------------------------------------------- */
.container { max-width: 1280px; margin: 0 auto; padding: 20px; }
.card {
  background: var(--section); border: .5px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
/* card ที่อยู่ "ใน" card อื่น = พื้นขาว flat */
.card .card, .inner-card {
  background: var(--surface); border: .5px solid var(--border);
  border-radius: var(--radius-md);
}
.row { display: flex; gap: 16px; }
.row > * { min-width: 0; }
h1 { font-size: 20px; font-weight: 500; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 500; margin: 0 0 12px; }
.muted { color: var(--muted); }
.section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.section-title h2 { display: inline-flex; align-items: center; gap: 7px; }

/* --- form controls --------------------------------------------------------- */
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-weight: 500; margin-bottom: 4px; font-size: 13px; }
input[type=text], input[type=email], input[type=password], input[type=number], select {
  width: 100%; padding: 9px 11px; border: .5px solid var(--border-strong);
  border-radius: var(--radius-md); font-size: 14px; font-family: inherit;
  background: var(--surface); color: var(--text); font-weight: 400;
}
input:focus, select:focus {
  outline: none; border-color: var(--gold-bd);
  box-shadow: 0 0 0 3px rgba(186,117,23,.12);
}

.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 9px 16px; border: .5px solid transparent; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
  background: var(--primary); color: #fff; transition: background .12s, opacity .12s;
}
.btn:hover { background: var(--primary-d); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-ghost {
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--section); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #8c2626; }
/* ปุ่มปล่อย = ทอง */
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #a3680f; }
#release-btn::before {
  font-family: "tabler-icons"; content: "\ec45"; /* ti-rocket */
  font-size: 16px; margin-right: 2px;
}
.btn-block { width: 100%; }

/* --- login ----------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; }
.login-card { width: 360px; max-width: 92vw; background: var(--surface); }
.login-card h1 { text-align: center; }
.login-card .hint { text-align:center; font-size:12px; color: var(--muted); margin-top: 12px; }
.err-msg { color: var(--danger); font-size: 13px; margin: 8px 0; min-height: 18px; }

.login-section { margin-top: 14px; }
.g-signin-host { display: flex; justify-content: center; min-height: 40px; }
.login-divider { display:flex; align-items:center; gap:10px; color: var(--muted); font-size:12px; margin: 18px 0 6px; }
.login-divider::before, .login-divider::after { content:""; flex:1; height:.5px; background: var(--border-strong); }
.dev-login {
  border: .5px dashed var(--border-strong); border-radius: var(--radius-md); padding: 12px 14px; margin-top: 10px;
  background: var(--section);
}
.dev-badge {
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; color: var(--gold-text);
  background: var(--gold-bg); border: .5px solid var(--gold-bd); border-radius: 999px; padding: 2px 10px; margin-bottom: 10px;
}

/* --- admins page ----------------------------------------------------------- */
.admin-add { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.admin-add input { flex: 1; min-width: 220px; }
.admin-add select { width: auto; min-width: 200px; }
.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--surface); border: .5px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.data-table th, .data-table td {
  text-align: left; padding: 10px 12px; border-bottom: .5px solid var(--border); vertical-align: middle;
}
.data-table th { font-size: 12px; color: var(--muted); font-weight: 500; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .role-select { width: auto; min-width: 190px; padding: 6px 9px; }
.data-table .col-actions { text-align: right; white-space: nowrap; }
.data-table .col-actions .btn-danger::before {
  font-family: "tabler-icons"; content: "\eb41"; /* ti-trash */ font-size: 14px;
}

/* --- release page (จอเดียว v2) -------------------------------------------- */
/* ทั้งหน้าเต็มความสูง viewport ไม่ scroll page · map ซ้าย / panel ขวา */
.release-body { overflow: hidden; }
.release-screen {
  display: flex; flex-direction: column;
  height: calc(100vh - 53px);   /* 53px ≈ ความสูง header */
  padding: 12px 16px 14px; gap: 10px;
}

/* bar บน: จังหวัด + help (compact) */
.release-topbar {
  display: flex; align-items: center; gap: 16px; flex: 0 0 auto;
  background: var(--section); border: .5px solid var(--border);
  border-radius: var(--radius-md); padding: 8px 14px;
}
.topbar-field { display: flex; align-items: center; gap: 8px; margin: 0; }
.topbar-field > span { font-weight: 500; font-size: 13px; white-space: nowrap; }
.topbar-field > span .ti { color: var(--gold); }
.topbar-field select { width: auto; min-width: 220px; padding: 6px 10px; }
/* hint: กินพื้นที่ที่เหลือบรรทัดเดียว · ยาวเกิน = ellipsis (ไม่ wrap จนแถวสูงเกิน) */

/* กลาง: palette | map | panel (3 คอลัมน์ · เติมพื้นที่ที่เหลือ) */
.release-main {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 210px 1fr 320px; gap: 12px;
}
.map-pane { min-width: 0; min-height: 0; }

/* ซ้าย: palette เต็มความสูง · มาสคอต 1 ตัว/แถว scroll ในกล่อง */
.palette-pane {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}

#map {
  height: 100%; min-height: 0; border-radius: var(--radius-md);
  border: .5px solid var(--border-strong); z-index: 0; background: #E1F5EE;
}

/* panel ขวา: ซ้อนแนวตั้ง · list ขยายเติมที่เหลือ */
.side-panel {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.panel-block {
  background: var(--section); border: .5px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 12px; flex: 0 0 auto;
  min-height: 0;
}
.panel-block.list-block { flex: 1 1 0; display: flex; flex-direction: column; }
.panel-title {
  display: flex; align-items: center; justify-content: space-between; gap: 7px;
  font-weight: 500; font-size: 14px; margin-bottom: 8px;
}
.panel-title > span:first-child, .panel-title { gap: 7px; }
.panel-title .ti { color: var(--gold); }
.panel-footer { flex: 0 0 auto; margin-top: 10px; }

/* --- tab (รอปล่อย / ปล่อยแล้ว) ในกล่องขวา --- */
.panel-tabs {
  display: flex; gap: 6px; margin-bottom: 8px; flex: 0 0 auto;
}
.panel-tab {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 8px; border: .5px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--muted); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
}
.panel-tab:hover { background: var(--section); color: var(--text); }
.panel-tab.active {
  background: var(--gold-bg); color: var(--gold-text); border-color: var(--gold-bd);
}
.panel-tab .ti { font-size: 15px; }
.tab-count {
  font-size: 11px; font-weight: 500;
  background: var(--section); border: .5px solid var(--border);
  border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center;
}
.panel-tab.active .tab-count {
  background: var(--gold-bg); border-color: var(--gold-bd); color: var(--gold-text);
}
/* แต่ละ pane เติมความสูงที่เหลือ · เฉพาะ active โชว์ */
.tab-pane { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.tab-pane[hidden] { display: none; }

/* palette: รายการแนวตั้ง 1 ตัว/แถว · scroll ในกล่อง (เผื่อมาสคอตเยอะ) */
.palette {
  flex: 1 1 0; min-height: 60px; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 6px; align-content: flex-start;
}
/* chip = แถวเต็มกว้าง: mascotSvg(28) + ชื่อ · draggable */
.chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: .5px solid var(--gold-bd); border-radius: var(--radius-md);
  background: var(--gold-bg); color: var(--gold-text); cursor: grab;
  font-weight: 500; font-size: 13px; user-select: none; width: 100%; flex: 0 0 auto;
}
.chip .chip-mascot { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.chip-mascot .mascot-svg { display: block; }
.chip .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:active { cursor: grabbing; }
.chip.dragging { opacity: .45; }

/* hint ใต้ palette มาสคอต — บรรทัดเล็ก ไม่กินความสูงเกิน */
.palette-hint {
  flex: 0 0 auto; margin-top: 8px; padding-top: 8px;
  border-top: .5px solid var(--border);
  font-size: 12px; line-height: 1.35; color: var(--muted);
}
.palette-hint .ti { color: var(--gold); }

/* ผีลาก (drag image) — render นอกจอแล้วใช้เป็น setDragImage */
.drag-ghost {
  position: fixed; top: -1000px; left: -1000px; pointer-events: none;
  width: 48px; height: 54px;
}
.drag-ghost .mascot-svg { display: block; }

/* --- กลุ่ม (label) --- */
.group-add { display: flex; gap: 6px; margin-bottom: 8px; }
.group-add input { flex: 1; padding: 6px 9px; font-size: 13px; }
.group-add .btn-sm { padding: 6px 10px; flex: 0 0 auto; }
.group-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.group-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: .5px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
  font-size: 12px; user-select: none;
}
.group-chip:hover { background: var(--section); }
.group-chip.active {
  background: var(--gold-bg); color: var(--gold-text); border-color: var(--gold-bd); font-weight: 500;
}
.group-chip-x {
  display: inline-flex; align-items: center; border: none; background: none;
  padding: 0; margin: 0; cursor: pointer; color: inherit; opacity: .6; font-size: 13px;
}
.group-chip-x:hover { opacity: 1; }

/* --- group section header (พับได้) ใน list --- */
.group-header {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  background: var(--section); border-bottom: .5px solid var(--border);
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--gold-text);
  position: sticky; top: 0; z-index: 1;
}
.group-header:hover { background: var(--gold-bg); }
.group-header .ti { color: var(--gold); font-size: 16px; }
.group-header-label { flex: 1; }
.group-header-count {
  font-size: 11px; font-weight: 500; color: var(--gold-text);
  background: var(--gold-bg); border: .5px solid var(--gold-bd);
  border-radius: 999px; padding: 0 8px; min-width: 22px; text-align: center;
}

/* --- mascot map markers (divIcon) --- */
.mascot-marker { background: none; border: none; }
.mascot-marker .mascot-svg {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
/* live = ขอบเขียวจางๆ แยกจาก pending */
.mascot-live .mascot-svg {
  filter: drop-shadow(0 0 0 #16a34a) drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
/* active (2-way highlight) = ขอบเรืองทอง */
.mascot-active .mascot-svg {
  filter: drop-shadow(0 0 4px var(--gold-bd)) drop-shadow(0 0 8px var(--gold))
          drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* --- item mode: palette chip (emoji + ชื่อ) — accent ฟ้า แยกจากมาสคอต(ทอง) --- */
.chip.chip-item {
  border-color: var(--info); background: var(--info-bg); color: var(--info);
}
.chip-item .chip-item-emoji {
  font-size: 20px; line-height: 1; flex: 0 0 auto; display: inline-flex; align-items: center;
}
.drag-ghost.drag-ghost-item {
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; width: 40px; height: 40px;
}

/* --- item map markers (emoji ในวงกลม) — แยกหน้าตา/สีจากมาสคอต --- */
.item-marker { background: none; border: none; }
.item-marker .item-marker-emoji {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; font-size: 20px; line-height: 1;
  background: var(--surface); border: 2px solid var(--info);
  border-radius: 50%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.item-live .item-marker-emoji { border-color: #16a34a; }
.item-active .item-marker-emoji {
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bd);
}

/* item row: emoji + qty badge + หมดอายุ */
.spawn-row .row-item-emoji {
  font-size: 20px; line-height: 1; flex: 0 0 auto; display: inline-flex; align-items: center;
}
.item-qty-badge {
  flex: 0 0 auto; font-size: 12px; font-weight: 500; text-align: center;
  color: var(--info); background: var(--info-bg); border: .5px solid var(--info);
  border-radius: 999px; padding: 1px 9px; min-width: 30px;
  font-variant-numeric: tabular-nums;
}
.item-exp {
  flex: 0 0 auto; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* ∞ toggle ใน pending row */
.inf-field {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  font-size: 13px; color: var(--muted); cursor: pointer;
}
.inf-field input[type=checkbox] { accent-color: var(--info); width: 15px; height: 15px; flex: 0 0 auto; }
.inf-field .inf-mark { font-size: 15px; line-height: 1; }
.qty-input:disabled { opacity: .4; }

/* --- expiry block (โหมดไอเทม) --- */
.expiry-block[hidden] { display: none; }
.expiry-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-weight: 500; font-size: 13px; margin-bottom: 8px;
}
.expiry-toggle input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; flex: 0 0 auto; }
.expiry-toggle .ti { color: var(--gold); }
.expiry-block input[type=datetime-local] { padding: 7px 9px; font-size: 13px; }
.expiry-block input[type=datetime-local]:disabled { opacity: .5; }
.expiry-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* spawn list (จุด-ต่อ-จุด) flat — scroll ภายในกล่องเอง (จอไม่กระโดด) */
.spawn-list {
  flex: 1 1 0; min-height: 60px; overflow: auto; overscroll-behavior: contain;
  border: .5px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
}
.spawn-list .empty { padding: 16px; text-align: center; color: var(--muted); }
.spawn-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-bottom: .5px solid var(--border); cursor: pointer;
}
.spawn-row:last-child { border-bottom: none; }
.spawn-row:hover { background: var(--section); }
.spawn-row.active { background: var(--gold-bg); }
.spawn-row .row-mascot { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.spawn-row .row-mascot .mascot-svg { display: block; }
.spawn-row .name {
  font-weight: 400; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px;
}
.spawn-row .coord { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.spawn-row .row-group-select {
  width: auto; max-width: 110px; padding: 3px 6px; font-size: 12px; flex: 0 0 auto;
}
.spawn-row .row-del { padding: 4px 7px; flex: 0 0 auto; }

/* --- mode toggle (มาสคอตจังหวัด | เทศกาล | ไอเทม) ------------------------- */
.mode-toggle {
  display: inline-flex; border: .5px solid var(--border-strong);
  border-radius: var(--radius-md); overflow: hidden; flex: 0 0 auto;
}
.mode-btn {
  padding: 7px 12px; border: none; background: var(--surface);
  color: var(--muted); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
  border-left: .5px solid var(--border-strong);
}
.mode-btn:first-child { border-left: none; }
.mode-btn:hover:not(:disabled) { background: var(--section); color: var(--text); }
.mode-btn.active { background: var(--gold-bg); color: var(--gold-text); }
.mode-btn:disabled { color: var(--faint); cursor: not-allowed; }

/* festival selector ใน topbar */
.festival-field { flex: 0 0 auto; }
.festival-field > span .ti { color: var(--gold); }
.festival-field select { min-width: 200px; }
.festival-create-link {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  text-decoration: none; font-size: 13px; color: var(--gold-text);
  background: var(--gold-bg); border: .5px solid var(--gold-bd);
  border-radius: var(--radius-md); padding: 5px 10px;
}
.festival-create-link:hover { background: #f6e4c6; }
.festival-edit-btn { padding: 5px 9px; flex: 0 0 auto; }
.festival-edit-btn:disabled { opacity: .45; cursor: default; }

/* chip quota badge (palette เทศกาล) */
.chip .chip-quota {
  margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 500;
  color: var(--gold-text); background: var(--surface); border: .5px solid var(--gold-bd);
  border-radius: 999px; padding: 1px 8px;
}
.chip.chip-full { opacity: .55; cursor: not-allowed; border-style: dashed; }
.chip.chip-full .chip-quota { color: var(--danger); border-color: var(--danger-bd); }

/* row คลิกได้ (ตาราง party) */
.row-clickable { cursor: pointer; }
.row-clickable:hover { background: var(--section); }

/* note หมดอายุ auto (party-release) */
.party-expiry-note {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
  background: var(--section); border-radius: 8px; padding: 8px 10px; margin: 0;
}
.party-expiry-note .ti { color: var(--gold); }

/* quota badge (reused by pending + live summary chips) */
.fest-quota-badge {
  font-size: 11px; font-weight: 500; color: var(--gold-text);
  background: var(--gold-bg); border: .5px solid var(--gold-bd);
  border-radius: 999px; padding: 1px 10px;
}
.fest-quota-badge.over { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-bd); }

/* pending festival: quota summary ต่อมาสคอต (บนสุด เพราะ list group ตามป้ายแล้ว) */
.fest-quota-summary {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px; border-bottom: .5px solid var(--border);
}
.fest-quota-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 4px; border-radius: 999px;
  background: var(--section); border: .5px solid var(--border);
}
.fest-quota-chip.over { background: var(--danger-bg); border-color: var(--danger-bd); }
.fest-quota-chip .row-mascot { display: inline-flex; align-items: center; line-height: 0; }
.fest-quota-chip .row-mascot .mascot-svg { display: block; }
.fest-quota-chip .fqc-name { font-size: 12px; font-weight: 500; }

/* qty/จุด ใน spawn-row */
.qty-field { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.qty-field > span { font-size: 12px; }
input.qty-input {
  width: 56px; flex: 0 0 56px; box-sizing: border-box;
  padding: 4px 6px; font-size: 13px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.fest-quota-warn {
  margin: 8px; padding: 8px 10px; font-size: 12px;
  color: var(--danger); background: var(--danger-bg);
  border: .5px solid var(--danger-bd); border-radius: var(--radius-md);
}

/* --- create-festival page -------------------------------------------------- */
.fest-mascot-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: .5px solid var(--border);
}
.fest-mascot-row:last-child { border-bottom: none; }
.fest-mascot-row .row-mascot { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.fest-mascot-row .row-mascot .mascot-svg { display: block; }
.fest-mascot-row .name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fest-mascot-row .quota-field { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-bottom: 0; }
.fest-mascot-row .quota-field > span { font-size: 12px; }
.fest-mascot-row .quota-input { width: 70px; padding: 6px 8px; font-size: 13px; text-align: center; }
.fest-mascot-row .row-del { padding: 5px 9px; flex: 0 0 auto; }

/* modal เลือกมาสคอต */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
  background: var(--surface); border: .5px solid var(--border-strong);
  border-radius: var(--radius); padding: 16px; width: 460px; max-width: 100%;
  max-height: 80vh; display: flex; flex-direction: column;
}
.pick-list {
  flex: 1 1 auto; overflow: auto; border: .5px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface);
}
.pick-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: .5px solid var(--border); cursor: pointer;
}
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--section); }
.pick-row.picked { opacity: .6; cursor: default; }
.pick-row input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; flex: 0 0 auto; }
.pick-row .row-mascot { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.pick-row .row-mascot .mascot-svg { display: block; }
.pick-row .name { flex: 1; min-width: 0; font-size: 14px; }

/* festival edit dialog — มาสคอต checkbox + quota */
.fest-edit-card { width: 520px; }
.fe-mascot-list { max-height: 46vh; }
.fe-mascot-row-pick .qty-field { flex: 0 0 auto; margin: 0; }
.fe-mascot-row-pick .quota-input {
  width: 64px; padding: 5px 7px; font-size: 13px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.fe-mascot-row-pick .quota-input:disabled { opacity: .5; }
.fe-mascot-row-pick.picked-on { background: var(--gold-bg); }
.fe-min-hint {
  flex: 0 0 auto; font-size: 11px; color: var(--gold-text);
  background: var(--gold-bg); border: .5px solid var(--gold-bd);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}

/* --- cancel page ----------------------------------------------------------- */
.search-bar { display: flex; gap: 8px; margin-bottom: 16px; position: relative; align-items: center; }
.search-bar::before {
  font-family: "tabler-icons"; content: "\eb1c"; /* ti-search */
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--faint); pointer-events: none;
}
.search-bar input { flex: 1; padding-left: 34px; }
.user-card { margin-bottom: 16px; background: var(--surface); }
.user-stats { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.user-stats .stat b { display:block; font-size: 18px; font-weight: 500; }
.user-stats .stat span { font-size: 12px; color: var(--muted); }
.catch-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; }
.catch-list li {
  display: flex; align-items: center; gap: 10px; padding: 9px 6px;
  border-bottom: .5px solid var(--border);
}
.catch-list li:last-child { border-bottom: none; }
.catch-list .meta { flex: 1; }
.catch-list .meta .sub { font-size: 12px; color: var(--muted); }
.catch-list input[type=checkbox] { accent-color: var(--danger); width: 16px; height: 16px; }
.badge {
  font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px;
  background: var(--info-bg); color: var(--info);
}
.badge-festival { background: var(--gold-bg); color: var(--gold-text); }
.note { font-size: 12px; color: var(--gold-text); margin-top: 2px; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.cols-2 .section-title h2::before {
  font-family: "tabler-icons"; content: "\f57c"; /* ti-ghost-2 */
  font-size: 17px; color: var(--gold);
}
.actions-bar { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
/* ปุ่ม action บนหน้า cancel = icon นำหน้า */
.actions-bar .btn-danger::before {
  font-family: "tabler-icons"; content: "\eb41"; /* ti-trash */ font-size: 15px;
}
.actions-bar .btn-ghost::before {
  font-family: "tabler-icons"; content: "\eb13"; /* ti-refresh */ font-size: 15px;
}

/* --- toast ----------------------------------------------------------------- */
.toast-host { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.toast {
  background: #201f1c; color: #fff; padding: 10px 16px; border-radius: var(--radius-md);
  border: .5px solid rgba(255,255,255,.12); font-size: 13px; opacity: 1; transition: opacity .4s, transform .4s;
}
.toast-out { opacity: 0; transform: translateY(8px); }
.toast-ok    { background: #1f6b46; }
.toast-error { background: var(--danger); }

/* ปุ่ม collapse/expand topbar — base: desktop ซ่อน · มือถือ override โชว์ (media ด้านล่าง) */
.topbar-collapse-btn { display: none; padding: 5px 9px; flex: 0 0 auto; }

/* iPad/แท็บเล็ต แนวนอน (จอกว้าง >980 + อุปกรณ์สัมผัส) — คง dashboard 3 คอลัมน์เดิม
   แต่ปลดล็อก viewport ให้ scroll ทั้งหน้าได้ (กัน iOS Safari 100vh ดันปุ่มล่างไปหลัง toolbar)
   · ให้ map สูงแน่นอน (min-height main) กัน height:100% collapse ตอน screen height:auto */
@media (min-width: 981px) and (pointer: coarse) {
  .release-body { overflow: auto; }
  .release-screen { height: auto; min-height: calc(100vh - 53px); }
  .release-main { min-height: calc(100vh - 53px - 88px); }  /* topbar + paddings ≈ 88px */
  #map { min-height: 420px; }
}

/* จอแคบ (≤980 — มือถือ/iPad แนวตั้ง): ยอมให้ scroll page · map เต็มกว้าง + panel ใต้ map */
@media (max-width: 980px) {
  .release-body { overflow: auto; }
  .release-screen { height: auto; min-height: calc(100vh - 53px); }
  .release-main { grid-template-columns: 1fr; }
  .map-pane { min-height: 360px; }
  #map { height: 360px; }
  /* topbar: จังหวัด + โหมด + เทศกาล ไม่ล้นขวา → wrap ลงบรรทัดใหม่ */
  .release-topbar { flex-wrap: wrap; gap: 10px 12px; }
  .topbar-field select { min-width: 0; flex: 1 1 auto; }
  /* มือถือ: ซ่อน label "จังหวัด" (ล้นจอ) · select เต็มแถว · chevron ชิดขวา · โหมด/เทศกาล ลงบรรทัดใหม่ */
  .release-topbar .topbar-field > span { display: none; }
  .release-topbar > .topbar-field { order: 1; flex: 1 1 auto; }
  .release-topbar > .topbar-summary { order: 1; }
  .release-topbar > .topbar-collapse-btn { order: 2; margin-left: auto; }
  .release-topbar > .mode-toggle { order: 3; flex: 1 1 100%; }
  .release-topbar > .festival-field { order: 4; flex: 1 1 100%; }

  /* --- topbar collapse/expand (มือถือ) --- ปุ่มคืนพื้นที่ให้แผนที่ */
  .topbar-collapse-btn { display: inline-flex; }                 /* โชว์เฉพาะมือถือ (desktop = none) */
  .release-topbar.collapsed { gap: 0; }
  /* collapsed: ซ่อนทุก field เหลือแถวบาง + ปุ่ม expand + สรุปสั้น */
  .release-topbar.collapsed > .topbar-field,
  .release-topbar.collapsed > .mode-toggle,
  .release-topbar.collapsed > .festival-field { display: none; }
  .topbar-summary { display: none; }                             /* desktop = ไม่ใช้ */
  .release-topbar.collapsed .topbar-summary {
    display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto;
    font-size: 13px; color: var(--muted); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* palette มาสคอต: ไอคอนล้วน compact (ซ่อนชื่อ) · หลายตัว/แถว */
  /* palette เป็นส่วนหนึ่งของ page flow → แตะแล้วเลื่อนทั้งหน้าได้ (ไม่ดัก scroll) */
  .palette-pane { max-height: none; }
  .palette {
    overflow: visible;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 8px; align-content: start; flex: 0 0 auto;
  }
  /* chip = ไอคอน/รูปมาสคอตกลางกล่อง compact · ซ่อนชื่อ · คง badge quota/qty */
  .chip {
    width: auto; position: relative;
    flex-direction: column; justify-content: center; gap: 0;
    padding: 8px 6px; aspect-ratio: 1 / 1; min-width: 0;
  }
  .chip .chip-name { display: none; }
  /* badge quota: ลอยมุมขวาบนของ chip (ไม่ดัน layout · ยังโชว์อยู่) */
  .chip .chip-quota {
    position: absolute; top: 2px; right: 2px; margin-left: 0;
    font-size: 10px; padding: 0 5px; line-height: 1.5;
  }
  /* list ขวา (tab) มีความสูงขั้นต่ำตอน stack */
  .side-panel .list-block { min-height: 320px; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .cols-3 { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
 * เหรียญร้าน (coin credit) — partner-grant panel
 * =========================================================================== */
#coin-card { margin-top: 16px; }
#coin-card .section-title h1 .ti { color: var(--gold); }
.coin-balance-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 14px; margin-bottom: 12px;
  background: var(--gold-bg); border: .5px solid var(--gold-bd);
  border-radius: var(--radius-md);
}
.coin-balance {
  font-size: 24px; font-weight: 600; color: var(--gold-text);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.coin-delta-pos { color: #1f6b46; font-weight: 500; font-variant-numeric: tabular-nums; }
.coin-delta-neg { color: var(--danger); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ===========================================================================
 * party-coin.html — mobile-first ออก QR เหรียญ
 * =========================================================================== */
.coin-screen {
  max-width: 560px; margin: 0 auto; padding: 14px 16px 28px;
  display: flex; flex-direction: column; gap: 14px;
}

/* เลือกร้าน */
.coin-party-bar {
  background: var(--section); border: .5px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 14px;
}
.coin-party-field { display: block; margin: 0; }
.coin-party-field > span { display: block; font-weight: 500; font-size: 13px; margin-bottom: 5px; }
.coin-party-field > span .ti { color: var(--gold); }
.coin-party-field select { width: 100%; }

/* header เครดิตคงเหลือ (เด่น) */
.coin-credit-hero {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 20px 16px; text-align: center;
  background: var(--gold-bg); border: .5px solid var(--gold-bd);
  border-radius: var(--radius);
}
.credit-hero-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--gold-text);
}
.credit-hero-value {
  font-size: 48px; line-height: 1.1; font-weight: 700; color: var(--gold-text);
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.credit-hero-unit { font-size: 14px; color: var(--gold-text); }

/* tabs */
.coin-tabs { display: flex; gap: 8px; }
.coin-tab {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 8px; border: .5px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--muted); cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500;
}
.coin-tab:hover { background: var(--section); color: var(--text); }
.coin-tab.active { background: var(--gold-bg); color: var(--gold-text); border-color: var(--gold-bd); }
.coin-tab .ti { font-size: 18px; }
.coin-pane[hidden] { display: none; }

/* sub-tab ประวัติ (รอสแกน/สแกนแล้ว/คืนแล้ว) */
.coin-subtabs { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; flex-wrap: wrap; }
.coin-subtab {
  flex: 0 0 auto; padding: 7px 12px; border: .5px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); color: var(--muted);
  font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.coin-subtab:hover { background: var(--section); color: var(--text); }
.coin-subtab.active { background: var(--info-bg); color: var(--info); border-color: var(--info); }
.coin-subtab .hcount { font-size: 12px; opacity: .8; }
/* filter เดือน — แถวเดียวกับ tab ชิดขวา */
.history-month { margin-left: auto; width: auto; max-width: 48%; padding: 7px 9px; border: .5px solid var(--border-strong);
  border-radius: var(--radius-md); font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text); }

/* ออก QR card */
.issue-card {
  background: var(--section); border: .5px solid var(--border);
  border-radius: var(--radius); padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.issue-amount-field { display: block; margin: 0; }
.issue-amount-field > span { display: block; font-weight: 500; font-size: 14px; margin-bottom: 8px; }
.issue-amount-field input {
  width: 100%; font-size: 40px; font-weight: 700; text-align: center;
  padding: 14px 12px; font-variant-numeric: tabular-nums;
  letter-spacing: -1px; color: var(--gold-text);
}
.issue-hint { font-size: 13px; color: var(--muted); text-align: center; min-height: 18px; }
.issue-btn {
  width: 100%; font-size: 19px; font-weight: 600; padding: 16px;
}
.issue-btn .ti { font-size: 22px; }

/* ประวัติ */
.history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.coin-history-list {
  display: flex; flex-direction: column;
  border: .5px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); overflow: hidden;
}
.coin-history-list .empty { padding: 24px 16px; text-align: center; color: var(--muted); }
.coin-history-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: .5px solid var(--border);
}
.coin-history-row:last-child { border-bottom: none; }
.chr-main { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.chr-amount { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chr-meta { font-size: 12px; flex: 0 0 100%; order: 3; }
.chr-refund { flex: 0 0 auto; }
.coin-badge {
  font-size: 11px; font-weight: 500; padding: 2px 10px; border-radius: 999px;
  border: .5px solid transparent; white-space: nowrap;
}
.coin-badge.st-active   { background: var(--info-bg); color: var(--info); border-color: var(--info); }
.coin-badge.st-redeemed { background: #e6f4ea; color: #1f6b46; border-color: #1f6b46; }
.coin-badge.st-expired  { background: var(--section); color: var(--muted); border-color: var(--border-strong); }
.coin-badge.st-refunded { background: var(--gold-bg); color: var(--gold-text); border-color: var(--gold-bd); }

/* popup QR เต็มจอ */
body.qr-open { overflow: hidden; }
.qr-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(20,18,14,.94);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.qr-overlay[hidden] { display: none; }
.qr-modal {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.qr-amount-big {
  font-size: 40px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; text-align: center;
}
.qr-amount-big span { font-size: 18px; font-weight: 500; color: rgba(255,255,255,.75); }
.qr-canvas {
  background: #fff; padding: 16px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  width: 84vw; max-width: 320px; aspect-ratio: 1 / 1;
}
.qr-canvas .qr-img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.qr-countdown {
  font-size: 32px; font-weight: 700; color: var(--gold-bd);
  font-variant-numeric: tabular-nums;
}
.qr-countdown.expired { color: var(--danger-bd); }
.qr-sub { font-size: 14px; color: rgba(255,255,255,.8); text-align: center; min-height: 20px; }
.qr-close-btn {
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
  font-size: 17px; font-weight: 600; padding: 15px; max-width: 320px;
}
.qr-close-btn:hover { background: var(--section); }
.qr-close-btn .ti { font-size: 20px; }

/* จอเล็กจริง (มือถือ ~380px) */
/* มือถือ: brand + email/role/logout อยู่แถวเดียวกับ catchGo · nav ลงบรรทัด 2 */
@media (max-width: 600px) {
  .app-header { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .app-header .brand { order: 1; }
  #admin-bar { order: 2; margin-left: auto; gap: 8px; }
  /* nav เมนูเยอะ: ไม่ตกบรรทัด + สไลด์ซ้ายขวาได้ + ซ่อนเส้น scroll */
  .app-header nav {
    order: 3; flex-basis: 100%; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .app-header nav::-webkit-scrollbar { display: none; }
  .app-header nav a { flex: 0 0 auto; white-space: nowrap; }
  .brand-suffix { display: none; }                 /* "catchGo Console" → "catchGo" */
  #admin-bar .logout-label { display: none; }       /* logout = ไอคอนอย่างเดียว */
  #admin-bar .logout-btn { padding: 6px 9px; }
  .admin-email { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 480px) {
  .coin-screen { padding: 12px 12px 24px; }
  .credit-hero-value { font-size: 42px; }
  .issue-amount-field input { font-size: 34px; }
}

/* --- items page (จัดการ Item) --------------------------------------------- */
.mono { font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; font-size: 12px; }
.field-hint { display: block; color: var(--faint); font-size: 11px; margin-top: 3px; line-height: 1.4; }

/* toggle "แสดงที่ซ่อน" */
.archived-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; margin: 0; }
.archived-toggle input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; flex: 0 0 auto; }

/* table tweaks */
.data-table .col-emoji { font-size: 20px; width: 1%; white-space: nowrap; }
.data-table .col-badges { white-space: nowrap; }
.data-table .col-badges .badge { margin-right: 4px; }
.data-table tr.row-archived td { opacity: .62; }
.btn-danger-text { color: var(--danger) !important; }
.btn-danger-text:hover { background: var(--danger-bg) !important; }

/* badges: rarity */
.badge-rarity.rarity-common  { background: var(--section); color: var(--muted); }
.badge-rarity.rarity-special { background: var(--info-bg); color: var(--info); }
.badge-rarity.rarity-rare    { background: var(--gold-bg); color: var(--gold-text); }
/* badges: uses */
.badge-use-lure    { background: #E9F6EC; color: #1f6b46; }
.badge-use-tool    { background: var(--info-bg); color: var(--info); }
.badge-counter     { background: var(--gold-bg); color: var(--gold-text); }
.badge-collectible { background: var(--section); color: var(--muted); }
/* badges: status */
.badge-active   { background: #E9F6EC; color: #1f6b46; }
.badge-archived { background: var(--section); color: var(--faint); }

/* uses checkbox group */
.uses-group { display: flex; gap: 10px; flex-wrap: wrap; }
.check-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: .5px solid var(--border-strong); border-radius: 999px;
  padding: 6px 12px; font-size: 13px; background: var(--surface); user-select: none;
}
.check-chip input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; flex: 0 0 auto; }
.check-chip:has(input:checked) { background: var(--gold-bg); border-color: var(--gold-bd); color: var(--gold-text); }

/* modal card width for item form */
.item-modal-card { width: 520px; }

/* live preview */
.item-preview {
  display: flex; align-items: center; gap: 12px; margin: 6px 0 16px;
  padding: 12px 14px; border: .5px dashed var(--border-strong);
  border-radius: var(--radius-md); background: var(--section);
}
.item-preview .preview-emoji { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.item-preview .preview-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.item-preview .preview-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-preview .preview-badges { display: flex; gap: 5px; flex-wrap: wrap; }

/* badges: effect (preview + list) */
.badge-effect     { background: #EEE9FB; color: #5B3FB8; }
.badge-effect-tag { background: #EEE9FB; color: #5B3FB8; }

/* badge: ราคาเหรียญ (ร้านค้า) */
.badge-price { background: #FBF1D6; color: #8A6A12; white-space: nowrap; }

/* ===========================================================================
 * mascots.html (จัดการมาสคอต) — CRUD + preview procedural
 * =========================================================================== */
/* filter bar (จังหวัด + kind) */
.mascot-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.mascot-filters .field { margin-bottom: 0; }
.mascot-filters .filter-prov  { min-width: 220px; }
.mascot-filters .filter-kind  { min-width: 150px; }
.mascot-filters .filter-spacer { flex: 1 1 auto; }

/* table: รูปมาสคอตเล็กในแถว */
.data-table .col-mascot { width: 1%; white-space: nowrap; }
.data-table .col-mascot .mascot-svg { display: block; }
.data-table .col-reward { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* kind badge (province / festival) */
.badge-kind-province { background: var(--info-bg);  color: var(--info); }
.badge-kind-festival { background: var(--gold-bg);  color: var(--gold-text); }
/* tier badge */
.badge-tier.tier-normal  { background: var(--section); color: var(--muted); }
.badge-tier.tier-special { background: var(--info-bg); color: var(--info); }
.badge-tier.tier-rare    { background: var(--gold-bg); color: var(--gold-text); }
/* reward-unlock badge (มาสคอตที่ปลดล็อกด้วยปั๊มครบจังหวัด) */
.badge-reward-unlock { background: #EEE9FB; color: #5B3FB8; margin-left: 6px; }

/* toggle ปลดล็อกด้วยปั๊มครบจังหวัด */
.unlock-toggle .unlock-check {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-weight: normal; margin-top: 2px;
}
.unlock-toggle .unlock-check input { width: auto; margin: 0; }

/* modal กว้างขึ้น (ฟอร์ม + preview เคียงข้าง) */
.mascot-modal-card { width: 720px; }
/* form ยาว (หลาย field + preview) → ให้ scroll ในกรอบ modal (max-height 80vh) ไม่ล้นออกนอก card */
.mascot-modal-card #mascot-form { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mascot-form-grid { display: grid; grid-template-columns: 1fr 220px; gap: 18px; align-items: start; }
.mascot-form-fields { min-width: 0; }

/* color picker: swatch + hex text เคียงกัน */
.color-field-row { display: flex; align-items: center; gap: 10px; }
.color-field-row input[type=color] {
  width: 46px; height: 38px; padding: 2px; flex: 0 0 auto;
  border: .5px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); cursor: pointer;
}
.color-field-row input[type=text] { flex: 1 1 auto; font-family: ui-monospace, "Consolas", monospace; }

/* preview panel (sticky ขวา) */
.mascot-preview {
  position: sticky; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 14px; border: .5px dashed var(--border-strong);
  border-radius: var(--radius-md); background: var(--section);
}
.mascot-preview .preview-stage {
  display: flex; align-items: center; justify-content: center;
  width: 140px; height: 156px;
}
.mascot-preview .preview-stage .mascot-svg { display: block; }
.mascot-preview .preview-name {
  font-weight: 500; text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mascot-preview .preview-badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.mascot-preview .preview-hint { font-size: 11px; color: var(--faint); text-align: center; }

@media (max-width: 680px) {
  .mascot-form-grid { grid-template-columns: 1fr; }
  .mascot-preview { position: static; order: -1; }
  .mascot-preview .preview-stage { width: 110px; height: 124px; }
}

/* effects editor */
.effects-field .effects-label { display: block; font-weight: 500; margin-bottom: 4px; font-size: 13px; }
.effects-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.effects-list:empty { margin-bottom: 0; }
.effect-row {
  border: .5px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--section); padding: 10px 12px;
}
.effect-row-head { display: flex; align-items: center; gap: 8px; }
.effect-row-head .effect-type-select { flex: 1 1 auto; }
.effect-del-btn { flex: 0 0 auto; }
.effect-params {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;
}
.effect-params:empty { display: none; }
.effect-param { display: block; margin: 0; }
.effect-param-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.effects-add-btn { margin-top: 2px; }
@media (max-width: 540px) {
  .effect-params { grid-template-columns: 1fr; }
}