/* Refined backpack icon for the unified action bar. */
.side-glyph-bag {
  width: 24px;
  height: 23px;
  margin-top: 4px;
  border: 2px solid #73d5ed;
  border-radius: 7px 7px 5px 5px;
  background: linear-gradient(145deg, #27677b, #123846);
  box-shadow: inset 0 -5px 0 #0c2933, 0 0 7px #55cae766;
}
.side-glyph-bag::before {
  left: 5px;
  top: -7px;
  width: 10px;
  height: 7px;
  border: 2px solid #73d5ed;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.side-glyph-bag::after {
  width: 10px;
  height: 7px;
  border: 1px solid #f0c85b;
  border-radius: 3px;
  background: #71541c;
  box-shadow: 0 0 3px #e6b84a66;
}

/* Inventory window. */
.panel.inventory-panel.client-open {
  width: min(430px, calc(100vw - 24px));
  max-height: min(620px, calc(100dvh - 16px));
  overflow: hidden;
  border: 1px solid #507487;
  border-radius: 10px;
  background: linear-gradient(155deg, #17242c, #10191e 72%);
  box-shadow: 0 18px 50px #000c, 0 0 0 1px #10232c;
}

.inventory-panel.client-open .inventory-title {
  position: sticky;
  height: 62px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto 30px;
  gap: 9px;
  align-items: center;
  background: linear-gradient(90deg, #183c4b, #202b32 60%, #1b242a);
  border-bottom: 2px solid #d0aa47;
}

.inventory-title-icon {
  position: relative;
  width: 34px;
  height: 31px;
  border: 2px solid #72d3ea;
  border-radius: 9px 9px 6px 6px;
  background: linear-gradient(145deg,#2d7185,#123845);
  box-shadow: inset 0 -7px #0d2932,0 0 8px #4ec6e455;
}
.inventory-title-icon::before { content:""; position:absolute; left:8px; top:-8px; width:14px; height:8px; border:2px solid #72d3ea; border-bottom:0; border-radius:7px 7px 0 0; }
.inventory-title-icon::after { content:""; position:absolute; left:9px; bottom:5px; width:12px; height:8px; border:1px solid #f0ca61; border-radius:3px; background:#73551b; }

.inventory-title > span { min-width:0; display:block; }
.inventory-title > span strong,.inventory-title > span small { display:block; }
.inventory-title > span strong { color:#f3f6f6; font-size:13px; letter-spacing:1.4px; }
.inventory-title > span small { margin-top:3px; color:#7fa7b7; font-size:7px; letter-spacing:1px; }
.inventory-panel.client-open .inventory-title > b { margin:0; padding:6px 9px 6px 24px; position:relative; border:1px solid #54616a; border-radius:14px; background:#111b21; color:#e9d071; font-size:8px; }
.inventory-title > b::before { content:""; position:absolute; left:8px; top:50%; width:9px; height:9px; transform:translateY(-50%); border:1px solid #eff2f2; border-radius:50%; background:linear-gradient(#dc5660 0 44%,#273038 45% 56%,#f1f2ed 57%); }
.inventory-panel.client-open .client-panel-close { width:28px; height:28px; border:1px solid #49565e; background:#0c1418; }

.inventory-panel.client-open .inventory-section-label {
  margin:0;
  padding:12px 14px 7px;
  display:flex;
  justify-content:space-between;
  color:#b7c8d0;
}
.inventory-section-label span { font-size:8px; letter-spacing:1.2px; }
.inventory-section-label small { color:#58cf8d; font-size:7px; letter-spacing:.7px; }
.inventory-section-label small::before { content:""; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#4dd884; box-shadow:0 0 5px #4dd884; }

.inventory-panel.client-open .loot-list {
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:7px;
  margin:0 13px;
  padding:9px;
  max-height:350px;
  overflow:auto;
  border:1px solid #3e4d55;
  border-radius:7px;
  background:#0b1318;
  box-shadow:inset 0 0 14px #0008;
}
.inventory-panel.client-open .container-slot {
  width:100%;
  height:66px;
  padding:7px 5px 15px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #3f5059;
  border-radius:6px;
  background:linear-gradient(145deg,#24323a,#151e24);
  box-shadow:inset 0 0 0 1px #ffffff05;
  transition:border-color .14s ease,transform .14s ease,background .14s ease;
}
.inventory-panel.client-open .container-slot:hover { z-index:2; border-color:#d2ae4d; background:linear-gradient(145deg,#30424b,#1b272e); transform:translateY(-2px); }
.inventory-panel.client-open .container-slot .loot-icon { width:38px; height:38px; display:grid; place-items:center; }
.inventory-panel.client-open .container-slot > strong { right:4px; bottom:3px; min-width:18px; padding:2px 4px; border-radius:8px; background:#071015e8; color:#f3d26f; font-size:8px; text-align:center; }
.inventory-panel.client-open .container-slot > span { display:block; position:absolute; left:4px; right:24px; bottom:4px; overflow:hidden; color:#91a1a9; font-size:6px; text-align:left; text-overflow:ellipsis; text-transform:capitalize; white-space:nowrap; }

.inventory-panel.client-open .restock {
  width:calc(100% - 26px);
  height:54px;
  margin:12px 13px 8px;
  padding:7px 12px;
  display:grid;
  grid-template-columns:30px 1fr auto;
  gap:9px;
  align-items:center;
  border:1px solid #3ca56c;
  border-radius:7px;
  background:linear-gradient(90deg,#176440,#218252);
  box-shadow:0 5px 15px #061d12aa,inset 0 1px #ffffff18;
  text-align:left;
}
.inventory-panel.client-open .restock:hover { background:linear-gradient(90deg,#1c7950,#299664); }
.inventory-panel.client-open .restock > i { position:relative; width:27px; height:27px; border:2px solid #f0f2ef; border-radius:50%; background:linear-gradient(#d94e57 0 43%,#273038 44% 56%,#edf0eb 57%); }
.inventory-panel.client-open .restock > i::after { content:""; position:absolute; left:8px; top:8px; width:7px; height:7px; border:2px solid #273038; border-radius:50%; background:#fff; }
.inventory-panel.client-open .restock span { color:#fff; }
.inventory-panel.client-open .restock span strong,.inventory-panel.client-open .restock span small { display:block; }
.inventory-panel.client-open .restock span strong { font-size:9px; letter-spacing:.5px; }
.inventory-panel.client-open .restock span small { margin-top:3px; color:#98d6b3; font-size:7px; font-weight:500; }
.inventory-panel.client-open .restock > b { padding:5px 8px 5px 22px; position:relative; border-radius:12px; background:#0a2d1de8; color:#ffd76a; font-size:10px; }
.inventory-panel.client-open .restock > b::before { content:""; position:absolute; left:7px; top:50%; width:9px; height:9px; transform:translateY(-50%); border:2px solid #f3c73b; border-radius:50%; background:#d7900e; }
.inventory-panel.client-open .source-note { margin:0; padding:8px 14px 11px; color:#657781; font-size:7px; text-align:center; }

@media(max-width:520px) {
  .panel.inventory-panel.client-open { width:calc(100vw - 12px); }
  .inventory-panel.client-open .loot-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
}