:root{
  --navy:#1A2530; --navy2:#2C3E50; --navy3:#3D5166;
  --gold:#C5A059; --gold-dark:#B08D3E; --gold-light:#D8B58F;
  --cream:#F9F8F4; --ink:#1A2530; --sub:#4A5661; --mute:#8B98A5;
  --line:#E5E0D8; --white:#fff;
  --ok-fg:#2e7d4f; --ok-bd:#bcdcc8; --ok-bg:#f0f8f3;
  --bad-fg:#b3362b; --bad-bd:#e4bab5; --bad-bg:#fbf1f0;
  --warn-fg:#8a6d2f; --warn-bd:#E8D9B5; --warn-bg:#FBF6E9;
  --serif:"Playfair Display", "Noto Sans Thai", serif;
  --sans:"Montserrat", "Noto Sans Thai", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
button, input, select{font-family:inherit}
button{cursor:pointer}
a{text-decoration:none; color:inherit}
img{max-width:100%}

@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}
.fade-up{animation:fadeUp .7s ease-out both}

/* ===== Utility bar ===== */
.utilbar{
  background:var(--navy); color:var(--gold-light); font-size:11px; letter-spacing:.12em;
  display:flex; align-items:center; justify-content:space-between; padding:7px 32px; gap:16px; flex-wrap:wrap;
}
.utilbar .label{text-transform:uppercase}
.utilbar .controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.utilbar select{
  background:var(--navy3); color:var(--cream); border:1px solid #3d5166; border-radius:4px;
  padding:3px 8px; font-size:11px;
}
.utilbar select.role{border-color:var(--gold)}

/* ===== Header ===== */
header.site{
  background:var(--white); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50; padding:0 32px;
}
.header-inner{
  max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:74px;
}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer; background:none; border:0; padding:0}
.brand-mark{
  width:38px; height:38px; background:var(--gold); transform:rotate(45deg);
  display:flex; align-items:center; justify-content:center; border-radius:4px; flex:none;
}
.brand-mark span{transform:rotate(-45deg); color:#fff; font-family:var(--serif); font-weight:700; font-size:18px}
.brand-text{text-align:left}
.brand-text .l1{font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink); line-height:1.1}
.brand-text .l2{font-size:10px; letter-spacing:.32em; color:var(--gold); font-weight:600; text-transform:uppercase}

nav.main{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
nav.main button{
  background:none; border:0; border-bottom:2px solid transparent;
  font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--sub);
  padding:8px 11px; letter-spacing:.02em; transition:color .15s, border-color .15s;
}
nav.main button:hover{color:var(--ink)}
nav.main button.active{color:var(--ink); font-weight:600; border-color:var(--gold)}

main{flex:1}
body > #app{min-height:100vh; display:flex; flex-direction:column}

/* ===== Hero ===== */
.hero{max-width:1280px; margin:0 auto; padding:96px 32px 72px; text-align:center}
.eyebrow{font-size:11px; letter-spacing:.3em; color:var(--gold); font-weight:600; text-transform:uppercase; margin-bottom:22px}
h1.hero-title{
  font-family:var(--serif); font-size:clamp(34px,5vw,58px); font-weight:600; line-height:1.15;
  margin:0 auto 24px; max-width:840px; color:var(--ink); text-wrap:balance;
}
.rule{width:64px; height:2px; background:var(--gold); margin:0 auto 26px}
.hero p{font-size:16px; line-height:1.75; color:var(--sub); max-width:640px; margin:0 auto 40px; text-wrap:pretty}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{
  padding:16px 32px; font-family:var(--sans); font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; border-radius:2px; border:0;
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy); color:var(--cream)}
.btn-primary:hover{box-shadow:0 6px 18px rgba(26,37,48,.25)}
.btn-outline{background:transparent; color:var(--ink); border:1px solid var(--gold)}
.btn-outline:hover{background:rgba(197,160,89,.08)}
.btn-sm{padding:13px 22px; font-size:12px; border-radius:3px}
.btn-gold{background:var(--gold); color:#fff}
.btn-gold:hover{background:var(--gold-dark)}
.btn-link{background:none; border:0; color:var(--gold); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}

/* ===== Stats ===== */
.stats{background:var(--navy); padding:36px 32px}
.stats-grid{max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center}
.stats-grid > div:nth-child(2){border-left:1px solid var(--navy3); border-right:1px solid var(--navy3)}
.stat-num{font-family:var(--serif); font-size:36px; color:var(--gold); font-weight:600}
.stat-label{font-size:11px; letter-spacing:.2em; color:var(--mute); text-transform:uppercase; margin-top:6px}

/* ===== Trust engine ===== */
.trust{max-width:1280px; margin:0 auto; padding:80px 32px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.trust h2{font-family:var(--serif); font-size:34px; font-weight:600; margin:0 0 18px; line-height:1.2}
.trust p.lead{font-size:14.5px; line-height:1.8; color:var(--sub); margin:0 0 28px; text-wrap:pretty}
.check-list{display:flex; flex-direction:column; gap:14px}
.check-item{display:flex; gap:12px; align-items:flex-start}
.check-item .tick{color:var(--gold); font-weight:700}
.check-item span.txt{font-size:13.5px; color:var(--sub); line-height:1.6}

.verify-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 2px 12px rgba(26,37,48,.06); padding:36px;
}
.verify-head{display:flex; gap:20px; align-items:center; margin-bottom:26px}
.qr{
  width:88px; height:88px; flex:none; border:1px solid var(--line); border-radius:4px; padding:8px;
  background:
    repeating-linear-gradient(0deg, var(--navy) 0 6px, #fff 6px 12px),
    repeating-linear-gradient(90deg, var(--navy) 0 6px, #fff 6px 12px);
  background-blend-mode:screen;
}
.verify-head .vt1{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink)}
.verify-head .vt2{font-size:12px; color:var(--mute); margin-top:4px}
.verify-row{display:flex; gap:10px}
.verify-row input{
  flex:1; border:1px solid var(--line); border-radius:3px; padding:13px 14px;
  font-family:var(--sans), monospace; font-size:13px; letter-spacing:.05em; outline:none; background:var(--cream);
  min-width:0;
}
.verify-hint{margin-top:20px; font-size:11px; color:var(--mute)}
.verify-result{margin-top:18px; padding:16px 18px; border-radius:5px; border:1px solid; font-size:13px}
.verify-result .vr-status{font-weight:700; margin-bottom:6px}
.verify-result .vr-name{font-weight:600; margin-bottom:4px}
.verify-result .vr-detail{line-height:1.6; opacity:.9}

/* ===== Featured / directory ===== */
.section-white{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:80px 32px}
.section-inner{max-width:1280px; margin:0 auto}
.section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:40px; gap:20px; flex-wrap:wrap}
.section-head h2{font-family:var(--serif); font-size:32px; font-weight:600; margin:0}
.cards-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px}
.spa-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  box-shadow:0 1px 6px rgba(26,37,48,.05); cursor:pointer; transition:box-shadow .2s, transform .2s;
}
.spa-card:hover{box-shadow:0 10px 28px rgba(26,37,48,.14); transform:translateY(-2px)}
.spa-img{position:relative; aspect-ratio:16/10; background:var(--line)}
.spa-img img{width:100%; height:100%; object-fit:cover; display:block}
.badge-verified{
  position:absolute; top:12px; left:12px; background:var(--gold); color:#fff;
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; border-radius:2px;
}
.badge-suspended{
  position:absolute; top:12px; left:12px; background:var(--bad-fg); color:#fff;
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; border-radius:2px;
}
.spa-body{padding:22px 24px 24px}
.spa-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.spa-name{font-family:var(--serif); font-size:19px; font-weight:600}
.spa-rating{color:var(--gold); font-size:13px; font-weight:600; white-space:nowrap}
.spa-loc{font-size:12.5px; color:var(--mute); margin-top:5px}
.spa-foot{display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid #F0EDE6}
.spa-therapists{font-size:11px; color:var(--sub); letter-spacing:.05em}
.spa-price{font-size:14px; font-weight:600; color:var(--ink)}

/* ===== Filters bar (directory) ===== */
.filters{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; align-items:center}
.filters select{
  border:1px solid var(--line); border-radius:3px; padding:10px 12px; font-size:12.5px; background:var(--white);
}
.filters .clear{font-size:12px; color:var(--gold); background:none; border:0; font-weight:600; text-decoration:underline}
.no-results{text-align:center; padding:60px 20px; color:var(--mute); font-size:14px}

/* ===== Map ===== */
.map-wrap{max-width:1280px; margin:0 auto; padding:60px 32px}
.map-canvas{
  position:relative; width:100%; aspect-ratio:16/9; background:
    linear-gradient(180deg, #223244, #1A2530);
  border-radius:8px; overflow:hidden; border:1px solid var(--navy3);
}
.map-pin{
  position:absolute; width:12px; height:12px; background:var(--gold); border-radius:50%;
  transform:translate(-50%,-50%); cursor:pointer; box-shadow:0 0 0 4px rgba(197,160,89,.25);
}
.map-pin:hover{background:#fff}
.map-label{
  position:absolute; transform:translate(-50%, -140%); background:var(--navy); color:#fff; font-size:11px;
  padding:6px 10px; border-radius:4px; white-space:nowrap; pointer-events:none; transition:opacity .15s;
  z-index:5;
}

/* ===== Modal ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(26,37,48,.6); display:flex; align-items:center; justify-content:center;
  padding:24px; z-index:200;
}
.modal{
  background:var(--white); border-radius:8px; max-width:640px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.modal-img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.modal-body{padding:28px 32px 32px}
.modal-close{
  position:absolute; top:16px; right:16px; background:rgba(26,37,48,.5); color:#fff; border:0; border-radius:50%;
  width:32px; height:32px; font-size:16px;
}
.modal-rel{position:relative}
.menu-row, .staff-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #F0EDE6; font-size:13px}
.staff-chip{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:var(--gold-light); color:var(--navy); font-size:11px; font-weight:700; margin-right:10px;
}

/* ===== Verify page / onboarding / admin ===== */
.page-wrap{max-width:1280px; margin:0 auto; padding:64px 32px}
.narrow{max-width:640px; margin:0 auto}
.ob-steps{display:flex; gap:8px; margin-bottom:40px}
.ob-step{flex:1}
.ob-bar{height:3px; border-radius:2px; margin-bottom:10px}
.ob-label{font-size:11px; letter-spacing:.05em; text-align:center}
.ob-panel{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:32px}
.field{margin-bottom:16px}
.field label{display:block; font-size:11.5px; font-weight:600; margin-bottom:6px; color:var(--sub)}
.field input, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:3px; padding:11px 13px; font-size:13.5px; outline:none;
}
.checklist-item{display:flex; gap:10px; align-items:flex-start; padding:10px 0; font-size:13px; cursor:pointer}
.ob-nav{display:flex; justify-content:space-between; margin-top:24px}

.admin-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:28px; flex-wrap:wrap}
.admin-tabs button{
  background:none; border:0; border-bottom:2px solid transparent; padding:12px 16px; font-size:13px;
}
.admin-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 0;
  border-bottom:1px solid #F0EDE6; flex-wrap:wrap;
}
table.admin-table{width:100%; border-collapse:collapse; font-size:13px}
table.admin-table th{text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); padding:8px 6px; border-bottom:1px solid var(--line)}
table.admin-table td{padding:12px 6px; border-bottom:1px solid #F0EDE6}
.pill{padding:3px 10px; border-radius:99px; font-size:10.5px; font-weight:700; letter-spacing:.05em}

/* ===== Footer ===== */
footer.site{background:var(--navy); color:var(--mute); padding:64px 32px 32px}
.footer-inner{max-width:1280px; margin:0 auto}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:44px; padding-bottom:44px; border-bottom:1px solid var(--navy3);
}
.footer-col h4{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:0 0 16px}
.footer-links{display:flex; flex-direction:column; gap:10px; font-size:12.5px}
.footer-links a{color:#C3CCD4}
.footer-links a.accent{color:var(--gold-light); font-weight:600}
.newsletter-row{display:flex; gap:8px}
.newsletter-row input{
  flex:1; background:var(--navy3); border:1px solid #3d5166; border-radius:3px; padding:11px 13px;
  font-size:12.5px; color:var(--cream); outline:none; min-width:0;
}
.footer-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:26px; font-size:11px}

@media (max-width: 900px){
  .trust{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  nav.main{display:none}
  .footer-grid{grid-template-columns:1fr}
}