.topbar .mnavw{display:flex;align-items:center;margin-left:2px}
.topbar .mnavw::before{content:"";flex:none;width:1px;height:22px;margin:0 10px 0 8px;background:rgba(255,255,255,.14)}
.topbar .mnav{display:flex;align-items:center;gap:2px}
.topbar .mnav button{position:relative;display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:#d6cdb9;font:inherit;font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;text-shadow:0 -1px 0 rgba(0,0,0,.6);transition:background .15s,color .15s}
.topbar .mnav button svg{width:16px;height:16px;flex:none;opacity:.8;transition:color .15s,opacity .15s}
.topbar .mnav button::after{content:"";position:absolute;left:50%;bottom:2px;width:0;height:2px;border-radius:2px;background:#ff3b2f;box-shadow:0 0 6px rgba(255,59,47,.9);transform:translateX(-50%);transition:width .18s}
.topbar .mnav button:hover{background:rgba(255,255,255,.08);color:#fff}
.topbar .mnav button:hover svg{opacity:1;color:#ff8d7c}
.topbar .mnav button:hover::after{width:calc(100% - 24px)}
.topbar .mnav button:active{background:rgba(255,255,255,.12)}
.topbar .mnav button:focus-visible,.topbar .navtog:focus-visible{outline:2px solid #ff8d7c;outline-offset:1px}
.topbar .navtog{display:none;align-items:center;gap:7px;margin:0;padding:7px 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.06);color:#e6dfd0;font:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer}
.topbar .navtog svg{width:16px;height:16px}
.topbar .navtog:hover{background:rgba(255,255,255,.12)}
/* ให้ช่องค้นหายืดหดได้ แถวเดียวจะได้ไม่ตกบรรทัด (เต็มที่ 300px เท่าเดิม) */
.topbar #hq{flex:100 1 150px;width:auto;min-width:130px;max-width:300px}
/* ปรับตามความกว้างจริงอัตโนมัติ (JS ใส่คลาสให้): nav-s = ตัดไอคอนให้แคบลง, nav-c = ยุบเป็นปุ่ม "เมนู" */
.topbar.nav-s .mnav button{padding:8px 9px}
.topbar.nav-s .mnav button svg{display:none}
.topbar.nav-c .mnavw::before{display:none}
.topbar.nav-c .navtog{display:inline-flex}
.topbar.nav-c .mnav{display:none;position:absolute;top:calc(100% + 6px);left:4%;z-index:30;width:min(300px,92vw);box-sizing:border-box;flex-direction:column;align-items:stretch;gap:3px;padding:10px;border-radius:14px;border:1px solid #000;background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),linear-gradient(180deg,#3a3935,#262522 48%,#1b1a18);box-shadow:0 16px 30px rgba(0,0,0,.7),0 3px 0 #0a0a09,inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px #3f3d38}
.topbar.nav-c .mnav.open{display:flex}
.topbar.nav-c .mnav button{padding:12px 12px;font-size:15px}
.topbar.nav-c .mnav button svg{display:block}
.topbar.nav-c .mnav button::after{display:none}
.mtoast{position:fixed;left:50%;bottom:28px;z-index:100001;max-width:min(92vw,420px);padding:11px 18px;border-radius:10px;border:1px solid #000;color:#e6dfd0;font:600 14px/1.4 inherit;text-align:center;background:linear-gradient(180deg,#3a3935,#1b1a18);box-shadow:0 12px 26px rgba(0,0,0,.65),0 3px 0 #0a0a09,inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px #3f3d38;transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.mtoast.on{opacity:1;transform:translate(-50%,0)}
.mtoast::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;vertical-align:1px;background:radial-gradient(circle at 35% 30%,#ffc2b8,#ff3b2f 55%,#8e0f08);box-shadow:0 0 7px 2px rgba(255,59,47,.8),0 0 0 2px #151514}
@media(prefers-reduced-motion:reduce){.topbar .mnav button,.mtoast{transition:none}}