/* Shared Neo3 theme components. Keep module presentation here. */
body.neo3-layout {
  --font-family-base: var(--font-family-2);
  font-family: "SF Pro Display", Arial, sans-serif;
  font-weight: 400;
  /* Keep the document as the single scroll surface. */
  height: auto;
  min-height: 100vh;
  overflow-x: clip;
  overflow-y: visible;
}
html:has(body.neo3-layout) { scrollbar-gutter: stable; }
html:has(.popup_modal.visible) { overflow: hidden; }
body.neo3-layout .container-fluid { flex: 1 0 auto; height: auto; }

body.neo3-layout .neo3-empty-state { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; font-weight: 400; }
body.neo3-layout .checker__card-icon ~ .neo3-empty-state { text-align: center; }

/* Neo3 defaults must not shrink the existing grid/flex controls to their labels. */
body.neo3-layout .donor-board__period {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding-inline: 6px;
  white-space: nowrap;
}
body.neo3-layout .donor-board__periods { flex: 0 0 auto; }
body.neo3-layout .sc-create-row {
  width: 100%;
  height: auto;
  min-height: 60px;
  justify-content: flex-start;
  padding: 8px;
  gap: 12px;
}
body.neo3-layout .sc-create-row b { min-width: 0; gap: 3px; line-height: 1.35; }
body.neo3-layout .sc-create-row small { white-space: normal; }
body.neo3-layout .monitor-category-card__quickplay {
  height: 38px;
  min-height: 38px;
}
body.neo3-layout .monitor-category-card__quickplay:disabled {
  background: #242424;
  color: #b0b0b0;
  border-color: var(--transparent-10-w);
  transform: none;
}
body.neo3-layout .monitor-category-card__bottom { bottom: 8px; }
body.neo3-layout .monitor-category-card__quickplay { bottom: 0; }
body.neo3-layout .monitor-category-card:is(:hover, :focus-within) .monitor-category-card__quickplay { transform: translateY(.3rem); }
body.neo3-layout .monitor-intro__quickplay { min-height: 44px; height: 44px; border-radius: 10px; gap: 10px; line-height: 1; }
body.neo3-layout .monitor-intro__quickplay > span { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; font-size: 10px; line-height: 1; }
@media (hover: none) {
  body.neo3-layout .monitor-category-card__quickplay { opacity: 1; transform: none; }
  body.neo3-layout .monitor-category-card__shadow { opacity: 1; transform: none; }
}
body.neo3-layout .monitor-intro__quickplay:disabled {
  background: var(--button);
  color: var(--text-custom);
  opacity: 1;
  border-color: var(--transparent-10-w);
}
body.neo3-layout .monitor-intro__quickplay:disabled > span {
  background: var(--transparent-10-w);
  color: var(--text-secondary);
}
body.neo3-layout :is(.button-icon, .icon_btn_transparent) > svg { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; }
body.neo3-layout:has(.popup_modal.visible) { overflow: hidden; }
body.neo3-layout .popup_modal_content { overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) {
  body.neo3-layout *, body.neo3-layout *::before, body.neo3-layout *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Old Neo fields used weight-1 for normal text; use Neo3's regular face. */
body.neo3-layout :is(input, textarea, select, button, .button, label) {
  font-family: var(--font-family-2), sans-serif;
  font-weight: 400;
}
body.neo3-layout :is(button, .button) { font-weight: 500; }
body.neo3-layout .neo3-online__trigger { height: 26px; }
body.neo3-layout .admin_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
  margin: 5px 0;
  border-radius: 12px;
  background: var(--card);
}
body.neo3-layout .admin_nav button { flex: 0 0 auto; min-width: 110px; }
body.neo3-layout .admin_nav .admin-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--transparent-5-w);
  border-radius: 10px;
  background: var(--button);
  color: var(--text-custom);
  font-size: 14px;
}
body.neo3-layout .admin_nav .admin-nav__btn svg { width: 17px; height: 17px; flex: 0 0 17px; fill: currentColor; }
body.neo3-layout .admin_nav .admin-nav__btn.active { background: var(--span-low); border-color: var(--span-half); color: var(--span); }
body.neo3-layout .admin_nav button.active {
  background: var(--span);
  border-color: transparent;
  color: var(--text-default);
}
body.neo3-layout .inputs-inline { min-width: 0; margin-bottom: 10px; }
body.neo3-layout .inputs-inline > label { white-space: normal; line-height: 1.4; }
body.neo3-layout .inputs-inline > :is(input[type="text"], input[type="url"], textarea) {
  font-size: 14px;
  line-height: 1.5;
  min-width: 0;
}
body.neo3-layout .inputs-inline:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 9px;
}
body.neo3-layout .inputs-inline > input[type="checkbox"] { flex-shrink: 0; }
body.neo3-layout .inputs-inline > input[type="checkbox"] + label { margin: 0; font-size: 14px; }
body.neo3-layout .flex-inline { gap: 12px; min-width: 0; }
body.neo3-layout .button-icon,
body.neo3-layout .icon_btn_transparent { width: 41px; flex: 0 0 41px; padding: 0; }
body.neo3-layout :is(input[type="button"], input[type="submit"]) {
  cursor: pointer;
  width: auto;
  min-width: 110px;
  font-weight: 500;
  background: var(--button);
}
body.neo3-layout :is(input[type="button"], input[type="submit"]):hover { background: var(--button-hover); }
body.neo3-layout :is(button, .button, input, textarea, select):focus-visible {
  outline: 2px solid var(--span-half);
  outline-offset: 2px;
}
body.neo3-layout :is(a, summary, [role="button"]):focus-visible { outline: 2px solid var(--span); outline-offset: 3px; }
body.neo3-layout .contact_mail { overflow-wrap: anywhere; }
body.neo3-layout .contact_body { min-width: 0; }
body.neo3-layout :is(#start_reviews, #next_reviews)[aria-disabled="true"] { opacity: .35; cursor: default; }
body.neo3-layout .HomeReviewsBlock2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
body.neo3-layout .HomeReviewsBlock2.is-empty { display: none; }
/* Old modules draw a second checkbox on the label. Use one actual input. */
body.neo3-layout input.border-checkbox[type="checkbox"] { display: inline-block; width: 21px; height: 21px; flex: 0 0 21px; padding: 0; }
body.neo3-layout .border-checkbox + .border-checkbox-label { width: auto; flex: 1; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; }
body.neo3-layout .border-checkbox + .border-checkbox-label::before,
body.neo3-layout .border-checkbox + .border-checkbox-label::after { content: none; display: none; }
body.neo3-layout .input-form:has(> .border-checkbox) { display: flex; align-items: center; gap: 10px; padding-block: 8px; }
/* Grid children must fill their track instead of shrinking to image contents. */
body.neo3-layout :is(.sc-weapon-choice, .sc-weapon-expand, .sc-skin-option, .sc-rarity-filter > button) { width: 100%; max-width: 100%; min-width: 0; padding-inline: 4px; }
body.neo3-layout .sc-rarity-filter > button { padding: 0; }
body.neo3-layout :is(.sc-weapon-choice, .sc-skin-option) img { max-width: 100%; object-fit: contain; }
body.neo3-layout .sc-skin-results { max-height: clamp(220px, calc(100dvh - 360px), 540px); }
body.neo3-layout :is(.sc-weapon-categories, .sc-skin-results) { scrollbar-gutter: stable; }
body.neo3-layout .neo3-brand__mark--fallback { display: none !important; }
@media (max-width: 768px) {
  body.neo3-layout .global-container { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  body.neo3-layout .tabbar_mobile { bottom: env(safe-area-inset-bottom); height: 64px; padding: 8px 12px; z-index: 250; }
  body.neo3-layout .tabbar_mobile a { height: 48px; }
  body.neo3-layout:has(.nav_header_menu.mmactive) .tabbar_mobile,
  body.neo3-layout:has(.popup_modal.visible) .tabbar_mobile { visibility: hidden; }
}
body.neo3-layout .popup_modal_close { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; }
body.neo3-layout .card { border-radius: var(--br-16); }
body.neo3-layout .card-header { background: transparent; }
body.neo3-layout .badge { font-size: 16px; font-weight: 600; }

/* Reward labels and actions have their own rows, including activated items. */
body.neo3-layout #wins { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
body.neo3-layout #wins .subject-block { display: flex; flex-direction: column; height: 266px; overflow: hidden; }
body.neo3-layout #wins .subject-block > .subject-services { flex: 1; height: auto; min-height: 0; }
body.neo3-layout #wins .subject-block > .subject-services .subject-fix { display: flex; flex-direction: column; justify-content: flex-start; padding: 14px 12px 10px; }
body.neo3-layout #wins .subject-block > .subject-services .subject-fix .subject-image-wrapper { flex: 1; min-height: 0; height: 140px; }
body.neo3-layout #wins .subject-block > .subject-services .subject-fix .subject-image { max-height: 130px; max-width: 85%; object-fit: contain; }
body.neo3-layout #wins .subject-block > .subject-services .subject-fix .subject { position: static; width: 100%; min-height: 38px; margin-top: 8px; text-align: left; }
body.neo3-layout #wins .subject-block > .subject-services .subject-fix .subject span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 19px; color: var(--text-default); }
body.neo3-layout #wins .subject-block > .subject-services .subject-fix .subject span:nth-child(2) { color: var(--text-custom); }
body.neo3-layout #wins .subject-block .subject-hover { position: static; flex: 0 0 auto; min-height: 52px; opacity: 1; visibility: visible; transform: none; padding: 8px; background: rgb(0 0 0 / 24%); gap: 6px; }
body.neo3-layout #wins .subject-hover :is(button, a, .subject-status) { display: flex; align-items: center; justify-content: center; flex: 1; width: auto; min-width: 0; height: auto; min-height: 36px; padding: 7px 8px; border: 1px solid var(--transparent-10-w); border-radius: 8px; background: var(--button); color: var(--text-default); font-size: 11px; line-height: 1.3; text-align: center; }
body.neo3-layout #wins .subject-hover :is(button, a):hover { background: var(--button-hover); }
body.neo3-layout #wins .is-sold .subject-image { filter: grayscale(.7); opacity: .7; }
body.neo3-layout #wins .subject-hover .subject-status { background: transparent; color: var(--text-custom); }
/* Keep the 190px roulette pitch used by its controller; only repair contents. */
body.neo3-layout #roulette .subject-services { display: block; width: 100%; height: 100%; padding: 8px; }
body.neo3-layout #roulette .subject-fix { display: flex; flex-direction: column; width: 100%; height: 100%; }
body.neo3-layout #roulette .subject-image-wrapper { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; }
body.neo3-layout #roulette img.subject-image { width: 120px; height: 86px; max-width: 100%; max-height: 100%; object-fit: contain; }
body.neo3-layout #roulette .subject { position: static; display: flex; flex-direction: column; width: 100%; min-height: 30px; margin-top: 4px; text-align: left; }
body.neo3-layout #roulette .subject span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 15px; }
body.neo3-layout .cases-main-block .roulette .roulette-slider :is(.top-arr, .bottom-arr) { width: 16px; height: 12px; left: 50%; transform: translateX(-50%); background: #ffbc44; pointer-events: none; z-index: 3; }
body.neo3-layout .cases-main-block .roulette .roulette-slider .top-arr { top: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
body.neo3-layout .cases-main-block .roulette .roulette-slider .bottom-arr { bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* All modules share the same modal surface and controls. */
/* new engine popup modal styles */

.popup_modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-modal);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9998;
}

.popup_modal.visible {
  opacity: 1;
  visibility: visible;
}

.popup_modal.visible .popup_modal_content {
  transform: scale(1);
  pointer-events: all;
}

@media (max-width: 568.9px) {
  .popup_modal_content {
    display: flex;
    background-color: var(--card);
    border-radius: var(--br-24);
    width: 96%;
    max-width: 850px;
    height: max-content;
    max-height: 100dvh;
    position: relative;
    flex-direction: column;
    z-index: 9999;
    -webkit-transform: scale(0.95) translate(0, 0);
    transform: scale(0.95) translate(0, 0);
    pointer-events: none;
    transition: transform 0.2s;
    padding: 20px;
  }
}

@media (min-width: 569px) and (max-width: 768.9px) {
  .popup_modal_content {
    display: flex;
    background-color: var(--card);
    border-radius: var(--br-24);
    -webkit-transform: scale(0.95) translate(0, 0);
    transform: scale(0.95) translate(0, 0);
    pointer-events: none;
    min-width: 500px;
    width: 96%;
    height: max-content;
    max-width: 768px;
    max-height: 96%;
    position: relative;
    flex-direction: column;
    z-index: 9999;
    transition: transform 0.2s;
    padding: 20px;
  }
}

@media (min-width: 769px) {
  .popup_modal_content {
    display: flex;
    background-color: var(--card);
    border-radius: var(--br-24);
    -webkit-transform: scale(0.95) translate(0, 0);
    transform: scale(0.95) translate(0, 0);
    pointer-events: none;
    min-width: 450px;
    width: max-content;
    height: max-content;
    max-width: 850px;
    max-height: 96%;
    position: relative;
    flex-direction: column;
    z-index: 9999;
    transition: transform 0.2s;
    padding: 20px;
  }
}

.popup_modal_close {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.popup_modal_close svg {
  width: 20px;
  height: 20px;
  fill: var(--text-default);
  opacity: 0.5;
  transition: var(--transition-duration);
}

.popup_modal_close:hover svg {
  opacity: 1;
}

.popup_modal_close:hover,
.popup_modal_close:focus {
  text-decoration: none;
  cursor: pointer;
}

.popup_modal_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-7);
  background: transparent;
  padding: 0 0 15px;
  gap: 20px;
}

body.neo3-layout .popup_modal_content { box-sizing: border-box; overflow-y: auto; border: 1px solid var(--transparent-5-w); }
body.neo3-layout .popup_modal_head { font-size: 20px; font-weight: 700; }
body.neo3-layout .popup_modal .flex-inline { flex-direction: row; }
body.neo3-layout .popup_modal .flex-inline > input[type="button"] { flex: 1; }

/* Match Neo3's upload fields without leaking button styles into FilePond. */
body.neo3-layout .filepond--root { font-family: var(--font-family-2), sans-serif; margin: 8px 0 12px; border: 1px dashed var(--transparent-20-w); border-radius: 8px; }
body.neo3-layout .filepond--panel-root { background: transparent; }
body.neo3-layout .filepond--drop-label { color: var(--text-custom); }
body.neo3-layout .filepond--label-action { color: var(--span); text-decoration: none; }
body.neo3-layout .filepond--file-action-button { border-radius: 50%; padding: 0; }
body.neo3-layout .filepond--browser { padding: 0; height: 1px; }
body.neo3-layout .filepond--drop-label label { display: block; }

body.neo3-layout .neo3-confirm {
  width: min(440px, calc(100vw - 32px));
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--transparent-10-w);
  border-radius: 20px;
  background: var(--card);
  color: var(--text-custom);
}
body.neo3-layout .neo3-confirm h2 { font: 600 20px/1.4 var(--font-family-2), sans-serif; color: var(--text-default); margin: 0 0 12px; }
body.neo3-layout .neo3-confirm p { margin: 0 0 20px; }
body.neo3-layout .neo3-confirm .flex-inline { justify-content: flex-end; }
body.neo3-layout .neo3-confirm::backdrop { background: var(--bg-modal); }

@media (max-width: 768px) {
  body.neo3-layout .popup_modal_content { min-width: 0; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  body.neo3-layout .admin_nav button { min-width: 0; flex: 1; }
}

/* A real, keyboard accessible mobile navigation, with no shrinking burger. */
@media (max-width: 1079px) {
  body.neo3-menu-top .navbar_menu_left { width: 42px; height: 42px; flex: 0 0 42px; padding: 0; order: -1; }
  body.neo3-menu-top .drpdwn_menu { display: none; }
  body.neo3-menu-top .header_burger {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--transparent-5-w);
    border-radius: 10px;
    background: var(--button);
    z-index: 511;
  }
  body.neo3-menu-top .header_burger::before,
  body.neo3-menu-top .header_burger::after,
  body.neo3-menu-top .header_burger span { left: 11px; width: 18px; height: 2px; background: var(--text-default); }
  body.neo3-menu-top .header_burger::before { top: 13px; }
  body.neo3-menu-top .header_burger span { top: 19px; }
  body.neo3-menu-top .header_burger::after { top: 25px; bottom: auto; }
  body.neo3-menu-top .header_burger.mmactive::before,
  body.neo3-menu-top .header_burger.mmactive::after { top: 19px; }
  body.neo3-menu-top .nav_header_menu {
    display: block;
    position: fixed;
    inset: 0;
    width: auto;
    height: 100dvh;
    z-index: 510;
    padding: 78px 16px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--bg);
  }
  body.neo3-menu-top .nav_header_menu .header_list { display: grid; gap: 6px; max-width: 600px; margin: 0 auto; padding: 0; list-style: none; }
  body.neo3-menu-top .header_list li { margin: 0; padding: 0; font-size: 15px; font-weight: 500; letter-spacing: normal; text-transform: none; }
  body.neo3-menu-top .header_list a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 12px 16px; border: 1px solid var(--transparent-5-w); border-radius: 10px; background: var(--card); }
  body.neo3-menu-top .header_list a[aria-current] { color: var(--span); background: var(--span-low); border-color: var(--span-half); }
  body.neo3-menu-top .header_list svg { width: 18px; height: 18px; flex: 0 0 18px; fill: currentColor; }
  body.neo3-layout .navbar .neo3-brand__mark { display: none; }
  body.neo3-layout .navbar .neo3-brand__name { display: block; max-width: 120px; font-size: 14px; transform: none; }
  body.neo3-layout .neo3-online { margin-left: 0; }
}
@media (max-width: 420px) {
  body.neo3-layout .navbar .neo3-brand__name { max-width: 85px; font-size: 12px; }
  body.neo3-layout .navbar_usermenu > .auth_user_btn { width: 40px; padding: 0; }
  body.neo3-layout .navbar_usermenu > .auth_user_btn span { display: none; }
  body.neo3-layout .navbar_usermenu > .auth_user_btn svg { width: 19px; height: 19px; }
  body.neo3-layout .navbar_usermenu .pay_button { width: 38px; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.neo3-layout .checker__description,
  body.neo3-layout .checker__header::before,
  body.neo3-layout .rules_header::before { animation: none; }
}