:root{
  --ink:#ECE8FF; --muted:#B9B4D0; --gold:#D4AF37; --gold-soft:#F9E8A6; --violet:#7C5CFF;
  --bg:#0B0A10; --panel:rgba(14,12,24,.82); --panel2:rgba(14,12,24,.76);
  --border:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Sarabun',system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink);
  background:#0B0A10; overflow-x:hidden; position:relative;
}
.has-bg{background-attachment:fixed}

/* star canvas */
#starCanvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}

/* header */
.header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background:linear-gradient(180deg, rgba(14,12,24,.92), rgba(14,12,24,.72));
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
  border-radius:0 0 20px 20px;
  box-shadow:0 10px 28px rgba(0,0,0,.55);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand-wrap{display:flex; align-items:center}
.logo{height:40px; width:auto; display:block}
.menu-toggle{display:none; background:none; border:0; cursor:pointer}
.menu-toggle span{display:block; width:22px; height:2px; margin:4px 0; background:#F9E8A6; border-radius:2px}

.nav{display:flex; flex-wrap:wrap; gap:8px}
.nav a{
  color:var(--ink); text-decoration:none; padding:8px 12px; border-radius:12px; opacity:.95;
}
.nav a:hover,
.nav a[aria-current="page"]{
  background:rgba(255,255,255,.08);
}

/* layout */
.container{max-width:1040px; width:92%; margin:130px auto 60px; position:relative; z-index:1}
.title{
  margin:0 0 12px; text-align:center; font-size:clamp(28px,4.2vw,42px);
  background:linear-gradient(90deg,var(--gold-soft),var(--gold),var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 22px rgba(212,175,55,.28);
}
.subtitle{margin:0 0 24px; text-align:center; color:var(--muted)}

/* form + card */
.form{
  background:var(--panel2); border:1px solid var(--border); border-radius:22px;
  padding:22px; backdrop-filter:blur(14px); box-shadow:0 10px 34px rgba(0,0,0,.65);
  display:grid; gap:16px;
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
.field label{display:block; margin-bottom:6px; color:var(--gold-soft); font-weight:700}
.input{
  height:46px; width:100%; padding:10px 14px; border-radius:14px;
  background:rgba(20,18,28,.92); border:1px solid var(--border); color:var(--ink); appearance:none;
}
.input::placeholder{color:#9F99B9}
.input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(212,175,55,.45)}
select.input{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23D4AF37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer;
}
select.input option{background:#0E0C18; color:var(--ink)}

.card{
  margin-top:24px; border-radius:22px; background:var(--panel); border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,.72); padding:16px; backdrop-filter:blur(12px)
}
canvas{width:100%!important; height:min(440px,55vh)!important}

/* กล่องคะแนน */
.preds{margin-top:16px}
.pred-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pitem{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:16px; padding:14px;
  background:linear-gradient(180deg, rgba(18,16,28,.66), rgba(18,16,28,.52));
}
.phead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.pname{font-weight:800; color:#FFF}
.prow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px}
.pscore{font-weight:800; color:#FFE6A6; margin-right:auto; text-shadow:0 1px 1px rgba(0,0,0,.4)}
.desc{color:#f1eefc}
.note{color:#d4d0ea}

/* ไฮไลต์คะแนนสูง */
.pitem.luxe{
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(18,16,28,.72), rgba(18,16,28,.58)) padding-box,
    linear-gradient(135deg, #f9e8a6, #d4af37, #7c5cff) border-box;
  box-shadow:
    0 10px 28px rgba(0,0,0,.42),
    0 0 22px rgba(212,175,55,.25),
    inset 0 0 30px rgba(212,175,55,.08);
}
.pitem.luxe::after{
  content:"";
  position:absolute; inset:-60% -20% auto -20%; height:120%;
  background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.10), rgba(255,255,255,.0));
  transform:rotate(18deg); animation:shine 5s ease-in-out infinite;
}
@keyframes shine{
  0%{ transform:translateX(-40%) rotate(18deg); opacity:.12 }
  60%{ transform:translateX(130%) rotate(18deg); opacity:.20 }
  100%{ transform:translateX(130%) rotate(18deg); opacity:0 }
}

/* footer */
.footer{
  margin-top:26px; padding:18px 0 24px; text-align:center; color:#a7a3be; font-size:.92rem;
  background:linear-gradient(180deg, rgba(14,12,24,.88), rgba(14,12,24,.0));
  border-top:1px solid var(--border); border-radius:22px 22px 0 0
}
.footer-logo{height:36px; display:block; margin:0 auto 8px}

/* SEO copy / FAQ */
.seo-copy{
  margin-top:18px; color:var(--muted); line-height:1.7;
}
.seo-copy h2{
  margin:0 0 6px; color:var(--ink); font-size:1.18rem;
}
.seo-copy h3{
  margin:14px 0 4px; color:var(--gold-soft); font-size:1.02rem;
}
.seo-copy a{
  color:var(--gold-soft); text-decoration:underline;
}
.seo-copy a:hover{
  color:#fff;
}

/* Responsive */
@media (max-width: 900px){
  .menu-toggle{display:block}
  .nav{
    position:absolute; top:58px; right:12px; left:12px; padding:10px;
    background:rgba(14,12,24,.95); border:1px solid var(--border); border-radius:16px;
    display:grid; grid-template-columns:1fr 1fr; gap:6px; box-shadow:0 10px 24px rgba(0,0,0,.5)
  }
  .nav[data-collapsed="true"]{display:none}
  .container{margin-top:120px}
}
@media (max-width: 600px){
  .nav{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .pred-grid{grid-template-columns:1fr}
}