/*
 * AREXMODS PRODUCT REFERENCE REDESIGN v1.5.0-r2
 * Visual overlay loaded AFTER current v1.4.10-r1-r1 + v1.4.17-r2 layers.
 * Scope: /resource/* via body.am1417-resource-page.
 * No DOM repack. No backend/API/DB changes.
 */

*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --arx150-bg: rgba(4, 11, 18, .985);
  --arx150-bg2: rgba(7, 18, 28, .97);
  --arx150-card: linear-gradient(180deg, rgba(7, 20, 31, .985), rgba(4, 13, 21, .992));
  --arx150-line: rgba(72, 132, 173, .34);
  --arx150-line-soft: rgba(87, 137, 173, .18);
  --arx150-text: #f5f8fb;
  --arx150-muted: #8da3b4;
  --arx150-orange: #ff7b00;
  --arx150-orange2: #ff9b22;
  --arx150-blue: #22bdfd;
  --arx150-green: #62ecad;
}

body.am1417-resource-page main {
  padding-top: 10px !important;
  padding-bottom: 28px !important;
}

body.am1417-resource-page .resource-pro-v071 {
  width: min(95vw, 1580px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.am1417-resource-page .resource-breadcrumbs-v071 {
  min-height: 34px !important;
  margin: 0 0 10px !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(4, 12, 19, .70) !important;
  color: #a1b2c0 !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}

/* =========================================================
   HERO — approved reference direction
   ========================================================= */
@media (min-width: 1180px) {
  body.am1417-resource-page .resource-hero-v071 {
    display: grid !important;
    grid-template-columns: minmax(420px, 1.08fr) minmax(500px, 1.23fr) minmax(300px, .72fr) !important;
    grid-auto-rows: 352px !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    height: 352px !important;
    min-height: 352px !important;
    max-height: 352px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.am1417-resource-page .resource-hero-v071.section-block {
    height: 352px !important;
    min-height: 352px !important;
    max-height: 352px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.am1417-resource-page .resource-hero-media-v071,
  body.am1417-resource-page .resource-hero-copy-v071,
  body.am1417-resource-page .resource-action-top-v140 {
    position: relative !important;
    min-width: 0 !important;
    width: auto !important;
    height: 352px !important;
    min-height: 352px !important;
    max-height: 352px !important;
    margin: 0 !important;
    border: 1px solid var(--arx150-line) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 50% -30%, rgba(25, 127, 189, .12), transparent 45%),
      var(--arx150-card) !important;
    box-shadow:
      0 18px 44px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-hero-media-v071::before,
  body.am1417-resource-page .resource-hero-copy-v071::before,
  body.am1417-resource-page .resource-action-top-v140::before {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    left: 18px !important;
    right: 18px !important;
    top: -1px !important;
    height: 1px !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent, rgba(40, 185, 255, .50), transparent) !important;
  }

  body.am1417-resource-page .resource-action-top-v140::before {
    background: linear-gradient(90deg, transparent, rgba(255, 132, 18, .68), transparent) !important;
  }

  /* Gallery */
  body.am1417-resource-page .resource-hero-media-v071 {
    display: grid !important;
    grid-template-rows: 271px 59px !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body.am1417-resource-page .resource-hero-media-v071 > img {
    display: block !important;
    width: 100% !important;
    height: 271px !important;
    max-width: 100% !important;
    max-height: 271px !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 1px solid rgba(111, 157, 190, .24) !important;
    border-radius: 12px !important;
    background: #06111a !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.24) !important;
  }

  body.am1417-resource-page .resource-hero-overlay-v071 {
    left: 19px !important;
    right: 19px !important;
    bottom: 78px !important;
    z-index: 4 !important;
  }

  body.am1417-resource-page :is(.resource-hero-thumbs-v143,.resource-hero-thumbs-v144) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 52px !important;
    gap: 7px !important;
    min-width: 0 !important;
    height: 59px !important;
  }

  body.am1417-resource-page :is(.resource-hero-thumb-v143,.resource-hero-thumb-v144,.resource-hero-more-v143,.resource-hero-more-v144) {
    height: 59px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(86, 132, 165, .34) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.025) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform .16s ease, border-color .16s ease, filter .16s ease !important;
  }

  body.am1417-resource-page :is(.resource-hero-thumb-v143,.resource-hero-thumb-v144):first-child {
    border-color: #ff8615 !important;
    box-shadow: 0 0 0 1px rgba(255, 134, 21, .32) inset !important;
  }

  body.am1417-resource-page :is(.resource-hero-thumb-v143,.resource-hero-thumb-v144):hover {
    transform: translateY(-1px) !important;
    border-color: rgba(255, 139, 24, .75) !important;
    filter: brightness(1.06) !important;
  }

  body.am1417-resource-page :is(.resource-hero-thumb-v143,.resource-hero-thumb-v144) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Center info */
  body.am1417-resource-page .resource-hero-copy-v071 {
    display: flex !important;
    flex-direction: column !important;
    padding: 18px 20px !important;
  }

  body.am1417-resource-page .resource-kicker-v071 {
    margin: 0 0 9px !important;
    color: #2ac9ff !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .025em !important;
  }

  body.am1417-resource-page .resource-hero-copy-v071 h1 {
    margin: 0 0 10px !important;
    color: var(--arx150-text) !important;
    font-size: clamp(28px, 1.65vw, 35px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    font-weight: 900 !important;
    overflow-wrap: anywhere !important;
  }

  body.am1417-resource-page .resource-lead-v071 {
    margin: 0 0 12px !important;
    color: #adbdc9 !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-author-v071 {
    width: max-content !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 0 0 12px !important;
    padding: 6px 9px !important;
    border: 1px solid rgba(75, 137, 178, .27) !important;
    border-radius: 10px !important;
    background: rgba(4, 15, 23, .74) !important;
  }

  body.am1417-resource-page .resource-author-avatar-v071 {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  body.am1417-resource-page .resource-author-v071 small {
    font-size: 8px !important;
    color: #768b9c !important;
  }

  body.am1417-resource-page .resource-author-v071 b {
    font-size: 10.5px !important;
  }

  body.am1417-resource-page .resource-metrics-v071 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: auto !important;
    padding-top: 9px !important;
    border-top: 1px solid rgba(91, 143, 181, .15) !important;
    background: transparent !important;
  }

  body.am1417-resource-page .resource-metrics-v071 > div {
    min-width: 0 !important;
    min-height: 67px !important;
    padding: 8px 7px !important;
    border: 1px solid rgba(77, 135, 174, .24) !important;
    border-radius: 10px !important;
    background: rgba(5, 16, 25, .78) !important;
    text-align: center !important;
  }

  body.am1417-resource-page .resource-metrics-v071 > div:last-child {
    border-right: 1px solid rgba(77, 135, 174, .24) !important;
  }

  body.am1417-resource-page .resource-metrics-v071 strong {
    display: block !important;
    color: #f4f8fb !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  body.am1417-resource-page .resource-metrics-v071 span {
    display: block !important;
    margin-top: 5px !important;
    color: #71879a !important;
    font-size: 8px !important;
    line-height: 1.12 !important;
  }

  /* Right CTA */
  body.am1417-resource-page .resource-action-top-v140 {
    padding: 18px 17px !important;
    border-color: rgba(255, 130, 12, .58) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 128, 0, .13), transparent 38%),
      linear-gradient(180deg, rgba(12, 20, 27, .99), rgba(5, 12, 18, .995)) !important;
    box-shadow:
      0 18px 46px rgba(0,0,0,.26),
      0 0 32px rgba(255, 121, 0, .07) !important;
  }

  body.am1417-resource-page .resource-price-line-v071 {
    margin: 0 0 15px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }

  body.am1417-resource-page .resource-price-line-v071 span {
    color: #8298aa !important;
    font-size: 10px !important;
  }

  body.am1417-resource-page .resource-price-line-v071 strong {
    color: var(--arx150-green) !important;
    font-size: clamp(32px, 2vw, 39px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  body.am1417-resource-page .resource-primary-actions-v071 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.am1417-resource-page .resource-primary-actions-v071 :is(a,button,.btn) {
    min-height: 47px !important;
    height: 47px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
  }

  body.am1417-resource-page .resource-primary-actions-v071 :is(.btn-primary,button.btn-primary) {
    color: #fff !important;
    border-color: rgba(255, 164, 76, .72) !important;
    background: linear-gradient(180deg, #ff9a24, #ff6c00) !important;
    box-shadow: 0 11px 28px rgba(255, 109, 0, .24) !important;
  }

  body.am1417-resource-page .resource-primary-actions-v071 :is(a,button,.btn):hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
  }

  body.am1417-resource-page .resource-safe-v071,
  body.am1417-resource-page .commerce-license-note-v080,
  body.am1417-resource-page .unified-balance-v082 {
    margin-top: 8px !important;
    padding: 7px 8px !important;
    border-radius: 9px !important;
    font-size: 8.5px !important;
    line-height: 1.2 !important;
  }

  /* =========================================================
     TABS / ABOUT
     ========================================================= */
  body.am1417-resource-page .resource-layout-v071 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    align-content: start !important;
  }

  body.am1417-resource-page .resource-main-v071 {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.am1417-resource-page .resource-tabs-shell-v071 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--arx150-line) !important;
    border-radius: 15px !important;
    background: var(--arx150-card) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-tabs-v071 {
    min-height: 50px !important;
    margin: 0 !important;
    padding: 6px 9px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--arx150-line-soft) !important;
    border-radius: 0 !important;
    background: rgba(8, 18, 27, .84) !important;
    overflow-x: auto !important;
  }

  body.am1417-resource-page .resource-tabs-v071 button {
    position: relative !important;
    flex: 0 0 auto !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px 0 29px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #b3c0cb !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body.am1417-resource-page .resource-tabs-v071 button.active,
  body.am1417-resource-page .resource-tabs-v071 button[aria-selected="true"] {
    color: #fff !important;
    border-color: rgba(255, 127, 0, .34) !important;
    border-bottom-color: rgba(255, 127, 0, .34) !important;
    background: rgba(255, 122, 0, .095) !important;
    box-shadow: inset 0 -2px 0 var(--arx150-orange) !important;
  }

  body.am1417-resource-page .resource-tab-panel-v071 {
    margin: 0 !important;
    padding: 15px 16px !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body.am1417-resource-page .resource-tab-panel-v071[hidden] {
    display: none !important;
  }

  body.am1417-resource-page .resource-description-wide-v1417 {
    padding: 15px 16px 16px !important;
  }

  body.am1417-resource-page .resource-summary-grid-wide-v1417 {
    display: block !important;
  }

  body.am1417-resource-page .resource-summary-about-wide-v1417 {
    min-height: 0 !important;
    padding: 14px 15px !important;
    border: 1px solid rgba(80, 136, 175, .25) !important;
    border-radius: 12px !important;
    background:
      radial-gradient(circle at 3% 90%, rgba(255, 120, 0, .07), transparent 25%),
      rgba(5, 16, 25, .70) !important;
    box-shadow: none !important;
  }

  body.am1417-resource-page .resource-summary-about-wide-v1417::before {
    height: 2px !important;
    background: linear-gradient(90deg, var(--arx150-orange), rgba(255, 122, 0, .08), transparent 72%) !important;
  }

  body.am1417-resource-page .resource-about-wide-layout-v1417 {
    display: grid !important;
    grid-template-columns: minmax(0, 1.7fr) minmax(330px, .8fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  body.am1417-resource-page .resource-about-wide-copy-v1417 {
    min-width: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(83, 132, 166, .17) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.014) !important;
  }

  body.am1417-resource-page .resource-about-wide-label-v1417 {
    margin-bottom: 7px !important;
    color: #ff9a2b !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
  }

  body.am1417-resource-page .resource-about-wide-text-v1417 {
    margin: 0 !important;
    color: #bcc9d3 !important;
    font-size: 12px !important;
    line-height: 1.48 !important;
  }

  body.am1417-resource-page .resource-about-facts-wide-v1417 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.am1417-resource-page .resource-about-facts-wide-v1417 > div {
    min-width: 0 !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(78, 135, 174, .21) !important;
    border-radius: 10px !important;
    background: rgba(6, 18, 28, .72) !important;
  }

  body.am1417-resource-page .resource-about-facts-wide-v1417 b {
    display: block !important;
    color: #eef4f8 !important;
    font-size: 11px !important;
  }

  body.am1417-resource-page .resource-about-facts-wide-v1417 small {
    display: block !important;
    margin-top: 4px !important;
    color: #71879a !important;
    font-size: 8px !important;
  }

  body.am1417-resource-page [data-resource-panel]:not([data-resource-panel="description"]) {
    padding: 15px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  /* =========================================================
     BOTTOM INFO CARDS
     ========================================================= */
  body.am1417-resource-page .resource-sidebar-v071 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.am1417-resource-page .resource-sidebar-v071 > .side-card {
    min-width: 0 !important;
    min-height: 108px !important;
    margin: 0 !important;
    padding: 13px 15px !important;
    border: 1px solid var(--arx150-line) !important;
    border-radius: 14px !important;
    background: var(--arx150-card) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.16) !important;
  }

  body.am1417-resource-page .resource-sidebar-v071 > .resource-action-card-v071,
  body.am1417-resource-page .resource-author-card-v071 {
    display: none !important;
  }

  body.am1417-resource-page .resource-sidebar-v071 h3 {
    margin: 0 0 9px !important;
    color: #f4f8fb !important;
    font-size: 12px !important;
  }

  body.am1417-resource-page .resource-sidebar-v071 p {
    margin: 0 !important;
    padding: 4px 0 !important;
    color: #9fb0be !important;
    font-size: 10px !important;
    line-height: 1.28 !important;
  }

  body.am1417-resource-page .resource-compat-game-v071 {
    min-height: 47px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
  }

  body.am1417-resource-page .resource-egg-list-v071 {
    margin-top: 7px !important;
    gap: 4px !important;
  }

  body.am1417-resource-page .resource-egg-list-v071 span {
    padding: 4px 6px !important;
    font-size: 8px !important;
  }

  body.am1417-resource-page .resource-related-v071 {
    margin-top: 12px !important;
    padding: 13px !important;
    border: 1px solid rgba(80, 136, 175, .24) !important;
    border-radius: 13px !important;
    background: var(--arx150-card) !important;
  }
}

/* Medium desktop: keep reference proportions without crushing text. */
@media (min-width: 1180px) and (max-width: 1450px) {
  body.am1417-resource-page .resource-pro-v071 {
    width: 96.5vw !important;
  }

  body.am1417-resource-page .resource-hero-v071 {
    grid-template-columns: minmax(360px, 1.02fr) minmax(430px, 1.16fr) minmax(270px, .72fr) !important;
    gap: 11px !important;
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
    grid-auto-rows: 330px !important;
  }

  body.am1417-resource-page .resource-hero-v071.section-block,
  body.am1417-resource-page .resource-hero-media-v071,
  body.am1417-resource-page .resource-hero-copy-v071,
  body.am1417-resource-page .resource-action-top-v140 {
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
  }

  body.am1417-resource-page .resource-hero-media-v071 {
    grid-template-rows: 251px 57px !important;
  }

  body.am1417-resource-page .resource-hero-media-v071 > img {
    height: 251px !important;
    max-height: 251px !important;
  }

  body.am1417-resource-page .resource-hero-copy-v071 h1 {
    font-size: 28px !important;
  }
}

/* Tablet and mobile: readable vertical flow, no forced single-screen. */
@media (max-width: 1179px) {
  body.am1417-resource-page main {
    padding-top: 8px !important;
  }

  body.am1417-resource-page .resource-pro-v071 {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  body.am1417-resource-page .resource-breadcrumbs-v071 {
    margin-bottom: 9px !important;
  }

  body.am1417-resource-page .resource-hero-v071,
  body.am1417-resource-page .resource-hero-v071.section-block {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  body.am1417-resource-page .resource-hero-media-v071,
  body.am1417-resource-page .resource-hero-copy-v071,
  body.am1417-resource-page .resource-action-top-v140,
  body.am1417-resource-page .resource-tabs-shell-v071,
  body.am1417-resource-page .resource-sidebar-v071 > .side-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 1px solid var(--arx150-line) !important;
    border-radius: 14px !important;
    background: var(--arx150-card) !important;
  }

  body.am1417-resource-page .resource-hero-media-v071 {
    display: block !important;
    padding: 9px !important;
  }

  body.am1417-resource-page .resource-hero-media-v071 > img {
    width: 100% !important;
    height: auto !important;
    max-height: 440px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  body.am1417-resource-page .resource-hero-copy-v071,
  body.am1417-resource-page .resource-action-top-v140 {
    padding: 15px !important;
  }

  body.am1417-resource-page .resource-metrics-v071 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.am1417-resource-page .resource-layout-v071 {
    display: block !important;
    margin-top: 10px !important;
  }

  body.am1417-resource-page .resource-tabs-v071 {
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  body.am1417-resource-page .resource-about-wide-layout-v1417 {
    grid-template-columns: 1fr !important;
  }

  body.am1417-resource-page .resource-sidebar-v071 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 560px) {
  body.am1417-resource-page .resource-pro-v071 {
    width: calc(100% - 12px) !important;
  }

  body.am1417-resource-page .resource-breadcrumbs-v071 {
    padding-inline: 8px !important;
    font-size: 9.5px !important;
  }

  body.am1417-resource-page .resource-hero-copy-v071 h1 {
    font-size: 23px !important;
  }

  body.am1417-resource-page .resource-lead-v071 {
    font-size: 12px !important;
  }

  body.am1417-resource-page .resource-price-line-v071 strong {
    font-size: 30px !important;
  }

  body.am1417-resource-page .resource-primary-actions-v071 :is(a,button,.btn) {
    min-height: 44px !important;
    height: auto !important;
    font-size: 10.5px !important;
  }

  body.am1417-resource-page .resource-tabs-v071 {
    padding-inline: 6px !important;
  }

  body.am1417-resource-page .resource-tabs-v071 button {
    min-height: 34px !important;
    height: 34px !important;
    padding-inline: 10px !important;
    font-size: 9.5px !important;
  }

  body.am1417-resource-page .resource-tab-panel-v071 {
    padding: 12px !important;
  }

  body.am1417-resource-page .resource-about-facts-wide-v1417 {
    grid-template-columns: 1fr !important;
  }
}