:root{
  --lacquer:#171009; --lacquer-2:#211710; --lacquer-3:#2c1f15;
  --cream:#f2e7d3; --cream-dim:#cdbfa4;
  --gold:#e7be6a; --gold-deep:#c89a45;
  --verm:#ff6a45; --jade:#7fc8a0;
  --line:rgba(231,190,106,.2);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--lacquer); color:var(--cream);
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,"Thonburi","Noto Sans Thai",sans-serif;
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--cream)}
.top{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  max-width:980px; margin:0 auto; padding:22px 16px;
}
.mark{font-weight:700; letter-spacing:.14em; color:var(--gold)}
.mark span{letter-spacing:.04em; color:var(--gold-deep); font-weight:600}
.top nav{display:flex; gap:22px; font-size:16px; letter-spacing:.06em}
.top nav a[aria-current]{color:var(--cream); border-bottom:1px solid var(--gold-deep)}
main{max-width:980px; margin:0 auto; padding:24px 16px 64px}
h1{font-family:Georgia,"Times New Roman",serif; font-size:clamp(34px,6vw,52px); line-height:1.1; color:var(--gold); font-weight:600}
h1 span,h2 span{font-family:"Thonburi","Noto Sans Thai",sans-serif; color:var(--gold-deep); font-size:.55em; font-weight:500; margin-left:.3em}
h2{font-family:Georgia,"Times New Roman",serif; font-size:24px; color:var(--cream); font-weight:600}
.lede{margin:14px 0 36px; color:var(--cream-dim); max-width:62ch}

/* market */
.packs{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px}
.pack{background:var(--lacquer-2); border:1px solid var(--line); border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:12px}
.pack p{color:var(--cream-dim); font-size:16px}
.pack dl{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; font-size:15px}
.pack dt{font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--gold-deep)}
.pack dd{color:var(--cream)}
.acts{margin-top:auto; display:flex; gap:18px; align-items:center}
.btn,button{
  display:inline-block; font:inherit; font-size:16px; font-weight:600; letter-spacing:.06em;
  color:var(--lacquer); background:var(--gold); border:0; border-radius:8px; padding:10px 22px; cursor:pointer;
}
.btn:hover,button:hover{background:var(--cream); color:var(--lacquer)}
button[disabled]{opacity:.55; cursor:default}
.sell{margin-top:56px; max-width:560px}
.sell p{color:var(--cream-dim); margin:8px 0 18px; font-size:16px}

/* forms */
label{display:block; font-size:13px; letter-spacing:.11em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:14px}
input,textarea,select{
  display:block; width:100%; margin-top:5px; font:inherit; font-size:16px; color:var(--cream);
  background:var(--lacquer-2); border:1px solid var(--line); border-radius:8px; padding:11px 13px;
  text-transform:none; letter-spacing:0;
}
textarea{min-height:120px; resize:vertical}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(231,190,106,.12)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.status{margin-top:12px; font-size:15px; min-height:1.4em}
.status.err{color:var(--verm)} .status.ok{color:var(--gold)}

/* runner */
.run{display:grid; grid-template-columns:1fr; gap:6px; max-width:760px}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:end}
.row label{flex:1 1 220px}
.pick{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 18px}
.pick label{flex:none; margin:0; display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:15px; color:var(--cream);
  background:var(--lacquer-2); border:1px solid var(--line); border-radius:999px; padding:6px 14px; cursor:pointer}
.pick input{width:auto; margin:0; accent-color:var(--gold)}
.small{font-size:14px; color:var(--cream-dim)}
.linkish{background:none; color:var(--gold); padding:0; font-weight:500; letter-spacing:0; font-size:14px}
.linkish:hover{background:none; color:var(--cream)}
.bar{height:4px; background:var(--lacquer-3); border-radius:2px; overflow:hidden; margin:18px 0 6px}
.bar i{display:block; height:100%; width:0; background:var(--gold); transition:width .6s ease}
.score{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 8px}
.score div{background:var(--lacquer-2); border:1px solid var(--line); border-radius:10px; padding:12px 16px; min-width:150px}
.score b{display:block; font-family:Georgia,serif; font-size:30px; color:var(--gold); font-weight:600}
.score span{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-dim)}
.res{list-style:none; margin-top:18px; display:grid; gap:10px}
.res li{background:var(--lacquer-2); border:1px solid var(--line); border-left:4px solid var(--jade); border-radius:8px; padding:14px 16px}
.res li.fail{border-left-color:var(--verm)}
.res li.error{border-left-color:var(--cream-dim)}
.res .v{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--jade)}
.res .fail .v{color:var(--verm)} .res .error .v{color:var(--cream-dim)}
.res .why{margin:2px 0 6px; font-size:16px}
.res details{font-size:14px; color:var(--cream-dim)}
.res summary{cursor:pointer; color:var(--gold-deep)}
.res pre{white-space:pre-wrap; word-break:break-word; font:inherit; font-size:14px; background:var(--lacquer); border-radius:6px; padding:10px; margin-top:6px}
.dl{margin-top:22px; display:flex; gap:18px}
footer{max-width:980px; margin:0 auto; padding:0 16px 40px; font-size:15px; letter-spacing:.08em; color:var(--cream-dim)}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}
.pack h2 span{display:block; margin:4px 0 0; font-size:15px}