/* ===== เครื่องมือ > API ร้านค้า (/tools#api) ===== */
.ax { --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ink: #0f172a; --r: 24px; }
.ax code { font-family: var(--mono); font-size: .86em; }
.ax [hidden] { display: none !important; }

/* หัวหน้าเครื่องมือย่อเล็กลงตอนเปิด API (ไม่ให้มีหัวสีเข้มซ้อน 2 ชั้น) */
.tl-hero.tl-mini { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: 22px; margin-bottom: 14px; }
.tl-hero.tl-mini .tl-ttl p { display: none; }
.tl-hero.tl-mini .tl-ttl h1 { font-size: 1.25rem; }
.tl-hero.tl-mini .tl-badge { width: 40px; height: 40px; border-radius: 13px; }
.tl-hero.tl-mini .tl-pick { margin-top: 0; flex: 0 1 360px; }

/* ---------- ปุ่ม / ตัวช่วยร่วม ---------- */
.ax-btn { height: 46px; padding: 0 20px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: .88rem; font-weight: 700;
  cursor: pointer; text-decoration: none; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; transition: transform .2s, box-shadow .2s, background .2s; }
.ax-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }
.ax-btn svg { width: 17px; height: 17px; }
.ax-btn.pri { position: relative; overflow: hidden; border: none; background: var(--grad); color: #fff; box-shadow: 0 14px 28px -12px rgba(225,29,46,.8); }
.ax-btn.pri::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: ax-sweep 3.6s ease-in-out infinite; }
@keyframes ax-sweep { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.ax-btn.ghost { border-color: var(--line); background: #fff; color: var(--ink); }
.ax-btn.ghost:hover { background: var(--soft); }
.ax-btn.sm { height: 40px; padding: 0 16px; font-size: .82rem; border-radius: 12px; }
.ax-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ax-cp { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: #334155; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; flex: none; transition: .15s; }
.ax-cp:hover { border-color: var(--primary); color: var(--primary); }
.ax-cp svg { width: 15px; height: 15px; }
.ax-cp.dk { width: 32px; height: 32px; padding: 0; justify-content: center; border: none; background: rgba(255,255,255,.07); color: #a1a1aa; }
.ax-cp.dk:hover { background: rgba(255,255,255,.15); color: #fff; }
.ax-panel { padding: 20px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 40px -30px rgba(15,23,42,.25); }
.ax-panel h4 { display: flex; align-items: center; gap: 8px; font-size: .95rem; margin-bottom: 14px; }
.ax-panel h4 svg { width: 18px; height: 18px; color: var(--primary); }

/* ---------- หัว ---------- */
.ax-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center;
  padding: 36px; border-radius: 30px; color: #fff; background: #0e0508; box-shadow: 0 40px 70px -40px rgba(60,5,12,.7); }
.ax-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 60% 40%, #000, transparent); mask-image: radial-gradient(ellipse 70% 80% at 60% 40%, #000, transparent); }
.ax-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.ax-orb.a { width: 420px; height: 420px; left: -120px; top: -160px; background: rgba(225,29,46,.55); animation: ax-orb 14s ease-in-out infinite alternate; }
.ax-orb.b { width: 360px; height: 360px; right: -100px; bottom: -180px; background: rgba(255,122,69,.3); animation: ax-orb 18s ease-in-out infinite alternate-reverse; }
@keyframes ax-orb { to { transform: translate(80px, 60px) scale(1.15); } }
.ax-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; font-size: .74rem; font-weight: 700; letter-spacing: .3px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fecdd3; }
.ax-chip svg { width: 14px; height: 14px; color: #fbbf24; animation: ax-zap 2.6s ease-in-out infinite; }
@keyframes ax-zap { 0%, 80%, 100% { transform: none; } 86% { transform: scale(1.35) rotate(-14deg); } 92% { transform: scale(.9); } }
.ax-hl h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -.8px; margin-top: 16px; }
.ax-grad { background: linear-gradient(90deg, #ff8a95, #ff4d5e 35%, #ffb38a 70%, #ff8a95); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ax-shine 6s linear infinite; }
@keyframes ax-shine { to { background-position: -200% 0; } }
.ax-hl p { font-size: .92rem; line-height: 1.65; color: rgba(255,255,255,.68); margin-top: 12px; max-width: 460px; }
.ax-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.ax-stats { display: flex; margin-top: 26px; max-width: 440px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.ax-stats div { flex: 1; padding: 12px 16px; }
.ax-stats div + div { border-left: 1px solid rgba(255,255,255,.08); }
.ax-stats b { display: block; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ax-stats small { font-size: .7rem; color: rgba(255,255,255,.5); }
.ax-win { border-radius: 20px; background: rgba(10,10,14,.72); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(10px); overflow: hidden;
  transform: perspective(1200px) rotateY(-6deg) rotateX(3deg); transition: transform .6s ease; }
.ax-win:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.ax-tbar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ax-tbar > i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; flex: none; } .ax-tbar > i:nth-child(2) { background: #febc2e; } .ax-tbar > i:nth-child(3) { background: #28c840; }
.ax-tbar small { margin-left: 8px; font: 600 .7rem var(--mono); color: rgba(255,255,255,.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-flow { display: flex; align-items: center; gap: 4px; padding: 18px 18px 6px; }
.ax-node { flex: none; display: grid; justify-items: center; gap: 7px; width: 78px; text-align: center; }
.ax-node span { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fda4af; }
.ax-node span svg { width: 21px; height: 21px; }
.ax-node b { font-size: .66rem; font-weight: 700; color: rgba(255,255,255,.6); }
.ax-node.core span { width: 56px; height: 56px; border-radius: 18px; background: var(--grad); color: #fff; border: none; animation: ax-pulse 2.2s ease-out infinite; }
.ax-node.core span svg { width: 26px; height: 26px; animation: ax-spin 8s linear infinite; }
@keyframes ax-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,94,.6); } 70% { box-shadow: 0 0 0 16px rgba(255,77,94,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,94,0); } }
@keyframes ax-spin { 50% { transform: rotate(180deg) scale(.9); } to { transform: rotate(360deg); } }
.ax-wire { position: relative; flex: 1; min-width: 24px; height: 2px; margin-bottom: 22px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 5px, transparent 5px 10px); }
.ax-wire i { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #ff8a95; box-shadow: 0 0 10px #ff4d5e; animation: ax-run 2.4s linear infinite; }
.ax-wire i:nth-child(2) { animation-delay: .8s; } .ax-wire i:nth-child(3) { animation-delay: 1.6s; }
.ax-wire.back i { background: #86efac; box-shadow: 0 0 10px #22c55e; animation-delay: 1.2s; }
.ax-wire.back i:nth-child(2) { animation-delay: 2s; } .ax-wire.back i:nth-child(3) { animation-delay: 2.8s; }
@keyframes ax-run { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.ax-win pre { margin: 0; padding: 12px 18px 18px; min-height: 168px; font: 500 .74rem/1.75 var(--mono); color: #e4e4e7; white-space: pre-wrap; word-break: break-all; }
.ax-win .cur { display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #ff8a95; animation: ax-blink 1s steps(1) infinite; }
@keyframes ax-blink { 50% { opacity: 0; } }

/* ---------- เมนูในหน้า ---------- */
.ax-nav { position: sticky; top: 86px; z-index: 20; display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 18px auto 6px; padding: 5px; border-radius: 16px; overflow-x: auto; scrollbar-width: none;
  background: rgba(255,255,255,.82); border: 1px solid var(--line); box-shadow: 0 12px 30px -16px rgba(15,23,42,.3); backdrop-filter: blur(14px) saturate(1.4); }
.ax-nav::-webkit-scrollbar { display: none; }
.ax-nav a { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 12px; font-size: .82rem; font-weight: 700; color: #64748b; text-decoration: none; transition: color .25s; }
.ax-nav a svg { width: 15px; height: 15px; }
.ax-nav a:hover { color: var(--ink); }
.ax-nav a.on { color: #fff; }
.ax-ind { position: absolute; z-index: 0; top: 5px; left: 0; height: 38px; width: 0; border-radius: 12px; background: var(--ink); box-shadow: 0 8px 18px -8px rgba(15,23,42,.6); transition: transform .35s cubic-bezier(.3,.8,.3,1), width .35s cubic-bezier(.3,.8,.3,1); }

/* ---------- หัวข้อแต่ละส่วน ---------- */
.ax-sec { padding-top: 34px; scroll-margin-top: 140px; }
.ax-sh { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ax-sh > span { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font: 800 .9rem var(--mono); color: var(--primary);
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: 0 10px 22px -12px rgba(225,29,46,.6); }
.ax-sh > span.ac-live { width: auto; height: 28px; border: none; box-shadow: none; background: #ecfdf3; color: #16a34a; font-family: inherit; font-size: .68rem; font-weight: 800; }
.ax-sh > div { flex: 1; min-width: 0; }
.ax-sh h3 { font-size: 1.28rem; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.ax-sh p { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.ax-sh p code { background: var(--soft); padding: 1px 6px; border-radius: 6px; color: var(--ink); }
.ax-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.ax-rv.in { opacity: 1; transform: none; }

/* ---------- ไทม์ไลน์ ---------- */
.ax-tl { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0; }
.ax-tl::before, .ax-tl::after { content: ''; position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px; background: var(--line); }
.ax-tl::after { right: auto; width: 0; background: var(--grad); transition: width 1.6s cubic-bezier(.4,0,.2,1) .3s; }
.ax-sec.in .ax-tl::after { width: 75%; }
.ax-tl li { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.ax-dot { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 0 0 6px var(--bg), 0 14px 26px -10px rgba(225,29,46,.7);
  transform: scale(.6); opacity: 0; transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .4s; }
.ax-sec.in .ax-dot { transform: none; opacity: 1; }
.ax-tl li:nth-child(2) .ax-dot { transition-delay: .45s; } .ax-tl li:nth-child(3) .ax-dot { transition-delay: .9s; } .ax-tl li:nth-child(4) .ax-dot { transition-delay: 1.35s; }
.ax-dot svg { width: 23px; height: 23px; }
.ax-tl b { display: block; font-size: .95rem; color: var(--ink); }
.ax-tl p { font-size: .78rem; line-height: 1.55; color: var(--muted); margin-top: 4px; }
.ax-tl code { background: var(--tint); color: var(--primary-dark); padding: 1px 5px; border-radius: 5px; white-space: nowrap; }
.ax-base { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ax-bl { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .5px; }
.ax-bl svg { width: 14px; height: 14px; }
.ax-base code { flex: 1; min-width: 0; font-size: .86rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- รายการสินค้า ---------- */
.ac-live { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; background: #ecfdf3; color: #16a34a; font-size: .68rem; font-weight: 800; letter-spacing: .6px; flex: none; }
.ac-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ac-ping 1.8s ease-out infinite; }
@keyframes ac-ping { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.ac-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ac-q { flex: 1 1 260px; }
.ac-q input { font-family: inherit; }
.ac-only { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--line); font-size: .82rem; font-weight: 600; cursor: pointer; user-select: none; }
.ac-only input { accent-color: var(--primary); width: 16px; height: 16px; }
.ac-chips { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.ac-chips::-webkit-scrollbar { display: none; }
.ac-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 6px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: .8rem; font-weight: 600; color: #334155; cursor: pointer; transition: .2s; }
.ac-chip img, .ac-chip .ac-all { width: 24px; height: 24px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: var(--soft); color: var(--ink); }
.ac-chip .ac-all svg { width: 14px; height: 14px; }
.ac-chip em { font-style: normal; font-size: .68rem; color: var(--muted); }
.ac-chip:hover { border-color: #fecdd3; transform: translateY(-1px); }
.ac-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; } .ac-chip.on em { color: rgba(255,255,255,.6); } .ac-chip.on .ac-all { background: rgba(255,255,255,.15); color: #fff; }
.ac-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 14px; font-size: .74rem; color: var(--muted); }
.ac-legend span { display: inline-flex; align-items: center; gap: 6px; } .ac-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ac-legend b { color: var(--ink); }
.at-wrap { overflow: auto; max-height: 560px; border: 1px solid var(--line); border-radius: 18px; overscroll-behavior: contain; }
.at { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8rem; min-width: 720px; }
.at th { position: sticky; top: 0; z-index: 1; padding: 11px 12px; background: var(--soft); text-align: left; font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--line); }
.at th i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; background: var(--c); margin-right: 6px; vertical-align: 1px; }
.at th.me { color: var(--primary); }
.at td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; background: #fff; transition: background .15s; }
.at tbody tr:last-child td { border-bottom: none; }
.at tbody tr { animation: ax-row .35s ease both; animation-delay: var(--d, 0ms); }
@keyframes ax-row { from { opacity: 0; transform: translateX(-6px); } }
.at tbody tr:hover td { background: #fff7f8; }
.at tr.out td { color: #94a3b8; } .at tr.out .at-p img { filter: grayscale(.8); opacity: .6; }
.at .r { text-align: right; white-space: nowrap; } .at .c { text-align: center; }
.at td.r b { font-variant-numeric: tabular-nums; font-size: .86rem; }
.at td.t b { color: var(--c); }
.at td.me { background: #fff1f2; } .at td.me b { color: var(--primary); }
.at td em { display: block; font-style: normal; font-size: .64rem; font-weight: 800; color: #16a34a; }
.at th:first-child, .at td:first-child { position: sticky; left: 0; z-index: 1; }
.at th:first-child { z-index: 2; }
.at-p { display: flex; align-items: center; gap: 10px; min-width: 230px; max-width: 320px; }
.at-p img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; background: var(--soft); transition: transform .3s; }
.at tbody tr:hover .at-p img { transform: scale(1.08) rotate(-2deg); }
.at-p div { min-width: 0; }
.at-p b { display: block; font-size: .82rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-p small { font-size: .7rem; color: var(--primary); font-weight: 600; }
.at-st { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: .7rem; font-weight: 800; }
.at-st.ok { background: #ecfdf3; color: #15803d; } .at-st.no { background: #f1f5f9; color: #94a3b8; }
.at-st.ok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ax-live 1.6s ease-in-out infinite; }
@keyframes ax-live { 50% { opacity: .3; } }
.ac-id { width: 150px; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px dashed var(--line); background: #fff; display: inline-flex; align-items: center; gap: 6px; font: 600 .68rem var(--mono); color: var(--muted); cursor: pointer; }
.ac-id span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-id svg { width: 13px; height: 13px; flex: none; }
.ac-id:hover { border-color: var(--primary); color: var(--primary); }
.ac-buy { height: 32px; padding: 0 12px; border-radius: 9px; border: none; background: var(--ink); color: #fff; font: inherit; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: .15s; }
.ac-buy:hover { background: var(--primary); }
.ac-buy svg { width: 13px; height: 13px; }
.ac-buy:disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; }
.ac-sk { height: 360px; border-radius: 18px; background: linear-gradient(90deg, var(--soft) 25%, #fff 50%, var(--soft) 75%); background-size: 200% 100%; animation: ac-sk 1.2s linear infinite; }
@keyframes ac-sk { to { background-position: -200% 0; } }
.ac-empty { text-align: center; padding: 30px; color: var(--muted); font-size: .84rem; }
.ac-more { display: flex; justify-content: center; margin-top: 14px; }

/* ---------- API Key ---------- */
.ax-kstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ax-kstats div { position: relative; padding: 14px 16px 14px 60px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.ax-kstats svg { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin-top: -16px; padding: 5px; border-radius: 9px; background: var(--tint); color: var(--primary); box-sizing: content-box; }
.ax-kstats small { display: block; font-size: .7rem; color: var(--muted); }
.ax-kstats b { display: block; font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ax-key { position: relative; overflow: hidden; padding: 16px 18px 16px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: transform .25s, box-shadow .25s, border-color .25s; animation: ax-pop .4s ease both; animation-delay: var(--d, 0ms); }
.ax-key::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
.ax-key.off::before { background: #cbd5e1; }
.ax-key:hover { transform: translateY(-3px); border-color: #fecdd3; box-shadow: 0 20px 40px -24px rgba(225,29,46,.5); }
@keyframes ax-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.ax-key.off { background: var(--soft); }
.ax-kh { display: flex; align-items: center; gap: 12px; }
.ax-kic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--tint); color: var(--primary); }
.ax-key.off .ax-kic { background: #e2e8f0; color: #94a3b8; }
.ax-kic svg { width: 19px; height: 19px; }
.ax-kn { flex: 1; min-width: 0; }
.ax-kn b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .92rem; color: var(--ink); }
.ax-kn code { display: block; margin-top: 4px; font-size: .76rem; color: var(--muted); letter-spacing: .4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-pill { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 99px; font-size: .64rem; font-weight: 800; font-style: normal; }
.ax-pill.ok { background: #ecfdf3; color: #16a34a; } .ax-pill.off { background: #e2e8f0; color: #64748b; } .ax-pill.lock { background: #eff6ff; color: #2563eb; }
.ax-pill.ok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ax-live 1.6s ease-in-out infinite; }
.ax-pill svg { width: 11px; height: 11px; }
.ax-acts { display: flex; gap: 6px; flex: none; }
.ax-acts button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: #475569; display: grid; place-items: center; cursor: pointer; transition: .15s; }
.ax-acts button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.ax-acts button.d:hover { background: #dc2626; border-color: #dc2626; }
.ax-acts svg { width: 15px; height: 15px; }
.ax-meta { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ax-meta div { min-width: 0; }
.ax-meta small { display: block; font-size: .66rem; color: var(--muted); }
.ax-meta b { display: block; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ax-hero2 { grid-column: 1 / -1; position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px; padding: 26px 28px; border-radius: var(--r);
  background: radial-gradient(70% 140% at 100% 0%, #ffe4e6, transparent 60%), linear-gradient(120deg, #fff, #fff7f8); border: 1px solid #fecdd3; }
.ax-hero2 .ax-big { position: relative; flex: none; width: 80px; height: 80px; border-radius: 24px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 18px 30px -12px rgba(225,29,46,.7); animation: ax-float 3.4s ease-in-out infinite; }
.ax-hero2 .ax-big svg { width: 36px; height: 36px; }
.ax-hero2 .ax-big::after { content: ''; position: absolute; inset: -9px; border-radius: 30px; border: 2px dashed #fda4af; animation: ax-spin 14s linear infinite; }
@keyframes ax-float { 50% { transform: translateY(-7px); } }
.ax-hero2 > div { flex: 1; min-width: 0; }
.ax-hero2 b { display: block; font-size: 1.1rem; color: var(--ink); }
.ax-hero2 p { font-size: .84rem; color: var(--muted); margin-top: 4px; }
.ax-hero2 .ax-btn { flex: none; }

/* ---------- ทดลองยิง ---------- */
.ax-pg { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 30px 60px -40px rgba(15,23,42,.45); }
.ax-pgl { padding: 22px; }
.ax-l { display: block; font-size: .76rem; font-weight: 700; color: #334155; margin: 16px 0 7px; }
.ax-pgl > .ax-l:first-child { margin-top: 0; }
.ax-in { position: relative; display: flex; align-items: center; height: 46px; border-radius: 13px; border: 1px solid var(--line); background: #fff; transition: .15s; }
.ax-in:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(225,29,46,.12); }
.ax-in > svg { width: 17px; height: 17px; margin: 0 4px 0 14px; color: #94a3b8; flex: none; }
.ax-in input, .ax-in select { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: none; padding: 0 10px; font: 500 .86rem var(--mono); color: var(--ink); }
.ax-in select { font-family: inherit; cursor: pointer; }
.ax-in button { width: 38px; height: 38px; margin-right: 4px; border: none; border-radius: 10px; background: none; color: #64748b; display: grid; place-items: center; cursor: pointer; }
.ax-in button:hover { background: var(--soft); }
.ax-in button svg { width: 17px; height: 17px; }
.ax-eps { display: grid; gap: 4px; padding: 4px; border-radius: 16px; background: var(--soft); }
.ax-ep { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: none; background: none; cursor: pointer; font: inherit; text-align: left; transition: background .2s, box-shadow .2s; min-width: 0; }
.ax-ep:hover { background: rgba(255,255,255,.7); }
.ax-ep.on { background: #fff; box-shadow: 0 4px 14px -6px rgba(15,23,42,.25); }
.ax-ep code { font-size: .76rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-ep small { margin-left: auto; font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-m { flex: none; width: 44px; height: 21px; border-radius: 6px; display: grid; place-items: center; font: 800 .6rem var(--mono); letter-spacing: .5px; }
.ax-m.get { background: #dcfce7; color: #15803d; } .ax-m.post { background: #ffedd5; color: #c2410c; }
.ax-agree { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; font-size: .8rem; color: #9a3412; cursor: pointer; }
.ax-agree input { margin-top: 2px; accent-color: #ea580c; width: 16px; height: 16px; flex: none; }
.ax-send { position: relative; overflow: hidden; width: 100%; height: 52px; margin-top: 18px; border: none; border-radius: 15px; background: var(--grad); color: #fff; font: inherit; font-size: .95rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 16px 30px -14px rgba(225,29,46,.85); transition: transform .15s, box-shadow .2s; }
.ax-send:hover { transform: translateY(-1px); box-shadow: 0 20px 34px -14px rgba(225,29,46,.95); }
.ax-send:active { transform: translateY(1px); }
.ax-send svg { width: 18px; height: 18px; transition: transform .3s; }
.ax-send:hover svg { transform: translate(3px, -3px); }
.ax-send kbd { position: absolute; right: 14px; font: 600 .64rem var(--mono); padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.18); }
.ax-send.busy { pointer-events: none; }
.ax-send.busy::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); animation: ax-load 1s linear infinite; }
@keyframes ax-load { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ax-con { position: relative; display: flex; flex-direction: column; min-height: 520px; background: #0b0b10; }
.ax-con .ax-tbar #pgUrl { flex: 1; }
.ax-st { flex: none; height: 22px; padding: 0 8px; border-radius: 6px; display: grid; place-items: center; font: 800 .7rem var(--mono); }
.ax-st.ok { background: rgba(34,197,94,.15); color: #4ade80; } .ax-st.wait { background: rgba(234,179,8,.15); color: #facc15; } .ax-st.bad { background: rgba(239,68,68,.15); color: #f87171; }
#pgMs { flex: none; margin: 0 4px; }
.ax-cwait { flex: 1; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 30px; text-align: center; color: #71717a; }
.ax-cwait span { position: relative; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #fda4af; margin-bottom: 8px; }
.ax-cwait span::before, .ax-cwait span::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(255,77,94,.5); animation: ax-wave 2.4s ease-out infinite; }
.ax-cwait span::after { animation-delay: 1.2s; }
@keyframes ax-wave { from { transform: scale(1); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.ax-cwait svg { width: 28px; height: 28px; }
.ax-cwait b { color: #e4e4e7; font-size: .95rem; }
.ax-cwait small { font-size: .78rem; max-width: 260px; }
#pgOut { flex: 1; margin: 0; padding: 16px 18px; max-height: 560px; overflow: auto; font: 500 .76rem/1.7 var(--mono); color: #e4e4e7; white-space: pre; animation: ax-pop .3s ease; }
.j-k { color: #fda4af; } .j-s { color: #86efac; } .j-n { color: #93c5fd; } .j-b { color: #fcd34d; } .j-c { color: #71717a; } .j-x { color: #c4b5fd; }

/* ---------- เอกสาร ---------- */
.ax-dc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.ax-dl { position: sticky; top: 150px; display: grid; gap: 4px; padding: 6px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.ax-di { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 14px; border: none; background: none; cursor: pointer; font: inherit; text-align: left; transition: background .2s; }
.ax-di:hover { background: var(--soft); }
.ax-di.on { background: var(--ink); }
.ax-di code { font-size: .78rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-di small { grid-column: 2; font-size: .7rem; color: var(--muted); }
.ax-di.on code { color: #fff; } .ax-di.on small { color: rgba(255,255,255,.55); }
.ax-dd { min-width: 0; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); animation: ax-pop .35s ease; }
.ax-ddh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ax-ddh code { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.ax-ddh h4 { flex-basis: 100%; font-size: 1.1rem; margin-top: 6px; }
.ax-dd > p { font-size: .86rem; line-height: 1.65; color: #334155; margin-top: 8px; }
.ax-dd h5 { font-size: .72rem; font-weight: 800; color: var(--muted); letter-spacing: .4px; margin: 18px 0 8px; }
.ax-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; table-layout: fixed; }
.ax-tbl td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.ax-tbl tr:first-child td { border-top: none; }
.ax-tbl tr:nth-child(odd) td { background: #fafbfd; }
.ax-tbl td:first-child { width: 36%; font-family: var(--mono); font-weight: 700; color: var(--primary-dark); }
.ax-tbl em { display: inline-block; font-style: normal; font-size: .64rem; color: var(--muted); margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: var(--soft); font-family: inherit; font-weight: 700; }
.ax-ex { position: relative; border-radius: 16px; background: #0b0b10; overflow: hidden; }
.ax-ex pre { margin: 0; padding: 14px 16px; max-height: 340px; overflow: auto; font: 500 .74rem/1.65 var(--mono); color: #e4e4e7; }
.ax-try { margin-top: 16px; height: 40px; padding: 0 16px; border-radius: 12px; border: none; background: var(--ink); color: #fff; font: inherit; font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; transition: .15s; }
.ax-try:hover { background: var(--primary); }
.ax-try svg { width: 15px; height: 15px; }
.ax-cw { margin-top: 18px; }
.ax-cwh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ax-cwh b { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; }
.ax-cwh b svg { width: 18px; height: 18px; color: var(--primary); }
.ax-tabs { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 13px; background: var(--soft); }
.ax-tabs button { position: relative; z-index: 1; height: 32px; padding: 0 14px; border-radius: 10px; border: none; background: none; font: inherit; font-size: .76rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: color .25s; }
.ax-tabs button.on { color: var(--ink); }
.ax-tind { position: absolute; z-index: 0; top: 4px; left: 0; height: 32px; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.1); transition: transform .3s cubic-bezier(.3,.8,.3,1), width .3s; }
.ax-code { position: relative; border-radius: 20px; background: #0b0b10; border: 1px solid #1f1f28; }
.ax-code .ax-cp { position: absolute; top: 12px; right: 12px; }
.ax-code pre { margin: 0; padding: 18px 56px 18px 20px; max-height: 480px; overflow: auto; font: 500 .76rem/1.7 var(--mono); color: #e4e4e7; }
.ax-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; align-items: start; }
.ax-codes { display: grid; gap: 6px; }
.ax-codes div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; background: var(--soft); transition: transform .2s; }
.ax-codes div:hover { transform: translateX(4px); }
.ax-codes em { flex: none; width: 50px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 800 .8rem var(--mono); font-style: normal; }
.ax-codes em.ok { background: #dcfce7; color: #15803d; } .ax-codes em.wait { background: #fef9c3; color: #a16207; } .ax-codes em.bad { background: #fee2e2; color: #b91c1c; }
.ax-codes span { font-size: .76rem; color: var(--muted); } .ax-codes b { display: block; font-size: .84rem; color: var(--ink); }
.ax-faq { display: grid; gap: 8px; }
.ax-faq details { border-radius: 14px; background: var(--soft); padding: 0 14px; transition: background .2s; }
.ax-faq details[open] { background: #fff1f2; }
.ax-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; font-size: .86rem; font-weight: 700; cursor: pointer; }
.ax-faq summary::-webkit-details-marker { display: none; }
.ax-faq summary::after { content: '+'; flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #fff; font-size: 1rem; color: var(--primary); transition: transform .25s; }
.ax-faq details[open] summary::after { transform: rotate(45deg); }
.ax-faq p { padding-bottom: 13px; font-size: .8rem; line-height: 1.65; color: #475569; }

/* ---------- ป๊อปอัป ---------- */
.ap-dlg { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); overflow: auto; border: none; padding: 0; border-radius: 26px;
  width: min(460px, calc(100vw - 32px)); box-shadow: 0 40px 80px -20px rgba(0,0,0,.45); font-family: inherit; color: #0f172a; }
.ap-dlg::backdrop { background: rgba(12,12,16,.55); backdrop-filter: blur(5px); }
.ap-dlg[open] { animation: ax-pop .25s ease; }
.ap-dh { display: flex; align-items: center; gap: 12px; padding: 22px 22px 0; }
.ap-dh > div { flex: 1; } .ap-dh b { display: block; font-size: 1.04rem; } .ap-dh small { font-size: .78rem; color: var(--muted); }
.ap-x { width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--soft); color: #475569; display: grid; place-items: center; cursor: pointer; }
.ap-x svg { width: 16px; height: 16px; }
.ap-db { padding: 18px 22px; display: grid; gap: 14px; }
.ap-db > div > label { display: block; font-size: .78rem; font-weight: 700; color: #334155; margin-bottom: 6px; }
.ap-in { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); font: inherit; font-size: .9rem; outline: none; transition: .15s; }
textarea.ap-in { height: auto; min-height: 84px; padding: 12px 14px; resize: vertical; font: 500 .82rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ap-in:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(225,29,46,.12); }
.ap-hint { font-size: .72rem; color: #94a3b8; margin-top: 5px; } .ap-hint a { color: var(--primary); font-weight: 700; }
.ap-sw { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; }
.ap-sw div { flex: 1; } .ap-sw b { display: block; font-size: .86rem; } .ap-sw small { font-size: .74rem; color: var(--muted); }
.ap-sw input { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: #e2e8f0; position: relative; cursor: pointer; transition: .2s; flex: none; }
.ap-sw input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s; }
.ap-sw input:checked { background: var(--primary); } .ap-sw input:checked::after { left: 21px; }
.ap-df { display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 22px; }
.ap-b { height: 44px; padding: 0 18px; border-radius: 13px; font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; color: #27272a; }
.ap-b.red { border: none; background: var(--grad); color: #fff; box-shadow: 0 12px 22px -10px rgba(225,29,46,.7); }
.ap-b:disabled { opacity: .6; cursor: wait; }
.ap-b svg { width: 16px; height: 16px; }
.ap-reveal { border-radius: 16px; padding: 14px; background: #0b0b10; display: flex; align-items: center; gap: 10px; }
.ap-reveal code { flex: 1; min-width: 0; font: 600 .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #fff; word-break: break-all; }
.ap-warn, .ap-ok { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: .8rem; font-weight: 600; }
.ap-warn { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.ap-ok { background: #ecfdf3; border: 1px solid #bbf7d0; color: #15803d; }
.ap-warn svg, .ap-ok svg { width: 17px; height: 17px; flex: none; }

@media (prefers-reduced-motion: reduce) { .ax *, .ax *::before, .ax *::after { animation: none !important; transition: none !important; } .ax-rv { opacity: 1; transform: none; } .ax-dot { opacity: 1; transform: none; } .ax-tl::after { width: 75%; } }
@media (max-width: 980px) {
  .ax-hero { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .ax-win { transform: none; }
  .ax-pg { grid-template-columns: minmax(0, 1fr); } .ax-con { min-height: 360px; }
  .ax-dc { grid-template-columns: minmax(0, 1fr); }
  .ax-dl { position: static; display: flex; overflow-x: auto; scrollbar-width: none; } .ax-dl::-webkit-scrollbar { display: none; }
  .ax-di { flex: none; } .ax-di small { display: none; }
  .ax-2 { grid-template-columns: minmax(0, 1fr); }
  .ax-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tl-hero.tl-mini .tl-pick { flex-basis: 100%; }
  .ax-hero { padding: 22px 18px; border-radius: 24px; gap: 22px; }
  .ax-stats b { font-size: 1.05rem; } .ax-stats div { padding: 10px 12px; }
  .ax-cta .ax-btn { flex: 1; }
  .ax-node { width: 62px; } .ax-node span { width: 40px; height: 40px; } .ax-node.core span { width: 48px; height: 48px; }
  .ax-nav { top: 74px; width: 100%; } .ax-nav a { padding: 0 11px; font-size: .76rem; }
  .ax-sec { padding-top: 28px; scroll-margin-top: 130px; }
  .ax-sh h3 { font-size: 1.08rem; } .ax-sh > span { width: 40px; height: 40px; border-radius: 13px; }
  .ax-tl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ax-tl::before, .ax-tl::after { top: 28px; bottom: 28px; left: 27px; right: auto; width: 3px; height: auto; }
  .ax-tl::after { bottom: auto; height: 0; transition: height 1.6s cubic-bezier(.4,0,.2,1) .3s; }
  .ax-sec.in .ax-tl::after { width: 3px; height: calc(100% - 74px); }
  .ax-tl li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; text-align: left; padding: 0 0 18px; }
  .ax-tl li .ax-dot { grid-row: span 2; margin: 0; }
  .ax-tl b { align-self: end; }
  .ax-base { flex-wrap: wrap; } .ax-base code { flex-basis: 100%; order: 3; padding: 0 4px 4px; }
  .ax-panel { padding: 14px; }
  .ax-kstats { gap: 6px; }
  .ax-kstats div { padding: 10px; } .ax-kstats svg { display: none; } .ax-kstats b { font-size: .92rem; }
  .ax-hero2 { flex-direction: column; text-align: center; padding: 24px 18px; } .ax-hero2 .ax-btn { width: 100%; }
  .ax-kh { flex-wrap: wrap; } .ax-acts { width: 100%; justify-content: flex-end; }
  .ax-pgl { padding: 16px; } .ax-send kbd { display: none; } .ax-ep small { display: none; }
  .ax-dd { padding: 16px; }
  .ax-sh > span.ac-live { display: none; }
  .at { font-size: .74rem; } .at th, .at td { padding: 8px; }
  .at-p { min-width: 120px; max-width: 132px; gap: 7px; } .at-p img { width: 30px; height: 30px; border-radius: 8px; }
  .at-p b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .74rem; line-height: 1.3; }
  .at-p small { font-size: .64rem; }
  .at td:first-child { box-shadow: 6px 0 8px -6px rgba(15,23,42,.15); }
}

/* ===== มือถือ: เมนูพอดีจอ · ตารางสินค้าเป็นการ์ด (เห็นราคาครบไม่ต้องปัดซ้าย-ขวา · ไม่มีแถบเลื่อนซ้อน) ===== */
@media (max-width: 640px) {
  .ax-nav { justify-content: space-between; gap: 2px; padding: 4px; margin: 14px 0 4px; }
  .ax-nav a { flex: 1; justify-content: center; padding: 0 4px; height: 36px; font-size: .72rem; gap: 0; }
  .ax-nav a svg { display: none; }
  .ax-ind { top: 4px; height: 36px; }
  .ax-cta { flex-direction: column; } .ax-cta .ax-btn { flex: none; width: 100%; height: 48px; white-space: nowrap; }
  .ax-hl h2 { font-size: 1.7rem; }
  .ax-win pre { min-height: 130px; font-size: .7rem; }
  .ac-bar { gap: 8px; } .ac-q { flex-basis: 100%; } .ac-only { height: 40px; }
  .at-wrap { max-height: none; overflow: visible; border: none; border-radius: 0; }
  .at { min-width: 0; display: block; font-size: .78rem; }
  .at thead { display: none; }
  .at tbody { display: grid; gap: 10px; }
  .at tbody tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: #fff; box-shadow: 0 10px 24px -20px rgba(15,23,42,.4); }
  .at tbody tr.out { background: var(--soft); }
  .at tbody tr td, .at tbody tr:hover td { display: block; padding: 0; border: none; background: none; box-shadow: none; position: static; white-space: normal; text-align: left; }
  .at tbody tr td:first-child { grid-column: 1 / -1; padding-bottom: 4px; }
  .at-p { min-width: 0; max-width: none; gap: 10px; } .at-p img { width: 44px; height: 44px; border-radius: 12px; }
  .at-p b { -webkit-line-clamp: 2; font-size: .84rem; }
  .at-p small { font-size: .7rem; }
  .at tbody tr td.pz, .at tbody tr:hover td.pz { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--soft); min-width: 0; }
  .at tbody tr.out td.pz { background: #fff; }
  .at tbody tr td.pz::before { content: attr(data-l); font-size: .62rem; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .at tbody tr td.pz.t::before { color: var(--c); }
  .at tbody tr td.pz.me, .at tbody tr:hover td.pz.me { background: #fff1f2; box-shadow: inset 0 0 0 1.5px #fecdd3; }
  .at tbody tr td.pz b { font-size: .92rem; line-height: 1.2; }
  .at tbody tr td.pz em { display: block; font-size: .6rem; }
  .at tbody tr td.st { grid-column: span 2; display: flex; align-items: center; justify-content: center; }
  .at tbody tr td.idc { grid-column: span 2; } .at tbody tr td.bc { grid-column: span 2; }
  .at td.idc .ac-id { width: 100%; height: 34px; padding: 0 8px; }
  .at td.bc .ac-buy { width: 100%; height: 34px; justify-content: center; }
  .at-st { height: 34px; width: 100%; justify-content: center; border-radius: 9px; }
  .ax-sh > span.ac-live { display: none; }
}