/* v81 仓库样式：只显示图片和数量，颜色跟随主题（--green 主色 / --deep 深色） */
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid){
 display:grid!important;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))!important;gap:6px 4px!important;
 padding:12px 10px!important;border-radius:20px;
 border:3px solid #84596f;border:3px solid color-mix(in srgb,var(--green,#84596f) 55%,transparent);
 background:#fbf6f8;background:color-mix(in srgb,var(--green,#84596f) 6%,#fff);
 box-shadow:inset 0 2px 8px color-mix(in srgb,var(--deep,#604354) 12%,transparent)}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card{
 position:relative!important;display:block!important;min-height:0!important;height:86px!important;padding:0!important;margin:0!important;
 border:0!important;border-radius:14px!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;transition:background .15s}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card:hover{background:color-mix(in srgb,var(--green,#84596f) 12%,transparent)!important}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card>:not(.item-open){display:none!important}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .item-open{
 all:unset;position:absolute;inset:0;display:flex!important;align-items:center;justify-content:center;cursor:pointer;border-radius:14px}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .item-open:focus-visible{outline:3px solid var(--green,#84596f)}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .item-open>:not(img):not(.aggregate-quantity){display:none!important}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .item-open img{
 width:62px!important;height:62px!important;margin:0!important;object-fit:contain;transform:translateX(-13px);filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-quantity{
 position:absolute!important;right:5px;bottom:10px;margin:0!important;padding:0!important;background:none!important;
 font-size:24px!important;font-weight:900!important;line-height:1!important;letter-spacing:-.5px;color:#fff!important;font-variant-numeric:tabular-nums;white-space:nowrap;
 --bt-ink:var(--deep,#3b2a33);
 text-shadow:2px 0 0 var(--bt-ink),-2px 0 0 var(--bt-ink),0 2px 0 var(--bt-ink),0 -2px 0 var(--bt-ink),1.5px 1.5px 0 var(--bt-ink),-1.5px 1.5px 0 var(--bt-ink),1.5px -1.5px 0 var(--bt-ink),-1.5px -1.5px 0 var(--bt-ink),0 3px 0 var(--bt-ink)}
/* hidden items stay faded so the 「全部物品」 filter still reads */
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card.is-hidden{opacity:.45}

/* capacity bar under the items */
.bt-capacity{margin:12px 2px 6px}
.bt-capacity[hidden]{display:none}
.bt-meter{position:relative;height:24px;border-radius:999px;overflow:hidden;
 background:#f3ebef;background:color-mix(in srgb,var(--green,#84596f) 12%,#fff);
 border:3px solid #604354;border:3px solid var(--deep,#604354);box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 3px 0 color-mix(in srgb,var(--deep,#604354) 60%,#000)}
.bt-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;
 background:#84596f;background:linear-gradient(180deg,color-mix(in srgb,var(--green,#84596f) 65%,#fff) 0%,var(--green,#84596f) 60%,color-mix(in srgb,var(--green,#84596f) 80%,#000) 100%);
 box-shadow:inset 0 3px 0 rgba(255,255,255,.4);transition:width .8s cubic-bezier(.22,.8,.3,1)}
.bt-meter[data-level=high] .bt-fill{background:linear-gradient(180deg,#ffe17a 0%,#ffc21a 55%,#e79a00 100%)}
.bt-meter[data-level=max] .bt-fill{background:linear-gradient(180deg,#ff8c7a 0%,#ef4a37 55%,#c42c1d 100%)}
.bt-ticks{position:absolute;inset:0;display:flex;justify-content:space-evenly;padding-right:15%;pointer-events:none}
.bt-ticks i{width:3px;margin:4px 0;border-radius:2px;background:color-mix(in srgb,var(--deep,#604354) 30%,transparent)}
.bt-max{position:absolute;right:0;top:0;bottom:0;width:15%;display:grid;place-items:center;background:linear-gradient(180deg,#ff6b5b,#d8322a);color:#ffe36b;font-weight:900;font-size:12.5px;font-style:italic;letter-spacing:1px;text-shadow:0 1px 0 #7a1009;border-left:3px solid var(--deep,#604354)}
.bt-text{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:4px;margin-top:8px;font-weight:900;font-size:19px;font-variant-numeric:tabular-nums;color:#fff;
 --bt-ink:var(--deep,#3b2a33);
 text-shadow:2px 0 0 var(--bt-ink),-2px 0 0 var(--bt-ink),0 2px 0 var(--bt-ink),0 -2px 0 var(--bt-ink),1.5px 1.5px 0 var(--bt-ink),-1.5px 1.5px 0 var(--bt-ink),1.5px -1.5px 0 var(--bt-ink),-1.5px -1.5px 0 var(--bt-ink),0 3px 0 var(--bt-ink)}
.bt-cap{color:#d8ff7a}
.bt-pct{margin-left:8px;font-size:12.5px;font-weight:700;text-shadow:none;color:var(--deep,#604354);opacity:.75}

@media (max-width:700px){
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid){grid-template-columns:repeat(4,1fr)!important;gap:2px!important;padding:8px 4px!important;border-radius:16px}
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card{height:72px!important}
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .item-open img{width:48px!important;height:48px!important;transform:translateX(-9px)}
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-quantity{font-size:18px!important;right:2px;bottom:7px}
 .bt-meter{height:20px}.bt-max{font-size:11px}.bt-text{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.bt-fill{transition:none}}
/* other themes/layouts position the number and decorate cards (capy faces); tiles own both */
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-quantity{left:auto!important;top:auto!important;width:auto!important;max-width:none!important;transform:none!important}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card::before,
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card::after{display:none!important}

/* v81b: capacity sits centred in the 物品库存 heading row and replaces the 总库存数量/总容量 chip (仓库样式 only) */
html body.bt-bar-on[data-barn-tiles="true"][data-current-view="overview"] #scopeStorageCard{display:none!important}
.section-heading>.bt-capacity{flex:1 1 300px;max-width:460px;margin:0 auto;padding:0 12px;display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0}
.section-heading>.bt-capacity[hidden]{display:none}
.section-heading>.bt-capacity .bt-text{margin-top:0;font-size:16px;gap:3px;justify-content:center;white-space:nowrap}
.section-heading>.bt-capacity .bt-pct{margin-left:6px;font-size:11.5px}
.section-heading>.bt-capacity .bt-meter{height:16px;border-width:2px;box-shadow:inset 0 2px 3px rgba(0,0,0,.15),0 2px 0 color-mix(in srgb,var(--deep,#604354) 60%,#000)}
.section-heading>.bt-capacity .bt-ticks i{margin:3px 0;width:2px}
.section-heading>.bt-capacity .bt-max{font-size:10px;border-left-width:2px}
@media (max-width:700px){
 .section-heading>.bt-capacity{order:5;flex:1 1 100%;max-width:none;padding:4px 2px 2px}
 .section-heading>.bt-capacity .bt-text{font-size:15px}
}
/* v81c: the heading capacity line is small — white text with an outline blurs there, so use solid theme colours */
.section-heading>.bt-capacity .bt-text{color:#3b2a33;color:var(--deep,#3b2a33);text-shadow:none;font-weight:800;-webkit-font-smoothing:antialiased}
.section-heading>.bt-capacity .bt-label{font-weight:700;opacity:.85}
.section-heading>.bt-capacity .bt-used{font-weight:900}
.section-heading>.bt-capacity .bt-cap{color:#84596f;color:var(--green,#84596f);font-weight:900}
.section-heading>.bt-capacity b{font-weight:700;opacity:.6}
/* v81d: heading meter matches the site's soft rounded controls — slim pill, no dark border/shadow/ticks, MAX zone only a faint tint */
.section-heading>.bt-capacity .bt-meter{height:8px;border:0;box-shadow:none;
 background:#efe6ea;background:color-mix(in srgb,var(--green,#84596f) 16%,transparent)}
.section-heading>.bt-capacity .bt-fill{box-shadow:none;
 background:#84596f;background:linear-gradient(90deg,color-mix(in srgb,var(--green,#84596f) 70%,#fff),var(--green,#84596f))}
.section-heading>.bt-capacity .bt-meter[data-level=high] .bt-fill{background:linear-gradient(90deg,#f6cf6a,#e9a524)}
.section-heading>.bt-capacity .bt-meter[data-level=max] .bt-fill{background:linear-gradient(90deg,#f09a8c,#de5546)}
.section-heading>.bt-capacity .bt-ticks{display:none}
.section-heading>.bt-capacity .bt-max{border:0;font-size:0;background:rgba(222,85,70,.16)}
@media (max-width:700px){.section-heading>.bt-capacity .bt-meter{height:7px}}
/* v83: smaller image + number (still larger than the normal cards: 31px img / 20px qty desktop, 34px / 14px phone); phones 5 per row */
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid){grid-template-columns:repeat(auto-fill,minmax(88px,1fr))!important}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card{height:70px!important}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .item-open img{width:46px!important;height:46px!important;transform:translateX(-11px)}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-quantity{font-size:21px!important;right:6px;bottom:9px;
 text-shadow:1.6px 0 0 var(--bt-ink),-1.6px 0 0 var(--bt-ink),0 1.6px 0 var(--bt-ink),0 -1.6px 0 var(--bt-ink),1.2px 1.2px 0 var(--bt-ink),-1.2px 1.2px 0 var(--bt-ink),1.2px -1.2px 0 var(--bt-ink),-1.2px -1.2px 0 var(--bt-ink),0 2.5px 0 var(--bt-ink)}
@media (max-width:700px){
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid){grid-template-columns:repeat(5,1fr)!important;gap:2px!important;padding:8px 3px!important}
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card{height:58px!important}
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .item-open img{width:40px!important;height:40px!important;transform:translateX(-7px)}
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-quantity{font-size:16px!important;right:2px;bottom:5px;
  text-shadow:1.3px 0 0 var(--bt-ink),-1.3px 0 0 var(--bt-ink),0 1.3px 0 var(--bt-ink),0 -1.3px 0 var(--bt-ink),1px 1px 0 var(--bt-ink),-1px 1px 0 var(--bt-ink),1px -1px 0 var(--bt-ink),-1px -1px 0 var(--bt-ink),0 2px 0 var(--bt-ink)}
}
/* v84: 较上次 change chip (+N green / -N red) in the tile's top-right corner — reuses the card's own .delta-chip, short form */
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card>.item-actions{
 display:block!important;position:absolute!important;top:3px!important;right:3px!important;left:auto!important;bottom:auto!important;z-index:2;
 width:auto!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;pointer-events:none}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card>.item-actions>:not(.delta-chip){display:none!important}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card .delta-chip{
 display:inline-flex!important;margin:0!important;padding:0 6px!important;border-radius:999px!important;font-size:11.5px!important;font-weight:800!important;line-height:17px!important;
 font-variant-numeric:tabular-nums;letter-spacing:0;box-shadow:0 1px 2px rgba(0,0,0,.12)}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card .delta-chip .delta-full{display:none!important}
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card .delta-chip .delta-short{display:inline!important}
@media (max-width:700px){
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card>.item-actions{top:1px!important;right:1px!important}
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-card .delta-chip{padding:0 4px!important;font-size:10px!important;line-height:14px!important}
}
/* v88: slimmer tile numbers — weight 700 and a ~1px outline instead of 900 + 1.6px (size unchanged) */
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-quantity{font-weight:700!important;letter-spacing:0;-webkit-font-smoothing:antialiased;
 text-shadow:1px 0 0 var(--bt-ink),-1px 0 0 var(--bt-ink),0 1px 0 var(--bt-ink),0 -1px 0 var(--bt-ink),.7px .7px 0 var(--bt-ink),-.7px .7px 0 var(--bt-ink),.7px -.7px 0 var(--bt-ink),-.7px -.7px 0 var(--bt-ink),0 1.6px 1px rgba(0,0,0,.28)}
@media (max-width:700px){
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-quantity{text-shadow:.9px 0 0 var(--bt-ink),-.9px 0 0 var(--bt-ink),0 .9px 0 var(--bt-ink),0 -.9px 0 var(--bt-ink),.6px .6px 0 var(--bt-ink),-.6px .6px 0 var(--bt-ink),.6px -.6px 0 var(--bt-ink),-.6px -.6px 0 var(--bt-ink),0 1.3px 1px rgba(0,0,0,.28)}
}
/* v89: darker, slightly firmer outline on tile numbers (theme ink mixed with black; 1.3px desktop / 1.1px phone), weight stays 700 */
html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-quantity{--bt-stroke:#1f161b;--bt-stroke:color-mix(in srgb,var(--bt-ink) 55%,#000);
 text-shadow:1.3px 0 0 var(--bt-stroke),-1.3px 0 0 var(--bt-stroke),0 1.3px 0 var(--bt-stroke),0 -1.3px 0 var(--bt-stroke),.95px .95px 0 var(--bt-stroke),-.95px .95px 0 var(--bt-stroke),.95px -.95px 0 var(--bt-stroke),-.95px -.95px 0 var(--bt-stroke),0 1.8px 1px rgba(0,0,0,.3)}
@media (max-width:700px){
 html body[data-barn-tiles="true"][data-current-view="overview"] #workspace :is(#itemsGrid,#zeroItemsGrid) .aggregate-quantity{text-shadow:1.1px 0 0 var(--bt-stroke),-1.1px 0 0 var(--bt-stroke),0 1.1px 0 var(--bt-stroke),0 -1.1px 0 var(--bt-stroke),.8px .8px 0 var(--bt-stroke),-.8px .8px 0 var(--bt-stroke),.8px -.8px 0 var(--bt-stroke),-.8px -.8px 0 var(--bt-stroke),0 1.5px 1px rgba(0,0,0,.3)}
}