:root{
  --bg:#1a140d; --panel:#241b12; --panel2:#2d2216; --ink:#f3e7d2; --muted:#bfa97f;
  --gold:#d8b25a; --gold-dim:#a8853c; --line:#4a3a26; --accent:#caa24a; --free:#6fae6f; --paid:#d99a55;
  --shadow:0 6px 24px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); line-height:1.7;
  font-family:"Sarabun","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(1200px 700px at 50% -8%, #2a2013 0%, #100c07 65%);
  min-height:100vh;
}
a{color:var(--gold)}
.hidden{display:none !important}
.gold{color:var(--gold)} .muted{color:var(--muted)}
button{font-family:inherit}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px;
  padding:12px 20px; background:rgba(26,20,13,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer}
.brand .seal{font-size:1.4rem}
.brand b{color:var(--gold); font-size:1.05rem}
.topbar .spacer{flex:1}
.chip{background:var(--panel2); border:1px solid var(--line); color:var(--accent);
  border-radius:999px; padding:5px 12px; font-size:.82rem; font-weight:600}

/* ---------- buttons ---------- */
.btn{border:none; border-radius:13px; padding:13px 18px; font-size:1rem; font-weight:600; cursor:pointer; width:100%}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold-dim)); color:#231a0f}
.btn.ghost{background:var(--panel); color:var(--ink); border:1px solid var(--line)}
.btn.apple{background:#000; color:#fff; border:1px solid #333}
.btn.google{background:#fff; color:#222}
.btn.line{background:#06C755; color:#fff}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.small{width:auto; padding:9px 16px; font-size:.9rem}

/* ---------- landing ---------- */
.hero{max-width:880px; margin:0 auto; padding:54px 22px 20px; text-align:center}
.hero .ring{width:150px;height:150px;border-radius:50%;margin:0 auto 14px;
  background:radial-gradient(circle at 50% 40%, #3a2c16, #14100a 70%);
  border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; font-size:3rem;
  box-shadow:inset 0 0 30px rgba(216,178,90,.18), var(--shadow)}
.hero h1{color:var(--gold); font-size:2.1rem; margin:.2em 0 .1em}
.hero .sub{color:var(--muted); max-width:560px; margin:.4em auto 1.2em}
.hero .cta{max-width:320px; margin:0 auto}
.section{max-width:880px; margin:0 auto; padding:26px 22px}
.section h2{color:var(--gold); text-align:center; margin-bottom:4px}
.section .lead{color:var(--muted); text-align:center; margin-bottom:20px}

/* example chat cards */
.examples{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.excard{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.excard .tag{display:inline-block; font-size:.72rem; color:var(--accent); border:1px solid var(--gold-dim);
  border-radius:999px; padding:2px 10px; margin-bottom:10px}
.exq{align-self:flex-end; background:linear-gradient(180deg,#3a2c16,#2d2216); border:1px solid var(--gold-dim);
  border-radius:14px 14px 4px 14px; padding:9px 13px; margin:0 0 10px auto; max-width:90%; font-size:.92rem}
.exa{background:var(--panel2); border:1px solid var(--line); border-radius:14px 14px 14px 4px;
  padding:11px 14px; font-size:.92rem; white-space:pre-wrap}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:8px}
.step{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px}
.step .n{display:inline-flex; width:30px;height:30px; align-items:center; justify-content:center;
  border-radius:50%; background:var(--panel2); border:1px solid var(--gold-dim); color:var(--gold); font-weight:700; margin-bottom:8px}
.pricerow{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.pricecard{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 22px; text-align:center; min-width:120px}
.pricecard.best{border-color:var(--gold)}
.pricecard .c{color:var(--gold); font-size:1.4rem; font-weight:700}
.pricecard .p{color:var(--accent); font-weight:600}
.disc{color:var(--muted); font-size:.72rem; text-align:center; margin-top:18px}

/* ---------- app shell (after login) ---------- */
.app{max-width:680px; margin:0 auto; min-height:calc(100vh - 56px); display:flex; flex-direction:column}
.view{padding:18px 18px 40px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px}
label.fld{display:block; color:var(--muted); font-size:.84rem; margin:14px 0 6px}
input,select,textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel2); color:var(--ink); font:inherit; font-size:.95rem}
textarea{resize:none}
.row{display:flex; gap:10px} .row>*{flex:1}
.check{display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--muted); font-size:.88rem}

/* chat */
.chat{display:flex; flex-direction:column; height:calc(100vh - 56px)}
.chat .head{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line)}
.avatar{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#3a2c16,#14100a);
  border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center}
.msgs{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px}
.bub{max-width:82%; padding:11px 14px; border-radius:16px; font-size:.95rem; white-space:pre-wrap; line-height:1.65}
.bub.bot{align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:5px}
.bub.me{align-self:flex-end; background:linear-gradient(180deg,#3a2c16,#2d2216); border:1px solid var(--gold-dim); border-bottom-right-radius:5px}
.bub.teaser{border-color:var(--gold-dim)}
.bub .tlabel{font-size:.7rem; color:var(--accent); margin-bottom:4px}
.inbar{padding:10px 12px; border-top:1px solid var(--line); background:var(--panel)}
.inrow{display:flex; gap:8px; align-items:flex-end}
.send{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;flex:0 0 auto;
  background:linear-gradient(180deg,var(--gold),var(--gold-dim)); color:#231a0f; font-size:1.1rem}
.credline{text-align:center; color:var(--muted); font-size:.72rem; margin-top:6px}

/* reading catalog */
.prod{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:13px 15px; margin-bottom:10px; cursor:pointer}
.prod:hover{border-color:var(--gold-dim)}
.prod .ic{font-size:1.5rem}
.prod .cost{margin-left:auto; background:var(--panel2); border:1px solid var(--gold-dim); color:var(--gold);
  border-radius:999px; padding:6px 12px; font-weight:700; font-size:.85rem}

/* QR / buy */
.qrbox{background:#fff; border-radius:14px; padding:18px; width:240px; margin:14px auto; text-align:center}
.qrbox img,.qrbox canvas{width:200px;height:200px}
.refbox{display:flex; gap:8px; align-items:center}
.refbox code{flex:1; background:var(--panel2); border:1px solid var(--gold-dim); color:var(--gold);
  padding:10px 14px; border-radius:10px; font-size:1.1rem; letter-spacing:2px; text-align:center}

/* modal */
.overlay{position:fixed; inset:0; background:rgba(8,6,3,.7); display:flex; align-items:center; justify-content:center; z-index:50; padding:18px}
.modal{background:var(--panel); border:1px solid var(--gold-dim); border-radius:18px; padding:22px; max-width:380px; width:100%; box-shadow:var(--shadow)}
.modal h3{color:var(--gold); margin:0 0 8px}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#1d2a1d; border:1px solid var(--free);
  color:#d8f0d8; padding:10px 18px; border-radius:999px; z-index:60; opacity:0; transition:.3s}
.toast.show{opacity:1; bottom:36px}
.spin{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;
  animation:sp 1s linear infinite; display:inline-block; vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.typing{align-self:flex-start; color:var(--muted); font-size:.85rem; padding:6px 4px}