/* ===== หน้าบัญชีร้าน: ภาพรวม (ติดตามสด + สถิติ) · กระเป๋าเงิน · โปรไฟล์ ===== */
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #D8323F, #93182A); color: #fff; font-weight: 700; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 30px; height: 30px; font-size: 13px; }
.avatar.lg { width: 64px; height: 64px; font-size: 26px; }
.avatar.xl { width: 120px; height: 120px; font-size: 46px; }
.who { display: flex; align-items: center; gap: 10px; }

.hero-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(120deg, #2B1418, #3A3A3D); color: #fff; margin-bottom: 20px; flex-wrap: wrap; }
.hero-card .hc-main { display: grid; gap: 4px; flex: 1; min-width: 200px; }
.hero-card .hc-main b { font-size: 20px; }
.hero-card .hc-main > span { opacity: .9; font-size: 14px; }
.hero-card .hc-wallet { display: grid; gap: 4px; justify-items: end; }
.hero-card .hc-wallet span { opacity: .8; font-size: 13px; }
.hero-card .hc-wallet b { font-size: 26px; }
.hero-card .btn-line { color: #fff; border-color: rgba(255, 255, 255, .5); background: transparent; }

.dash-sec { margin-bottom: 26px; }
.dash-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.dash-h h2 { font-size: 19px; display: flex; align-items: center; gap: 8px; margin: 0; }
.dash-h h3, .dash-grid .card h3, #moneyBody .card h3 { font-size: 16px; margin: 0 0 10px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #1FB35A; box-shadow: 0 0 0 0 rgba(31, 179, 90, .6); animation: pulse8 1.6s infinite; }
@keyframes pulse8 { 70% { box-shadow: 0 0 0 9px rgba(31, 179, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 179, 90, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot, .feed li.new { animation: none; } }

.seg { display: inline-flex; background: var(--tint); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 8px; font: 600 14px var(--font); color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.seg.sm button { padding: 5px 10px; font-size: 13px; }

.kv-sum .good b { color: var(--ok); }
.kv-sum small { font-size: 12px; color: var(--muted); }
.kv-sum small.up { color: var(--ok); }
.kv-sum small.down { color: var(--err); }
.kv-sum.live { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kv-sum select { min-height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--text); padding: 0 8px; font: 500 14px var(--font); margin: 4px 0; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.dash-grid > .card, #moneyBody > .card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
#moneyBody > .card { margin-bottom: 16px; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }

/* กราฟ */
.ch-wrap { position: relative; }
.ch { width: 100%; height: auto; display: block; }
.ch-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.ch-ax { font: 500 11px var(--font); fill: var(--muted); }
.ch-hit { fill: transparent; }
.ch-bar:hover .ch-hit, .ch-bar:focus .ch-hit { fill: var(--tint); }
.ch-bar:hover rect:last-child, .ch-bar:focus rect:last-child { filter: brightness(1.15); }
.ch-bar:focus { outline: none; }
.ch-tip { position: absolute; top: -8px; background: #3A3A3D; color: #fff; font-size: 13px; padding: 6px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap; }
.dn-n { font: 700 22px var(--mono); fill: var(--text); }
.donut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; min-width: 140px; }
.donut li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.donut li span { flex: 1; }
.donut i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.top5 { margin: 0; padding: 0; list-style: none; counter-reset: t; display: grid; gap: 8px; }
.top5 li { counter-increment: t; display: flex; gap: 10px; align-items: center; font-size: 14px; }
.top5 li::before { content: counter(t); width: 22px; height: 22px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font: 700 12px var(--mono); flex: none; }
.top5 li span { flex: 1; min-width: 0; }
.top5 small { display: block; color: var(--muted); font-size: 12px; }

/* รายการสด */
.pk-list, .feed, .req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; scrollbar-width: none; }
.pk-list::-webkit-scrollbar, .feed::-webkit-scrollbar, .req-list::-webkit-scrollbar { display: none; }
.pk-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.pk-list small, .feed small, .req-list small { display: block; color: var(--muted); font-size: 12px; }
.feed li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-left: 3px solid var(--line); font-size: 14px; border-radius: 0 8px 8px 0; }
.feed time { font: 600 13px var(--mono); color: var(--muted); }
.feed .ev-create { border-left-color: #B4520A; }
.feed .ev-packed { border-left-color: #0F6F68; }
.feed .ev-shipped, .feed .ev-delivered { border-left-color: #127A3E; }
.feed .ev-hold, .feed .ev-cancel, .feed .ev-returned { border-left-color: var(--err); }
.feed li.new { animation: newrow 2.4s ease-out; }
@keyframes newrow { from { background: #FFF4C2; } to { background: transparent; } }
.req-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.req-list li:last-child { border-bottom: 0; }

/* กระเป๋าเงิน */
.wallet-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; border-radius: 16px; background: linear-gradient(120deg, #B91F2E, #6E1220); color: #fff; margin-bottom: 16px; flex-wrap: wrap; }
.wallet-card span { opacity: .9; font-size: 14px; }
.wallet-card b { display: block; font-size: 34px; margin: 2px 0; }
.wallet-card small { opacity: .9; font-size: 13px; }
.wc-act { display: flex; gap: 8px; }
.wallet-card .btn-pri { background: #fff; color: #B91F2E; }
.wallet-card .btn-line { color: #fff; border-color: rgba(255, 255, 255, .6); background: transparent; }
.tbl td.neg { color: var(--err); }
.tbl td.pos { color: var(--ok); }
.bank-box { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--tint); margin-bottom: 12px; }
.bank-box b { font-size: 18px; }
.bank-box span { color: var(--muted); font-size: 13px; }
.slip-prev { max-width: 100%; max-height: 260px; border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; }

/* โปรไฟล์ */
.prof-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.prof-side { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); display: grid; justify-items: center; gap: 4px; text-align: center; }
.ps-name { font-size: 20px; margin-top: 10px; }
.ps-kv { width: 100%; margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; text-align: left; font-size: 14px; }
.ps-kv dt { color: var(--muted); }
.ps-kv dd { margin: 0; word-break: break-all; }
.prof-grid .card.form { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.prof-grid .v-stack { display: grid; gap: 16px; }
@media (max-width: 760px) {
  .prof-grid { grid-template-columns: 1fr; }
  .hero-card .hc-wallet { justify-items: start; }
  .wallet-card b { font-size: 28px; }
  .pk-list li { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- ระยะ 7: สมัคร · ส่งของเข้า · ประกอบชุด · B2B · คืนสินค้า · ตั้งค่าร้าน ---------- */
.apply-card { padding: 20px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.chips { display: flex; flex-wrap: wrap; gap: 0 16px; border: 0; padding: 0; }
.chips legend { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.chips .chk { margin: 0; min-height: 36px; }
.note-box { background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-size: 14px; }
.lines-ed { display: grid; gap: 8px; margin-bottom: 8px; }
.lines-ed .ln { display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px; align-items: center; }
.lines-ed .ln:has([name=l_lot]) { grid-template-columns: 2fr 1fr 1fr 1.2fr auto; }
.lines-ed input { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); padding: 0 10px; font: 500 15px var(--font); width: 100%; min-width: 0; }
.lines-ed .x { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--muted); font-size: 18px; cursor: pointer; }
@media (max-width: 560px) {
  .lines-ed .ln, .lines-ed .ln:has([name=l_lot]) { grid-template-columns: 1fr 1fr 36px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
  .lines-ed .ln [name=l_sku] { grid-column: 1 / -1; }
  .lines-ed .ln [name=l_exp], .lines-ed .ln:not(:has([name=l_lot])) [name=l_qty] { grid-column: 1 / 3; }
}
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.kit-grid .card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); display: grid; gap: 2px; }
.kit-grid small { color: var(--muted); font-size: 13px; }
.ph-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.ph-row img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.seg-ok { display: grid; gap: 0; }
.set-form { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.set-form h3 { font-size: 16px; margin: 18px 0 4px; } .set-form h3:first-child { margin-top: 0; }
.vas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }
.os-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.os-video { width: 100%; max-height: 420px; border-radius: 12px; background: #000; margin-top: 10px; }