.hud-inventory-toggle{
  position:relative;
  width:44px;
  height:44px;
  border:1px solid rgba(240,199,78,.5);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(38,48,38,.82),rgba(14,24,26,.86));
  color:#f0c74e;
  font-family:"Orbitron",sans-serif;
  font-size:1rem;
  font-weight:800;
  letter-spacing:0;
  cursor:pointer;
  box-shadow:0 0 22px rgba(240,199,78,.12),inset 0 0 18px rgba(125,199,201,.06);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.hud-inventory-toggle:hover,
.hud-inventory-toggle.active{
  transform:translateY(-1px);
  border-color:rgba(125,199,201,.75);
  box-shadow:0 0 24px rgba(125,199,201,.18),inset 0 0 18px rgba(240,199,78,.08);
}

.hud-inventory-toggle svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.city-inventory-modal{
  position:fixed;
  inset:0;
  z-index:650;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(3,8,12,.62);
  backdrop-filter:blur(9px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.city-inventory-modal.visible{
  opacity:1;
  pointer-events:auto;
}

.city-inventory-panel{
  width:min(1040px,calc(100vw - 32px));
  max-height:min(760px,calc(100vh - 36px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(125,199,201,.38);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(10,18,21,.96),rgba(7,11,16,.98));
  color:#eafff8;
  box-shadow:0 24px 80px rgba(0,0,0,.48),0 0 38px rgba(125,199,201,.12);
}

.city-inventory-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(125,199,201,.18);
}

.city-inventory-kicker{
  font-family:"Orbitron",sans-serif;
  font-size:.66rem;
  letter-spacing:2px;
  color:#7dc7c9;
  text-transform:uppercase;
}

.city-inventory-title{
  margin-top:4px;
  font-family:"Orbitron",sans-serif;
  font-size:1.12rem;
  letter-spacing:1px;
  color:#fff;
}

.city-inventory-close{
  width:38px;
  height:38px;
  border:1px solid rgba(240,199,78,.36);
  border-radius:8px;
  background:rgba(240,199,78,.08);
  color:#f0c74e;
  font-family:"Orbitron",sans-serif;
  font-size:.82rem;
  cursor:pointer;
}

.city-inventory-body{
  display:grid;
  grid-template-columns:1fr 1fr 1.15fr;
  gap:14px;
  padding:14px;
  overflow:auto;
}

.city-inventory-section{
  min-height:0;
  border:1px solid rgba(125,199,201,.22);
  border-radius:8px;
  background:rgba(9,18,23,.72);
  overflow:hidden;
}

.city-inventory-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 13px;
  border-bottom:1px solid rgba(125,199,201,.14);
}

.city-inventory-section-title{
  font-family:"Orbitron",sans-serif;
  font-size:.78rem;
  letter-spacing:1px;
  color:#f0c74e;
  text-transform:uppercase;
}

.city-inventory-count{
  min-width:28px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(125,199,201,.28);
  border-radius:6px;
  color:#7dc7c9;
  font-family:"Orbitron",sans-serif;
  font-size:.7rem;
}

.city-inventory-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:506px;
  overflow:auto;
  padding:10px;
}

.city-inventory-empty{
  padding:18px 12px;
  color:#8fa8aa;
  font-size:.86rem;
  line-height:1.35;
}

.city-inventory-item,
.city-inventory-robot{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:10px;
  align-items:center;
  min-width:0;
  border:1px solid rgba(125,199,201,.18);
  border-radius:8px;
  background:rgba(4,13,17,.78);
  padding:9px;
}

.city-inventory-thumb{
  width:48px;
  height:48px;
  border:1px solid rgba(125,199,201,.22);
  border-radius:7px;
  background:rgba(125,199,201,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#7dc7c9;
  font-family:"Orbitron",sans-serif;
  font-size:.65rem;
}

.city-inventory-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.city-inventory-name{
  min-width:0;
  color:#fff;
  font-family:"Orbitron",sans-serif;
  font-size:.76rem;
  letter-spacing:.4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.city-inventory-meta,
.city-inventory-sub{
  margin-top:3px;
  color:#9db5b5;
  font-size:.76rem;
  line-height:1.25;
}

.city-inventory-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
}

.city-inventory-badge{
  border:1px solid rgba(240,199,78,.26);
  border-radius:5px;
  padding:2px 6px;
  color:#f0c74e;
  background:rgba(240,199,78,.08);
  font-family:"Orbitron",sans-serif;
  font-size:.62rem;
}

.city-inventory-robot{
  grid-template-columns:14px 1fr auto;
  align-items:center;
}

.city-inventory-robot.active{
  border-color:rgba(240,199,78,.42);
  background:rgba(240,199,78,.07);
}

.city-inventory-robot-swatch{
  width:10px;
  height:54px;
  border-radius:4px;
  background:linear-gradient(180deg,#f0c74e,#7dc7c9);
  box-shadow:0 0 16px rgba(125,199,201,.32);
}

.city-inventory-use{
  align-self:stretch;
  min-width:82px;
  border:1px solid rgba(125,199,201,.4);
  border-radius:8px;
  background:rgba(125,199,201,.1);
  color:#7dc7c9;
  font-family:"Orbitron",sans-serif;
  font-size:.7rem;
  letter-spacing:1px;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}

.city-inventory-use:hover{
  border-color:rgba(240,199,78,.58);
  background:rgba(240,199,78,.12);
  color:#f0c74e;
}

.city-inventory-status{
  min-height:36px;
  padding:10px 18px 14px;
  border-top:1px solid rgba(125,199,201,.15);
  color:#9db5b5;
  font-size:.84rem;
}

.city-inventory-status.ok{color:#9ed8a4}
.city-inventory-status.error{color:#ff9f8b}

@media (max-width:920px){
  .city-inventory-body{grid-template-columns:1fr}
  .city-inventory-list{max-height:280px}
}

@media (max-width:700px){
  .hud-inventory-toggle{
    width:40px;
    height:40px;
  }

  .city-inventory-modal{padding:12px}
  .city-inventory-panel{width:calc(100vw - 24px);max-height:calc(100vh - 24px)}
  .city-inventory-head{padding:15px 14px 12px}
  .city-inventory-body{padding:10px;gap:10px}
  .city-inventory-robot{grid-template-columns:10px 1fr}
  .city-inventory-use{grid-column:1 / -1;min-height:38px}
}