* { box-sizing: border-box; margin: 0; }
body { font-family: -apple-system, 'Noto Sans Thai', sans-serif; background: #0f1115; color: #e8e8ea; }
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; flex-wrap: wrap; gap: .5rem; }
h1 { font-size: 1.35rem; }
.meta { display: flex; gap: .75rem; align-items: center; color: #9aa0ab; font-size: .85rem; }
#lang-toggle { background: #232733; color: #e8e8ea; border: 1px solid #3a4050; border-radius: 6px; padding: .3rem .7rem; cursor: pointer; }
#tabs { display: flex; gap: .5rem; padding: 0 1.25rem .75rem; flex-wrap: wrap; }
.tab { background: #1a1e28; color: #cfd3db; border: 1px solid #2c3240; border-radius: 999px; padding: .45rem 1rem; cursor: pointer; }
.tab.on { background: #3557d4; color: #fff; border-color: #3557d4; }
.tab small { opacity: .65; }
main { padding: 0 1.25rem 2rem; }
h2 { margin: 1.25rem 0 .75rem; font-size: 1.05rem; color: #b9bfca; }
.stale { background: #4a3a12; color: #ffd97a; padding: .5rem .75rem; border-radius: 8px; margin-top: 1rem; font-size: .85rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.card { background: #171b24; border: 1px solid #262c39; border-radius: 10px; overflow: hidden; position: relative; }
.card:hover { border-color: #3557d4; }
.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.cover { position: relative; }
.card img, .noimg { display: block; width: 100%; aspect-ratio: 1.75 / 1; object-fit: cover; background: #10131a; }
.mc { position: absolute; top: .4rem; right: .4rem; min-width: 2rem; text-align: center; padding: .15rem .3rem; border-radius: 6px; font-weight: 700; font-size: .85rem; color: #fff; }
.mc-good { background: #2e9e44; }
.mc-mid { background: #b8860b; }
.mc-bad { background: #c0392b; }
.deku-link { position: absolute; right: .5rem; bottom: .55rem; font-size: .95rem; text-decoration: none; opacity: .65; }
.deku-link:hover { opacity: 1; }
.info { padding: .6rem 2.1rem .75rem .7rem; display: flex; flex-direction: column; gap: .3rem; }
.name { font-size: .9rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prices { display: flex; gap: .45rem; align-items: baseline; font-size: .9rem; }
.prices s { color: #7d8492; font-size: .8rem; }
.off { background: #c0392b; color: #fff; font-style: normal; font-size: .75rem; padding: .1rem .35rem; border-radius: 4px; }
.note { color: #ffd97a; font-size: .75rem; }
footer { padding: 1rem 1.25rem 2rem; color: #7d8492; font-size: .8rem; }