:root{
  --pink-50:#fff5f8; --pink-100:#ffe4ee; --pink-200:#ffc9dd;
  --pink-400:#ff8ab5; --pink-600:#e35d8f; --pink-700:#b34470;
  --ink:#3f2c36; --ink-soft:#7a6470;
  --glass:rgba(255,255,255,.62); --glass-line:rgba(255,255,255,.85);
  --ok:#2f9e6d; --warn:#c9863b; --err:#c1476b;
  --radius:20px; --shadow:0 10px 30px rgba(179,68,112,.13);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:"IBM Plex Sans Thai","TH Sarabun New","Sarabun",system-ui,sans-serif;
  background:linear-gradient(160deg,var(--pink-50) 0%,var(--pink-100) 45%,#f3e9ff 100%);
  background-attachment:fixed;
}
.wrap{max-width:960px;margin:0 auto;padding:24px 16px 64px}
.wrap-narrow{max-width:520px}
.glass{
  background:var(--glass); border:1px solid var(--glass-line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:24px;
}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pink-400),var(--pink-600));color:#fff;font-weight:700}
.brand h1{font-size:1.15rem;margin:0}
.brand small{color:var(--ink-soft)}
h2{margin:0 0 4px;font-size:1.5rem}
.muted{color:var(--ink-soft);font-size:.9rem}
label{display:block;font-size:.9rem;margin:14px 0 6px;color:var(--ink-soft)}
input,select,textarea{
  width:100%;padding:12px 14px;border-radius:14px;font:inherit;color:var(--ink);
  border:1px solid var(--pink-200);background:rgba(255,255,255,.8);outline:none;
}
input:focus,select:focus{border-color:var(--pink-400);box-shadow:0 0 0 4px rgba(255,138,181,.18)}
.code-input{font-size:1.6rem;text-align:center;letter-spacing:.12em;text-transform:uppercase}
.btn{
  display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:600;
  padding:12px 20px;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--pink-400),var(--pink-600));
  box-shadow:0 6px 16px rgba(227,93,143,.28);
}
.btn:active{transform:translateY(1px)}
.btn-block{width:100%;font-size:1.05rem;padding:14px}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--pink-700);
  border:1px solid var(--pink-200);box-shadow:none}
.btn-sm{padding:7px 12px;font-size:.85rem}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row>*{flex:1 1 180px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{background:rgba(255,255,255,.7);border:1px solid var(--pink-200);
  border-radius:999px;padding:6px 14px;font-size:.85rem;cursor:pointer;color:var(--pink-700)}
.result{margin-top:18px}
.price-big{font-size:3rem;font-weight:700;color:var(--pink-700);line-height:1.1}
.price-old{text-decoration:line-through;color:var(--ink-soft);font-size:1.1rem}
.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.8rem;font-weight:600}
.badge-promo{background:var(--pink-200);color:var(--pink-700)}
.badge-off{background:#eee;color:#777}
.alert{padding:12px 16px;border-radius:14px;margin:12px 0;font-size:.92rem}
.alert-err{background:rgba(193,71,107,.12);color:var(--err)}
.alert-ok{background:rgba(47,158,109,.12);color:var(--ok)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--pink-100)}
th{color:var(--ink-soft);font-weight:600;font-size:.85rem}
tbody tr:hover{background:rgba(255,255,255,.5)}
.topbar{display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin-bottom:18px}
.nav a{color:var(--pink-700);text-decoration:none;margin-right:14px;font-size:.92rem}
.nav a.active{font-weight:700;text-decoration:underline}
.pager{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.pager a,.pager span{padding:6px 11px;border-radius:10px;text-decoration:none;
  color:var(--pink-700);background:rgba(255,255,255,.6)}
.pager .on{background:var(--pink-400);color:#fff}
@media (max-width:600px){ .price-big{font-size:2.4rem} .glass{padding:18px} }

/* wide admin tables scroll instead of overflowing the card */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -8px;padding:0 8px}
.table-wrap table{min-width:820px}

/* --- header / footer with logo ------------------------------------- */
.site-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:8px 0 20px}
.site-head-left{display:flex;align-items:center;gap:12px}
.logo{height:34px;width:auto;display:block}
.site-title{color:var(--ink-soft);font-size:.95rem}
.month-pill{border:1px solid var(--pink-200);background:rgba(255,255,255,.75);
  border-radius:999px;padding:6px 16px;font-size:.85rem;color:var(--pink-700)}
.site-foot{display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-top:18px;font-size:.85rem;color:var(--ink-soft)}
.site-foot a{color:var(--pink-700);text-decoration:none}

/* --- search input ---------------------------------------------------- */
.input-icon{position:relative}
.input-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;color:var(--ink-soft);
  font-size:1.2rem;line-height:1;padding:6px}

/* --- results --------------------------------------------------------- */
.result-card{margin-top:16px;background:rgba(255,255,255,.8)}
.result-code{margin:0;font-size:1.4rem}
.eyebrow{color:var(--pink-600);font-weight:700;font-size:.85rem}
.baht{font-size:1rem;font-weight:600}
.match-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.match{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border:1px solid var(--pink-200);border-radius:16px;padding:14px 16px;
  background:rgba(255,255,255,.75)}
.match-label{font-weight:700}
.match-price{font-size:1.5rem;font-weight:700;color:var(--pink-700);
  white-space:nowrap;text-align:right}
.match-old{font-size:.8rem;font-weight:400;color:var(--ink-soft);
  text-decoration:line-through}

/* login screen: header sits centred above the centred card */
.topbar-center{justify-content:center;text-align:center}
.topbar-center .brand{justify-content:center}