/* 县城摆摊册页（js/county_stall_book.js）：照效果图的宣纸大框弹窗。设计尺寸 880×388（账簿 380×388），由脚本按屏幕整体 zoom。
   字是网页文字（猫田楷），图一律 pixelated；不加柔光。 */
#panel .pbox.stb-box { width: var(--stbw, 880px) !important; height: var(--stbh, 388px) !important; max-width: none !important; max-height: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; filter: none !important; }
#panel .pbox.stb-box::before, #panel .pbox.stb-box::after { display: none !important; }
#panel .pbox.stb-box > .pclose { position: absolute !important; right: calc(var(--stbw) * .024) !important; top: calc(var(--stbh) * .045) !important; left: auto !important; z-index: 5; width: 34px !important; height: 34px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #4a2a1c !important; font: 400 30px/34px "猫田楷", serif !important; text-shadow: none !important; }

.stb { --ink: #3a2418; --ink2: #6b4a34; --red: #a8322a; --paper: #f1e2c2; position: relative; width: 880px; height: 388px; box-sizing: border-box; color: var(--ink); font-family: "猫田楷", "KaiTi", "Noto Serif SC", serif; font-size: 15px; line-height: 1.25; text-align: left; user-select: none; -webkit-user-select: none;
  border: 30px solid transparent; border-image: url(../../assets/stall/book/frame_wide.png) 60 fill / 30px stretch; image-rendering: pixelated; padding: 6px 14px 4px; display: flex; flex-direction: column; }
.stb.stb-tall { width: 380px; border-image-source: url(../../assets/stall/book/frame_tall.png); padding: 0 10px 2px; }
.stb img { image-rendering: pixelated; display: block; }
.stb button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* 标题行 */
.stb-hd { display: flex; align-items: center; gap: 10px; height: 40px; flex: none; padding-right: 40px; }
.stb-hd h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-weight: 400; font-size: 27px; letter-spacing: 3px; color: var(--ink); white-space: nowrap; }
.stb-hd h2 .stb-cl { width: 48px; height: 18px; align-self: center; }
.stb-hd h2 small { font-size: 13px; letter-spacing: 1px; color: var(--ink2); }
.stb-tabs { display: flex; gap: 4px; margin-left: auto; }
.stb-pill { height: 26px; padding: 0 12px; font-size: 14px !important; border: 0 solid transparent !important; border-width: 0 12px !important; border-image: url(../../assets/stall/ui/kit_pill_a.png) 0 12 fill / 0 12px stretch !important; padding: 0 2px !important; color: var(--ink) !important; white-space: nowrap; }
.stb-pill.on { border-image-source: url(../../assets/stall/ui/kit_pill_sel.png) !important; color: #fcf2dc !important; }
.stb-coin { display: flex; align-items: center; gap: 3px; font-size: 14px; color: var(--ink2); white-space: nowrap; margin-left: 6px; }
.stb-tabs + .stb-coin { margin-left: 6px; }
.stb-hd > .stb-coin:nth-child(2) { margin-left: auto; }
.stb-coin img { width: 20px; height: 20px; }
.stb-coin b { color: var(--ink); font-weight: 400; font-size: 16px; }
.stb-rule { flex: none; height: 3px; margin: 2px 0 8px; background: linear-gradient(var(--red), var(--red)) 0 0/100% 1px no-repeat, linear-gradient(rgba(168,50,42,.45), rgba(168,50,42,.45)) 0 2px/100% 1px no-repeat; }

/* 主体：左栏列表 + 右栏 */
.stb-bd { flex: 1; min-height: 0; display: flex; gap: 14px; }
.stb-list { width: 196px; flex: none; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; padding-right: 10px; border-right: 1px solid rgba(168,50,42,.35); scrollbar-width: none; }
.stb-list::-webkit-scrollbar { display: none; }
.stb-row { flex: none; display: flex; align-items: center; gap: 6px; height: 27px; padding: 0 4px; border: 0 solid transparent !important; border-width: 0 14px !important; border-image: url(../../assets/stall/ui/kit_row_a.png) 0 14 fill / 0 14px stretch !important; padding: 0 !important; text-align: left; font-size: 15px; }
.stb-row.on { border-image-source: url(../../assets/stall/ui/kit_row_sel.png) !important; color: #4a1e12; }
.stb-row .ri { width: 30px; height: 24px; object-fit: contain; flex: none; margin-left: -6px; }
.stb-row span { flex: 1; white-space: nowrap; overflow: hidden; }
.stb-row i { font-style: normal; color: var(--ink2); font-size: 16px; }
.stb-row em.mine { font-style: normal; font-size: 11px; color: #fcf2dc; background: var(--red); padding: 0 4px; line-height: 16px; }
.stb-list .tip { margin: 8px 2px 0; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.stb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* 摊位册 */
.stb-name { display: flex; align-items: center; gap: 6px; height: 30px; flex: none; }
.stb-name .fl { width: 22px; height: 22px; }
.stb-name b { font-weight: 400; font-size: 22px; letter-spacing: 2px; }
.stb-name small { font-size: 13px; color: var(--ink2); }
.stb-name .stb-tag { margin-left: auto; }
.stb-pv { display: flex; gap: 10px; margin-top: 6px; flex: none; }
.stb-pv figure { position: relative; margin: 0; box-sizing: border-box; border: 2px solid var(--ink); box-shadow: 0 0 0 1px #e9d7b2, 0 0 0 2px rgba(58,36,24,.35); }
.stb-pv .sc { width: 252px; height: 168px; overflow: hidden; }
.stb-pv .sc img { width: 248px; height: 164px; object-fit: cover; }
.stb-pv .mp { width: 168px; height: 168px; overflow: hidden; background: #e6d6b4; }
.stb-pv .mp .map { width: 164px; height: 164px; }
.stb-pv .mp .pin { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -34px 0 0 -2px; }
.stb-pv .mp figcaption { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 11px; line-height: 16px; color: var(--paper); background: rgba(58,36,24,.72); }
.stb-facts { flex: 1; min-width: 0; margin: 0; display: grid; grid-template-columns: 1fr; align-content: start; row-gap: 2px; }
.stb-facts dt { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink2); margin-top: 6px; }
.stb-facts dt:first-child { margin-top: 0; }
.stb-facts dt img { width: 18px; height: 18px; object-fit: contain; }
.stb-facts dd { margin: 0 0 0 23px; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stb-facts .hot, .hot { color: var(--red); font-weight: 400; }
.stb-stars { display: inline-flex; gap: 1px; }
.stb-star { width: 15px; height: 15px; background: url(../../assets/stall/book/star.png) center/contain no-repeat; image-rendering: pixelated; }
.stb-star.off { background-image: url(../../assets/stall/book/star_off.png); opacity: .7; }
.stb-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.stb-foot .note { flex: 1; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink2); }

/* 按钮 */
.stb-btn { flex: none; height: 38px; min-width: 128px; padding: 0 !important; border: 0 solid transparent !important; border-width: 0 22px !important; border-image: url(../../assets/stall/ui/kit_btn_cream.png) 0 18 fill / 0 22px stretch !important; font-size: 17px !important; letter-spacing: 2px; color: var(--ink) !important; white-space: nowrap; }
.stb-btn.red { border-image: url(../../assets/stall/ui/kit_btn_red.png) 0 24 fill / 0 26px stretch !important; border-width: 0 26px !important; color: #fff3dc !important; text-shadow: 0 1px 0 rgba(60,12,8,.6); }
.stb-btn.small { height: 30px; min-width: 76px; font-size: 14px !important; border-width: 0 16px !important; letter-spacing: 1px; }
.stb-btn.small.red { border-width: 0 18px !important; }
.stb-btn.off { filter: grayscale(.85) brightness(1.06); opacity: .6; }
.stb-btn:active:not(.off), .stb-row:active, .stb-pill:active, .stb-card:active, .stb-slot:active, .w-ico:active { transform: translateY(1px); }

/* 小牌子 */
.stb-tag { flex: none; display: inline-block; font-style: normal; font-size: 12px; line-height: 19px; height: 19px; padding: 0 !important; border: 0 solid transparent; border-width: 0 7px; border-image: url(../../assets/stall/ui/kit_tag_cream.png) 0 7 fill / 0 7px stretch; color: var(--ink); white-space: nowrap; }
.stb-tag.green { border-image-source: url(../../assets/stall/ui/kit_tag_green.png); color: #f8f2dc; }
.stb-tag.orange { border-image-source: url(../../assets/stall/ui/kit_tag_orange.png); color: #f8f2dc; }
.stb-tag.red { border-image-source: url(../../assets/stall/ui/kit_tag_orange.png); color: #f8f2dc; }
.stb-rib { display: inline-block; height: 18px; line-height: 18px; padding: 0 12px; font-size: 13px; color: #fdf3df; border: 0 solid transparent; border-width: 0 10px; border-image: url(../../assets/stall/ui/kit_rib_grey.png) 0 10 fill / 0 10px stretch; padding: 0 2px; white-space: nowrap; }
.stb-rib.red { border-image-source: url(../../assets/stall/ui/kit_rib_red.png); }

/* 办证 */
.stb-list.steps .step { cursor: default; }
.stb-list.steps .step em { font-style: normal; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; color: #fcf2dc; background: var(--ink2); border-radius: 50%; margin-left: -4px; }
.stb-list.steps .step.done em { background: var(--red); }
.stb-list.steps .step.done i { color: var(--red); }
.stb-lb { font-size: 14px; color: var(--ink2); margin: 0 0 3px; }
.stb-field { display: flex; align-items: center; gap: 8px; height: 32px; margin-bottom: 8px; padding: 0 !important; border: 0 solid transparent !important; border-width: 0 14px !important; border-image: url(../../assets/stall/ui/kit_row_b.png) 0 14 fill / 0 14px stretch !important; font-size: 16px; }
.stb-field .ri { width: 30px; height: 24px; object-fit: contain; margin-left: -6px; }
.stb-field span { flex: 1; text-align: left; }
.stb-field i { font-style: normal; font-size: 13px; color: var(--ink2); }
.stb-kinds { display: flex; gap: 10px; margin-bottom: 6px; }
.stb-card { flex: 1; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 10px solid transparent !important; border-image: url(../../assets/stall/ui/kit_slot.png) 10 fill / 10px stretch !important; padding: 0 !important; }
.stb-card.on { border-image-source: url(../../assets/stall/ui/kit_slot_sel.png) !important; }
.stb-card .pic { height: 50px; display: flex; align-items: center; }
.stb-card .pic img { width: auto; height: 46px; }
.stb-card b { font-weight: 400; font-size: 15px; }
.stb-card.on b { color: var(--red); }
.stb-card.off { opacity: .45; }
.stb-fee { display: flex; align-items: baseline; gap: 12px; padding: 6px 4px; border-top: 1px dashed rgba(107,74,52,.45); border-bottom: 1px dashed rgba(107,74,52,.45); font-size: 15px; }
.stb-fee b { font-weight: 400; font-size: 18px; color: var(--red); }
.stb-fee .have { margin-left: auto; font-size: 13px; color: var(--ink2); }
.stb-fee .have.warn { color: var(--red); }
.stb-act { margin-top: auto; display: flex; justify-content: center; padding-bottom: 2px; }
.stb-act .stb-btn { min-width: 190px; height: 40px; font-size: 19px !important; }
.stb-tagbox { position: relative; width: 150px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(107,74,52,.35); background: rgba(255,250,236,.28); }
.stb-tagbox .tag { width: 60px; height: 285px; }
.stb-tagbox .stamp { position: absolute; left: 50%; top: 58%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(2.2) rotate(-8deg); pointer-events: none; }
.stb-tagbox .stamp img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stb-tagbox .stamp b { position: relative; font-weight: 400; font-size: 40px; color: var(--red); }
.stb.stamped .stb-tagbox .stamp { animation: stbStamp .45s steps(5) forwards; }
@keyframes stbStamp { 0% { opacity: 0; transform: scale(2.2) rotate(-8deg); } 70% { opacity: 1; transform: scale(.92) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }

/* 备货 */
.stb-sub { display: flex; align-items: center; gap: 8px; height: 22px; margin-bottom: 6px; flex: none; }
.stb-sub small { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.stb-bag { width: 248px; flex: none; display: flex; flex-direction: column; padding-right: 12px; border-right: 1px solid rgba(168,50,42,.35); }
.stb-bag .grid { display: grid; grid-template-columns: repeat(4, 54px); grid-auto-rows: 54px; gap: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; align-content: start; }
.stb-bag .grid::-webkit-scrollbar { display: none; }
.stb-bag .empty { grid-column: 1 / -1; margin: 10px 2px; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.stb-slot { position: relative; display: flex; align-items: center; justify-content: center; border: 8px solid transparent !important; border-image: url(../../assets/stall/ui/kit_slot.png) 8 fill / 8px stretch !important; padding: 0 !important; }
.stb-slot.none { opacity: .45; }
.stb-slot em { position: absolute; right: -2px; bottom: -4px; font-style: normal; font-size: 12px; color: var(--ink); text-shadow: 1px 0 #f4e7c8, -1px 0 #f4e7c8, 0 1px #f4e7c8, 0 -1px #f4e7c8; }
.stb .ico { image-rendering: pixelated; }
.stb-shelf { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stb-cp { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 13px; }
.stb-cp b { font-weight: 400; font-size: 16px; color: var(--red); min-width: 14px; text-align: center; }
.wares { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 80px; gap: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; align-content: start; }
.wares::-webkit-scrollbar { display: none; }
.stb-ware { position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 26px 1fr; column-gap: 6px; padding: 0; border: 8px solid transparent; border-image: url(../../assets/stall/ui/kit_slot.png) 8 fill / 8px stretch; }
.stb-ware.none { display: flex; align-items: center; justify-content: center; opacity: .5; font-size: 13px; color: var(--ink2); }
.stb-ware.sold { opacity: .7; }
.stb-ware .w-ico { position: relative; grid-row: 1 / 3; align-self: center; height: 44px; display: flex; align-items: center; justify-content: center; }
.stb-ware .w-hd { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.stb-ware .w-nm { font-weight: 400; font-size: 15px; white-space: nowrap; overflow: hidden; }
.stb-ware .w-hd small { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.stb-ware .w-hd .stb-tag { margin-left: auto; }
.stb-ware .w-ico em { position: absolute; right: -6px; bottom: -8px; font-style: normal; font-size: 12px; color: var(--ink); text-shadow: 1px 0 #f4e7c8, -1px 0 #f4e7c8, 0 1px #f4e7c8, 0 -1px #f4e7c8; }
.stb-ware .w-sub { font-size: 12px; color: var(--ink2); }
.w-price { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.stb-ware .w-sub { grid-column: 1 / 3; align-self: center; }
.w-price b { font-weight: 400; font-size: 17px; color: var(--red); min-width: 34px; text-align: center; }
.w-price small { font-size: 11px; margin-left: 1px; color: var(--ink2); }
.pm { width: 26px; height: 26px; flex: none; }
.pm img { width: 26px; height: 26px; }
.stb-shelf .stb-foot { min-height: 46px; justify-content: flex-end; }
.stb-shelf .stb-foot .stb-btn.red { min-width: 200px; height: 40px; font-size: 19px !important; }

/* 升级装扮 */
.stb-up .stb-list { width: 150px; }
.cards { flex: 1; display: grid; gap: 10px; grid-auto-rows: 1fr; min-height: 0; }
.cards.n3 { grid-template-columns: repeat(3, 1fr); }
.cards.n4 { grid-template-columns: repeat(4, 1fr); }
.cards.n6 { grid-template-columns: repeat(3, 1fr); }
.stb-lv { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 4px 6px; border: 10px solid transparent; border-image: url(../../assets/stall/ui/kit_slot.png) 10 fill / 10px stretch; text-align: center; min-height: 0; }
.stb-lv.on { border-image-source: url(../../assets/stall/ui/kit_slot_sel.png); }
.stb-lv > .stb-rib { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); }
.stb-lv .pic { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.stb-lv .pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.cards.n3 .stb-lv .pic img { height: 110px; max-height: 110px; }
.stb-lv b { font-weight: 400; font-size: 16px; }
.stb-lv small { font-size: 12px; color: var(--ink2); }
.stb-lv p { margin: 0; font-size: 12px; color: var(--ink2); }
.stb-lv .dots { display: flex; gap: 2px; }
.stb-lv .dots i { width: 6px; height: 6px; background: var(--ink2); }
.stb-lv.on .dots i { background: var(--red); }
.stb-lv .stb-btn.small { min-width: 96px; }
.stb-lv.deco { gap: 2px; }
.cards.n6 .stb-lv .pic { max-height: 56px; }
.stb-lv .thumb { position: relative; display: block; width: 104%; margin: 0 -2%; aspect-ratio: 16 / 9; background: var(--fg) center/100% 100% no-repeat, url(../../assets/stall/bg_street16.png) 50% 30%/150% auto no-repeat; image-rendering: pixelated; border: 2px solid var(--ink); box-sizing: border-box; }
.stb-lv .thumb .cloth { position: absolute; left: 8%; right: 8%; top: 66%; height: 22%; min-height: 0; width: auto; border: 1px solid var(--ink); }
.stb-lv .cnp { display: block; width: 100%; height: 100%; min-height: 56px; background-size: 230% auto; background-position: 50% 0; background-repeat: no-repeat; image-rendering: pixelated; border: 1px solid rgba(58,36,24,.5); }
.stb-lv .cloth { background: var(--c); opacity: .85; }
.stb-lv .cloth::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; background: conic-gradient(from 135deg at 50% 0, var(--c) 0 90deg, transparent 0) 0 0/12px 7px repeat-x; }
.stb-lv .cloth.bare { background: none; border: 0; }
.stb-lv .cloth.bare::after { display: none; }
.stb-lv .sign { display: flex; align-items: center; justify-content: center; padding: 6px 12px; background: #5c3c2c; border: 2px solid #e4c494; box-shadow: 0 0 0 2px #34241c; }
.stb-lv .sign b { color: #e4c494; font-size: 17px; letter-spacing: 3px; white-space: nowrap; }
.stb-lv .orn { height: 52px; width: auto; }

/* 账簿（竖纸） */
.stb-cart { position: relative; flex: none; height: 46px; margin: 4px 6px 0; display: flex; align-items: center; justify-content: center; }
.stb-cart .bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stb-cart h2 { position: relative; margin: 0; font-weight: 400; font-size: 25px; letter-spacing: 8px; padding-left: 8px; }
.stb-lsub { margin: 4px 0 2px; text-align: center; font-size: 13px; color: var(--ink2); }
.stb-ledger { list-style: none; margin: 0; padding: 0 6px; flex: 1; display: flex; flex-direction: column; }
.stb-ledger li { display: flex; align-items: center; justify-content: space-between; height: 25px; border-bottom: 1px solid rgba(107,74,52,.25); font-size: 15px; }
.stb-ledger li.sep { height: 4px; border-bottom: 1px solid rgba(168,50,42,.5); margin-bottom: 2px; }
.stb-ledger .k { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.stb-ledger .k img { width: 20px; height: 20px; object-fit: contain; }
.stb-ledger b { font-weight: 400; font-size: 16px; display: flex; align-items: center; gap: 4px; }
.stb-ledger b small { font-size: 11px; color: var(--ink2); }
.stb-ledger li.warn b { color: var(--red); }
.stb-tall .stb-foot { justify-content: center; min-height: 46px; }
.stb-tall .stb-foot .stb-btn.red { min-width: 150px; }

.stb *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.stb * { scrollbar-width: none; }