/* =====================================================================
   Sky-theme painted frames for Skill Tree + Equipment (2026-09-26)
   Frames: /ui/skill/frame-sky.webp (1536x1024)
           /ui/equipment/frame-sky.webp (1450x1085)
   All positions are % of the frame, sizes/fonts in cqw (1cqw = 1% of
   the window width), so everything scales with the window.
   Remove the <link> to css/skill-equip-sky.css to revert.
   ===================================================================== */

/* ---------------------------------------------------------------------
   SKILL TREE  (wide frame -> PC + landscape phones; portrait phones keep
   the old tall frame which suits a narrow screen)
   --------------------------------------------------------------------- */
@media (orientation: landscape), (min-width: 641px) {
  html body #hud section#skill-window.window {
    width: min(1040px, calc((100vw - 12px) / var(--ui-zoom, 1)), calc((100dvh - 20px) / var(--ui-zoom, 1) * 1.5)) !important;
    aspect-ratio: 1536 / 1024 !important;
    height: auto !important;
    background: url('/ui/skill/frame-sky.webp?v=2') center / 100% 100% no-repeat !important;
    filter: drop-shadow(0 12px 22px rgba(10, 30, 60, 0.4)) !important;
    color: #10294f !important;
    font-family: 'Noto Sans Thai', Mali, Tahoma, sans-serif !important;
  }
  /* banner = drag handle; the title is live text (translatable) on the sky banner */
  html body #hud section#skill-window.window > .titlebar {
    left: 24.7% !important; right: auto !important; width: 60.5% !important;
    top: 8.6% !important; height: 9% !important;
    display: flex !important; align-items: center !important; z-index: 5 !important;
  }
  html body #hud section#skill-window.window > .titlebar > span {
    position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip-path: none !important;
    margin-left: 8.6% !important; white-space: nowrap !important;
    font-family: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif !important; font-weight: 700 !important;
    font-size: 3.5cqw !important; line-height: 1 !important; color: #1b3a7a !important;
    text-shadow: -0.14cqw 0 #ffffff, 0.14cqw 0 #ffffff, 0 -0.14cqw #ffffff, 0 0.14cqw #ffffff, 0 0.3cqw 0.5cqw rgba(20, 60, 120, 0.35) !important;
    pointer-events: none !important;
  }
  html body #hud section#skill-window.window > .titlebar button {
    left: 101.9% !important; top: 4% !important;
    width: 4.8cqw !important; height: 4.8cqw !important; border-radius: 50% !important;
  }

  /* skill grids */
  html body #hud section#skill-window.window .skill-grid {
    left: 14.7% !important; width: 71.6% !important;
    grid-template-columns: repeat(4, 17.2cqw) !important;
    column-gap: 0.9cqw !important;
    justify-content: start !important;
  }
  html body #hud section#skill-window.window .skill-zone:not(.skill-zone-passive) .skill-grid { top: 26.6% !important; height: 11cqw !important; }
  html body #hud section#skill-window.window .skill-grid:is([data-count="0"],[data-count="1"],[data-count="2"],[data-count="3"]) { grid-template-columns: repeat(3, 22.8cqw) !important; }
  html body #hud section#skill-window.window .skill-grid[data-count="5"] { grid-template-columns: repeat(5, 13.6cqw) !important; column-gap: 0.75cqw !important; }
  html body #hud section#skill-window.window .skill-grid[data-count="6"],
  html body #hud section#skill-window.window .skill-grid[data-count="7"] { grid-template-columns: repeat(6, 11.3cqw) !important; column-gap: 0.6cqw !important; }
  html body #hud section#skill-window.window .skill-zone-passive .skill-grid.skill-grid { top: 54% !important; height: 9.1cqw !important; width: 57% !important; grid-template-columns: repeat(3, 18.4cqw) !important; column-gap: 0.9cqw !important; }

  /* horizontal skill card: tile | name / rank / lock */
  html body #hud section#skill-window.window .skill-grid article:not([hidden]) {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr 1fr !important;
    column-gap: 0.6cqw !important; row-gap: 0.2cqw !important;
    align-items: center !important; justify-items: center !important;
    height: 100% !important; padding: 0.5cqw 0.7cqw 0.6cqw !important;
    box-sizing: border-box !important;
    border-radius: 0.9cqw !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef6fe 60%, #dcecfb 100%) !important;
    box-shadow: inset 0 0 0 0.14cqw #9ec2e6, inset 0 0 0 0.32cqw #ffffff, 0 0.2cqw 0.5cqw rgba(20, 60, 120, 0.18) !important;
  }
  html body #hud section#skill-window.window .skill-grid article.selected {
    background: linear-gradient(180deg, #fffdf4 0%, #fff4d6 100%) !important;
    box-shadow: inset 0 0 0 0.2cqw #d9a53a, inset 0 0 0 0.4cqw #fff6d8, 0 0 0.9cqw rgba(234, 177, 55, 0.65) !important;
  }
  html body #hud section#skill-window.window .skill-grid article.selected::before { content: none !important; }
  html body #hud section#skill-window.window .skill-grid .skill-tile { grid-column: 1 !important; grid-row: 2 / 4 !important; }
  html body #hud section#skill-window.window .skill-grid .skill-name { grid-column: 1 / 3 !important; grid-row: 1 !important; }
  html body #hud section#skill-window.window .skill-grid .skill-rank { grid-column: 2 !important; grid-row: 2 !important; margin: 0 !important; align-self: end !important; }
  html body #hud section#skill-window.window .skill-grid .skill-lock { grid-column: 2 !important; grid-row: 3 !important; align-self: start !important; margin-top: 0.3cqw !important; }

  html body #hud section#skill-window.window .skill-tile {
    width: 6.2cqw !important; height: 6.2cqw !important; padding: 0.35cqw !important; box-sizing: border-box !important;
    border-radius: 0.7cqw !important;
    background: radial-gradient(#ffffff 55%, #e3effb) !important;
    border: 0.14cqw solid #5f86b8 !important;
    box-shadow: 0 0 0 0.14cqw #dcecfb, 0 0.2cqw 0.4cqw rgba(20, 60, 120, 0.2) !important;
  }
  html body #hud section#skill-window.window .skill-zone-passive .skill-tile { width: 5.6cqw !important; height: 5.6cqw !important; }
  html body #hud section#skill-window.window .skill-name {
    max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important;
    height: auto !important; line-height: 1.2 !important;
    color: #10294f !important; font-size: 1.7cqw !important;
  }
  /* rank row: −  n / 10  +  (must fit inside the card's right column) */
  html body #hud section#skill-window.window .skill-rank { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; max-width: 100% !important; }
  html body #hud section#skill-window.window .skill-rank button { flex: 0 0 auto !important; width: 2.3cqw !important; height: 2.2cqw !important; }
  html body #hud section#skill-window.window .skill-rank span {
    flex: 0 0 auto !important; width: 4.4cqw !important; line-height: 2.2cqw !important; text-align: center !important;
    color: #10294f !important; font-weight: 700 !important; font-size: 1.3cqw !important;
  }
  /* 1-3 cards: roomier cards */
  html body #hud section#skill-window.window .skill-grid:is([data-count="1"],[data-count="2"],[data-count="3"]) .skill-tile { width: 7cqw !important; height: 7cqw !important; }
  html body #hud section#skill-window.window .skill-grid:is([data-count="1"],[data-count="2"],[data-count="3"]) .skill-rank button { width: 2.7cqw !important; height: 2.6cqw !important; }
  html body #hud section#skill-window.window .skill-grid:is([data-count="1"],[data-count="2"],[data-count="3"]) .skill-rank span { width: 5.4cqw !important; line-height: 2.6cqw !important; font-size: 1.5cqw !important; }
  html body #hud section#skill-window.window .skill-lock {
    width: auto !important; min-width: 9cqw !important; max-width: 100% !important;
    height: 2.4cqw !important; line-height: 2.4cqw !important; padding: 0 0.8cqw !important;
    border-radius: 99px !important; box-sizing: border-box !important;
    overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important;
    background: #eaf3fc !important; box-shadow: inset 0 0 0 0.12cqw #a9c6e2 !important;
    color: #3a5680 !important; font-size: 1.2cqw !important;
  }
  html body #hud section#skill-window.window .skill-lock.locked { background: #fdeeee !important; box-shadow: inset 0 0 0 0.12cqw #e2a9a9 !important; color: #a0342a !important; }
  html body #hud section#skill-window.window .skill-lock.pending { background: #e6f0ff !important; color: #1f5fc4 !important; }
  html body #hud section#skill-window.window .skill-lock:not(.locked):not(.unlearned):not(.pending) { background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; box-shadow: inset 0 0 0 0.12cqw #9c7a36 !important; color: #4a3208 !important; }
  /* 5+ cards per row: narrow cards -> vertical stack (name / tile / rank / lock) */
  html body #hud section#skill-window.window .skill-zone:not(.skill-zone-passive) .skill-grid:is([data-count="5"],[data-count="6"],[data-count="7"]) article:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto auto !important;
    row-gap: 0.15cqw !important; padding: 0.35cqw 0.4cqw !important; align-content: center !important;
  }
  html body #hud section#skill-window.window .skill-zone:not(.skill-zone-passive) .skill-grid:is([data-count="5"],[data-count="6"],[data-count="7"]) :is(.skill-name,.skill-tile,.skill-rank,.skill-lock) { grid-column: 1 !important; margin: 0 !important; align-self: center !important; }
  html body #hud section#skill-window.window .skill-zone:not(.skill-zone-passive) .skill-grid:is([data-count="5"],[data-count="6"],[data-count="7"]) .skill-name { grid-row: 1 !important; font-size: 1.35cqw !important; }
  html body #hud section#skill-window.window .skill-zone:not(.skill-zone-passive) .skill-grid:is([data-count="5"],[data-count="6"],[data-count="7"]) .skill-tile { grid-row: 2 !important; width: 4.4cqw !important; height: 4.4cqw !important; padding: 0.25cqw !important; }
  html body #hud section#skill-window.window .skill-zone:not(.skill-zone-passive) .skill-grid:is([data-count="5"],[data-count="6"],[data-count="7"]) .skill-rank { grid-row: 3 !important; }
  html body #hud section#skill-window.window .skill-zone:not(.skill-zone-passive) .skill-grid:is([data-count="5"],[data-count="6"],[data-count="7"]) .skill-rank button { width: 2cqw !important; height: 1.9cqw !important; }
  html body #hud section#skill-window.window .skill-zone:not(.skill-zone-passive) .skill-grid:is([data-count="5"],[data-count="6"],[data-count="7"]) .skill-rank span { width: 4cqw !important; font-size: 1.15cqw !important; line-height: 1.9cqw !important; }
  html body #hud section#skill-window.window .skill-zone:not(.skill-zone-passive) .skill-grid:is([data-count="5"],[data-count="6"],[data-count="7"]) .skill-lock { grid-row: 4 !important; min-width: 0 !important; font-size: 1cqw !important; height: 1.8cqw !important; line-height: 1.8cqw !important; }

  /* detail panel */
  html body #hud section#skill-window.window .skill-detail-icon {
    left: 14.35% !important; top: 71.8% !important;
    width: 8cqw !important; height: 5.9cqw !important;
    border-radius: 0.5cqw !important; background: radial-gradient(#ffffff 58%, #e3effb) !important;
  }
  html body #hud section#skill-window.window #skill-description strong {
    left: 24.1% !important; top: 71.7% !important; right: 25.5% !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    color: #10294f !important; font-size: 2cqw !important;
  }
  html body #hud section#skill-window.window .skill-detail-rule { left: 24.1% !important; top: 75.3% !important; width: 50% !important; height: 0.14cqw !important; background: linear-gradient(90deg, #7fa9d6, #b9d3ee 90%, rgba(185, 211, 238, 0)) !important; }
  html body #hud section#skill-window.window .skill-detail-rule::after { background: #7fa9d6 !important; }
  html body #hud section#skill-window.window #skill-description p {
    top: 75.6% !important; bottom: 19.2% !important; left: 24.1% !important; right: 38.2% !important;
    display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important;
    align-items: initial !important; line-height: 1.3 !important;
    color: #1d3560 !important; font-size: 1.3cqw !important;
  }
  /* hint sits on the pale angel-cat art at the right of the passive panel */
  html body #hud section#skill-window.window .skill-drag-help {
    left: 72.5% !important; right: auto !important; width: 14.5% !important; top: 54.5% !important;
    align-items: flex-start !important; gap: 0.6cqw !important;
    white-space: normal !important; line-height: 1.35 !important; text-align: left !important;
    padding: 0.5cqw 0.6cqw !important; border-radius: 0.6cqw !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #2d4c7a !important; font-size: 1.15cqw !important;
  }
  html body #hud section#skill-window.window .skill-drag-help::before { width: 1.6cqw !important; height: 1.6cqw !important; font: 700 1.1cqw / 1.6cqw Georgia, serif !important; background: #2d5ea8 !important; box-shadow: none !important; }

  /* buttons column on the right of the detail panel */
  html body #hud section#skill-window.window #skill-use {
    left: auto !important; right: 13.3% !important; top: 71.9% !important;
    width: 11.4cqw !important; height: 2.9cqw !important; padding: 0 !important;
    border-radius: 0.7cqw !important;
    background: linear-gradient(180deg, #4f93f2, #1f5fd0 55%, #174cb0) !important;
    box-shadow: inset 0 0 0 0.16cqw #0e2a66, inset 0 0.25cqw 0 #9cc6ff !important;
    font-size: 1.35cqw !important;
  }
  html body #hud section#skill-window.window #skill-reset,
  html body #hud section#skill-window.window #skill-apply {
    top: 76.6% !important; width: 5.5cqw !important; height: 2.7cqw !important;
    border-radius: 0.7cqw !important; font-size: 1.3cqw !important;
    font-family: 'Noto Sans Thai', Tahoma, sans-serif !important;
  }
  /* row 2 of the detail panel: [JOB1][JOB2][Reset][Apply] */
  html body #hud section#skill-window.window #skill-reset { left: 75.1% !important; }
  html body #hud section#skill-window.window #skill-apply { left: 81.2% !important; }
  html body #hud section#skill-window.window footer .skill-job-tab {
    top: 76.6% !important; width: 5.5cqw !important; height: 2.7cqw !important; padding: 0 !important;
    border-radius: 0.7cqw !important; font-family: 'Noto Sans Thai', Tahoma, sans-serif !important;
    font-weight: 800 !important; font-size: 1.25cqw !important; letter-spacing: 0.04em !important;
    background: linear-gradient(180deg, #ffffff, #dcebfa) !important; color: #1d3a78 !important; text-shadow: none !important;
    border: 0 !important; box-shadow: inset 0 0 0 0.16cqw #5f86b8 !important; animation: none !important;
  }
  html body #hud section#skill-window.window footer .skill-job-tab[hidden] { display: none !important; }
  html body #hud section#skill-window.window footer #skill-job1 { left: 62.9% !important; }
  html body #hud section#skill-window.window footer #skill-job2 { left: 69.0% !important; }
  html body #hud section#skill-window.window footer .skill-job-tab.active {
    background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #3d2806 !important;
    box-shadow: inset 0 0 0 0.16cqw #9c7a36, 0 0 0.6cqw rgba(234, 177, 55, 0.6) !important;
  }
  html body #hud section#skill-window.window footer .skill-job-tab:hover:not(.active) { filter: brightness(1.06) !important; }
  html body #hud section#skill-window.window footer button:disabled {
    background: #e3ecf6 !important; box-shadow: inset 0 0 0 0.14cqw #a9c6e2 !important; color: rgba(29, 53, 102, 0.5) !important;
  }

  /* skill points -> small plaque under the hotbar */
  html body #hud section#skill-window.window #skill-points {
    left: 37.8% !important; width: 24.4% !important; top: 95.2% !important; height: 2.7% !important;
    justify-content: center !important; gap: 0.6cqw !important;
    color: #ffffff !important; text-shadow: 0 0.12cqw 0 #0b2050 !important; font-size: 1.6cqw !important;
  }
  html body #hud section#skill-window.window #skill-points b { color: #ffe39a !important; font-weight: 800 !important; font-size: 1.75cqw !important; }
  html body #hud section#skill-window.window .skill-brand { display: none !important; }

  /* hotbar slots 1-9 (numbers are painted) */
  html body #hud section#skill-window.window .skill-slots {
    left: 21.94% !important; top: 86.7% !important; width: 55.6% !important; height: 4.88cqw !important;
    grid-template-columns: repeat(9, 4.88cqw) !important; column-gap: 1.45cqw !important;
  }
  html body #hud section#skill-window.window .skill-slots button { border-radius: 0.5cqw !important; }
}

/* ---------------------------------------------------------------------
   EQUIPMENT  (same aspect as the old frame -> used on every screen)
   --------------------------------------------------------------------- */
html body #hud section#equipment-window.window.equipment {
  width: min(780px, calc((100vw - 12px) / var(--ui-zoom, 1)), calc((100dvh - 24px) / var(--ui-zoom, 1) * 1.336)) !important;
  aspect-ratio: 1450 / 1085 !important;
  background: url('/ui/equipment/frame-sky.webp?v=1') center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 12px 22px rgba(10, 30, 60, 0.4)) !important;
  color: #10294f !important;
  font-family: 'Noto Sans Thai', Mali, Tahoma, sans-serif !important;
}
/* title in the blue top bar (drag handle) */
html body #hud section#equipment-window.window.equipment > .titlebar {
  left: 20% !important; right: auto !important; width: 61% !important;
  top: 10.1% !important; height: 9.4% !important; padding: 0 !important;
  gap: 0.3cqw !important;
}
html body #hud section#equipment-window.window.equipment .eq-title {
  color: #ffffff !important; font-size: 3.4cqw !important;
  font-family: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif !important;
  text-shadow: -0.15cqw 0 #0d2a5c, 0.15cqw 0 #0d2a5c, 0 -0.15cqw #0d2a5c, 0 0.15cqw #0d2a5c, 0 0.35cqw rgba(0, 0, 0, 0.35) !important;
}
html body #hud section#equipment-window.window.equipment .eq-sub { color: #cfe4ff !important; font-size: 1.2cqw !important; text-shadow: 0 0.12cqw rgba(0, 0, 0, 0.45) !important; }
html body #hud section#equipment-window.window.equipment .eq-sub::before,
html body #hud section#equipment-window.window.equipment .eq-sub::after { color: #ffd98a !important; }
/* invisible hit area over the painted red X */
html body #hud section#equipment-window.window.equipment .titlebar button[data-close] {
  left: 117.5% !important; top: 9.8% !important; width: 8.6% !important; height: auto !important; aspect-ratio: 1 !important;
}
html body #hud section#equipment-window.window.equipment .titlebar button[data-close]:hover { background: radial-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%) !important; }

/* class / job line in the white plaque */
html body #hud section#equipment-window.window.equipment .equipment-tabline { left: 33% !important; width: 33.4% !important; top: 20.6% !important; height: 4.1% !important; }
html body #hud section#equipment-window.window.equipment .equipment-tabline small { color: #16325c !important; font-size: 1.75cqw !important; }

/* slot columns in the two big panels */
html body #hud section#equipment-window.window.equipment .paper-column {
  left: 9.6% !important; width: 31.5% !important; top: 27.1% !important; height: 41.7% !important; gap: 0.8cqw !important;
}
html body #hud section#equipment-window.window.equipment .paper-column.paper-right { left: 58.1% !important; }
html body #hud section#equipment-window.window.equipment .paper-slot {
  grid-template-columns: 7.6cqw minmax(0, 1fr) !important;
  border-radius: 0.9cqw !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef6fe 65%, #deedfb 100%) !important;
  box-shadow: inset 0 0 0 0.14cqw #9ec2e6, inset 0 0 0 0.34cqw #ffffff, 0 0.15cqw 0.4cqw rgba(20, 60, 120, 0.15) !important;
}
html body #hud section#equipment-window.window.equipment .paper-slot img {
  background: radial-gradient(#ffffff 55%, #e3effb) !important;
  box-shadow: inset 0 0 0 0.14cqw #7fa9d6 !important;
}
html body #hud section#equipment-window.window.equipment .paper-slot small { color: #4f6f9c !important; font-size: 1.3cqw !important; }
html body #hud section#equipment-window.window.equipment .paper-slot small::before,
html body #hud section#equipment-window.window.equipment .paper-slot strong::before { color: #3d7fd0 !important; }
html body #hud section#equipment-window.window.equipment .paper-slot strong { color: #10294f !important; font-size: 1.85cqw !important; }
html body #hud section#equipment-window.window.equipment .paper-slot.slot-empty {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(226, 238, 250, 0.7)) !important;
  box-shadow: inset 0 0 0 0.14cqw #bcd3ea, inset 0 0 0 0.34cqw rgba(255, 255, 255, 0.7) !important;
}
html body #hud section#equipment-window.window.equipment .paper-slot.slot-empty img { background: rgba(255, 255, 255, 0.6) !important; box-shadow: inset 0 0 0 0.14cqw #bcd3ea !important; }
html body #hud section#equipment-window.window.equipment .paper-slot.slot-empty small { color: #7d93b3 !important; }
html body #hud section#equipment-window.window.equipment .paper-slot.slot-empty strong { color: #8a9bb5 !important; }
html body #hud section#equipment-window.window.equipment .paper-slot[aria-pressed="true"] {
  background: linear-gradient(180deg, #fffdf4, #fff1cc) !important;
  box-shadow: inset 0 0 0 0.22cqw #d9a53a, inset 0 0 0 0.44cqw #fff6d8, 0 0 0.9cqw rgba(234, 177, 55, 0.6) !important;
}

/* character in the middle column */
html body #hud section#equipment-window.window.equipment .eq-doll { left: 43.6% !important; width: 12.1% !important; top: 25.8% !important; height: 45.3% !important; }
html body #hud section#equipment-window.window.equipment #eq-sprite { top: 46% !important; width: 25cqw !important; height: 25cqw !important; }
html body #hud section#equipment-window.window.equipment #eq-class {
  top: 86% !important; color: #1d4f9a !important; font-size: 1.35cqw !important;
  text-shadow: 0 0 0.3cqw #ffffff, 0 0 0.3cqw #ffffff !important;
}

/* bottom panel: selected item + buttons, loadouts underneath */
html body #hud section#equipment-window.window.equipment .eq-selected-icon { left: 11% !important; width: 9.2% !important; top: 73.9% !important; height: 12.7% !important; }
html body #hud section#equipment-window.window.equipment .equipment-detail > div { left: 22.6% !important; width: 53% !important; top: 74.3% !important; height: 7.6% !important; gap: 0.3cqw !important; }
html body #hud section#equipment-window.window.equipment .equipment-detail strong { color: #10294f !important; font-size: 2.2cqw !important; }
html body #hud section#equipment-window.window.equipment .equipment-detail span:not(.eq-selected-icon) { -webkit-line-clamp: 1 !important; color: #2f7a45 !important; font-size: 1.5cqw !important; }
html body #hud section#equipment-window.window.equipment .equipment-detail button { left: auto !important; right: 11.2% !important; width: 12.4% !important; height: 4.3% !important; font-size: 1.6cqw !important; }
html body #hud section#equipment-window.window.equipment #equipment-change {
  top: 74.4% !important; color: #ffffff !important;
  background: linear-gradient(180deg, #4f93f2, #1f5fd0 55%, #174cb0) !important;
  box-shadow: inset 0 0 0 0.16cqw #0e2a66, inset 0 0.25cqw 0 #9cc6ff !important;
}
html body #hud section#equipment-window.window.equipment #equipment-remove {
  top: 79.2% !important; color: #1d3560 !important;
  background: linear-gradient(180deg, #ffffff, #dbe8f6) !important;
  box-shadow: inset 0 0 0 0.16cqw #7fa9d6 !important;
}
html body #hud section#equipment-window.window.equipment .loadout-bar { left: 22.6% !important; width: 67.3% !important; top: 83.4% !important; height: 3.9% !important; }
html body #hud section#equipment-window.window.equipment .loadout-chip {
  background: linear-gradient(180deg, #ffffff, #e6f1fc) !important;
  box-shadow: inset 0 0 0 0.14cqw #9ec2e6 !important; color: #10294f !important;
}
html body #hud section#equipment-window.window.equipment .loadout-chip.loadout-empty {
  background: rgba(255, 255, 255, 0.55) !important; box-shadow: inset 0 0 0 0.14cqw #bcd3ea !important; color: #7d93b3 !important;
}
html body #hud section#equipment-window.window.equipment .loadout-chip.loadout-worn {
  background: linear-gradient(180deg, #fffdf4, #fff1cc) !important; box-shadow: inset 0 0 0 0.2cqw #d9a53a !important;
}
html body #hud section#equipment-window.window.equipment .eq-plaque { display: none !important; }