/**
 * Inventory page chrome matched to https://www.z5-unlimited.com/
 * Palette, type, logo, and controls from that site's tokens.
 */

body.z5-site {
  --bg-primary: #0b0d10;
  --bg-secondary: #101318;
  --bg-band-a: #0b0d10;
  --surface: #12161c;
  --surface-raised: #171c24;
  --surface-hover: #1c222c;
  --surface-sunken: #0e1116;
  --border: #262b36;
  --border-subtle: #1c212b;
  --border-hover: #343b4a;
  --text-primary: #f3f5f7;
  --text-secondary: #a7b0bd;
  --text-muted: #7d8796;
  --accent: #3ecf8e;
  --accent-hover: #5adb9f;
  --accent-soft: color-mix(in srgb, #3ecf8e 16%, #12161c);
  --on-accent: #06140e;
  --danger: #e55050;
  --radius: 4px;
  --radius-xs: 4px;
  --radius-sm: 4px;
  --radius-lg: 4px;
  --font: "Sora", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --wrap: 1160px;
  --app-header-h: 60px;
  --ok: #3ecf8e;
  --line: #262b36;
  --bg: #0b0d10;
  --z5-text-primary: #f3f5f7;
  --z5-text-secondary: #a7b0bd;
  --z5-text-muted: #7d8796;
  --z5-text-inverse: #06140e;
  --z5-border-default: #262b36;
  --z5-border-strong: #343b4a;
  --z5-purple-400: #3ecf8e;
  --z5-gradient-primary: #3ecf8e;
  --z5-gradient-primary-hover: #5adb9f;
  --z5-shadow-glow-sm: none;
  --z5-shadow-glow-md: none;
  --z5-shadow-sm: none;
  --z5-shadow-md: none;
  --z5-shadow-inset-depth: none;
  --z5-focus-ring: 0 0 0 2px #0b0d10, 0 0 0 4px color-mix(in srgb, #3ecf8e 45%, transparent);
  --z5-radius: 4px;
  --z5-radius-xs: 4px;
  --z5-radius-sm: 4px;
  --z5-radius-md: 4px;
  --z5-radius-lg: 4px;
  --z5-radius-xl: 4px;
  --z5-radius-2xl: 4px;
  --z5-radius-full: 4px;
  background: #0b0d10;
  color: #a7b0bd;
  font-family: "Sora", "Segoe UI", sans-serif;
}

body.z5-site .z5-app-scene {
  display: none;
}

body.z5-site .z5-app-layout,
body.z5-site .z5-app-main {
  background: #0b0d10;
  min-height: 100dvh;
}

body.z5-site .z5-app-content {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 28px 24px 48px;
}

body.z5-site .app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 12px max(24px, calc((100% - 1160px) / 2 + 24px));
  background: color-mix(in srgb, #0b0d10 50%, transparent);
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid #1c212b;
}

body.z5-site .app-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #f3f5f7;
}

body.z5-site .brand-mark {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.z5-site .brand-mark__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

body.z5-site .app-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.z5-site .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0 1rem;
  border: 1px solid #1c212b;
  border-radius: 8px;
  background: transparent;
  color: #a7b0bd;
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
}

body.z5-site .app-header-actions a.btn:hover {
  color: #f3f5f7;
  background: #1c222c;
}

body.z5-site .btn-ghost.is-active {
  color: #3ecf8e;
  background: color-mix(in srgb, #3ecf8e 16%, #12161c);
}

body.z5-site .w3-mm {
  --bg: #0b0d10;
  --panel: #12161c;
  --line: #262b36;
  --text: #f3f5f7;
  --muted: #7d8796;
  --dim: #343b4a;
  --cyan: #3ecf8e;
  --ok: #3ecf8e;
  --warn: #e8b84a;
  --err: #e55050;
  --ok-glow: color-mix(in srgb, #3ecf8e 28%, transparent);
  --err-glow: color-mix(in srgb, #e55050 30%, transparent);
  --radius: 4px;
  --radius-sm: 4px;
  font-family: "Sora", "Segoe UI", sans-serif;
  color: #a7b0bd;
}

body.z5-site .w3-mm .hdr,
body.z5-site .w3-mm .card {
  border-radius: 14px;
  border: 1px solid #262b36;
  background: #12161c;
  box-shadow: none;
}

body.z5-site .w3-mm .card-head,
body.z5-site .w3-mm .hdr {
  background: #12161c;
  border-bottom-color: #1c212b;
}

body.z5-site .w3-mm .card-title,
body.z5-site .w3-mm .hdr-title,
body.z5-site .w3-mm .inv-panel__title {
  color: #f3f5f7;
  font-family: "Sora", "Segoe UI", sans-serif;
}

body.z5-site .w3-mm .card-title i,
body.z5-site .w3-mm .hdr-icon {
  color: #3ecf8e;
}

body.z5-site .hdr-icon--logo {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

body.z5-site .hdr-icon--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

body.z5-site .z5-btn--primary {
  background: #3ecf8e;
  color: #06140e;
  border-color: #3ecf8e;
  border-radius: 12px;
  box-shadow: 0 8px 20px color-mix(in srgb, #3ecf8e 28%, transparent);
  font-family: "Sora", "Segoe UI", sans-serif;
}

body.z5-site .z5-btn--primary:hover:not(:disabled) {
  background: #5adb9f;
  border-color: #5adb9f;
  color: #06140e;
}

body.z5-site .z5-btn--primary::after,
body.z5-site .z5-btn:hover:not(:disabled)::after {
  display: none;
}

body.z5-site .z5-input,
body.z5-site select.z5-input {
  background: #0e1116;
  border: 1px solid #262b36;
  border-radius: 12px;
  color: #f3f5f7;
  box-shadow: none;
  font-family: "IBM Plex Mono", Consolas, monospace;
}

body.z5-site .z5-input:focus {
  border-color: #3ecf8e;
  box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px color-mix(in srgb, #3ecf8e 45%, transparent);
}

body.z5-site .inv-token:not(.is-selected) {
  border-color: #262b36;
  background: #171c24;
  border-radius: 12px;
  font-family: "Sora", "Segoe UI", sans-serif;
}

body.z5-site .inv-token.is-selected {
  border-color: #3ecf8e;
  background: color-mix(in srgb, #3ecf8e 10%, #12161c);
  box-shadow: inset 3px 0 0 #3ecf8e;
  border-radius: 12px;
  font-family: "Sora", "Segoe UI", sans-serif;
}

body.z5-site .inv-token:not(.is-selected):hover {
  border-color: #3d4654;
  background: #1c222c;
}

body.z5-site .inv-token__meta {
  font-family: "IBM Plex Mono", Consolas, monospace;
}

body.z5-site .inv-token__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #7d8796;
  font-family: "Sora", "Segoe UI", sans-serif;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

body.z5-site .inv-token__remove:hover {
  background: color-mix(in srgb, #e55050 18%, #12161c);
  border-color: color-mix(in srgb, #e55050 50%, transparent);
  color: #ff8d8d;
}

body.z5-site .token-hint,
body.z5-site .z5-app-topbar__desc {
  color: #7d8796;
}

body.z5-site,
body.z5-site *,
body.z5-site *::before,
body.z5-site *::after {
  border-radius: 4px !important;
}

body.z5-site .inv-item,
body.z5-site .inv-item.selected::after,
body.z5-site .loadout-slot,
body.z5-site .loadout-equip__empty,
body.z5-site .loadout-weapon--empty {
  border-radius: 12px !important;
}