/* PrivateDrop 2.0 — the shell of "Мои скины" (Inventory) and "Выберите скин" (Shop).
   One panel system for both: same frame as the board panels (18px radius, hairline, graphite gradient),
   a 72px title row on a hairline, one 40px control family (sort · total · search · price · go),
   the grid on the panel itself, a 64px pagination footer on a hairline, a framed empty state.
   Phones keep the merged tab layout of privatedrop-upgrader-mobile-v2220.css (no own frame here).
   AWP placeholder cells fill empty grid cells on every width (see privatedrop-panels-v3.js).
   Skin cards themselves are untouched. Tokens: privatedrop-ds-v3.css. */

/* ---------- grid area + placeholders (all widths) ---------- */
[class*="_gridContainer_f57nd_2"]{position:relative}
[class*="_gridContainer_f57nd_2"] > [class*="_grid_f57nd_2"]{position:relative;z-index:1}
.pd-ph-layer{position:absolute;z-index:0;display:grid;pointer-events:none}
.pd-ph-layer[hidden]{display:none}
.pd-ph{position:relative;display:block;overflow:hidden;border-radius:calc(var(--pdp-u,1px) * 6.6);background:linear-gradient(180deg,rgba(255,255,255,.018) 0%,rgba(255,255,255,.008) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
/* AWP silhouette: muzzle raised toward the top-left, centred a little up-left of the middle, same in every cell */
.pd-ph::after{content:"";position:absolute;left:50%;top:52%;width:66%;aspect-ratio:240/64;transform:translate(-50%,-50%) rotate(24deg);background:rgba(255,255,255,.045);
  -webkit-mask:url('/assets/pd-ph-awp-v1.svg?v=1') center/contain no-repeat;mask:url('/assets/pd-ph-awp-v1.svg?v=1') center/contain no-repeat}

/* phones: the grid always shows at least 5 rows (3 square cells per row), so placeholders complete it */
@media (max-width:767px){
  [class*="_gridContainer_f57nd_2"] > [class*="_grid_f57nd_2"]{min-height:calc((100cqi - 10px) / 3 * 5 + 20px)}
}

/* ---------- desktop / tablet ---------- */
@media (min-width:768px){
  /* two panels, one gutter — no ornament between them */
  ._row_1ohf7_8{position:relative;column-gap:20px!important}
  ._row_1ohf7_8::before,._row_1ohf7_8::after{content:none!important}

  /* panel shell = the board panels above */
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"]{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--pd2-r-xl)!important;
    border:1px solid var(--pd2-line)!important;background:var(--pd2-panel)!important;box-shadow:var(--pd2-hi),var(--pd2-shadow-1)!important;clip-path:none}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_headerWrap_"],[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_header_14f48_10"],[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_content_ttdpz_19"],[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_footer_14f48_51"],[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_gridContainer_f57nd_2"]{background:transparent!important;box-shadow:none!important;border:0!important}

  /* title row: 72px, on a hairline */
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_header_14f48_10"]{min-height:72px;padding:0 16px 0 20px!important;border-bottom:1px solid var(--pd2-line)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0))!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_headerLeft_14f48_29"]{align-self:center;align-items:center;gap:12px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;clip-path:none}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_headerLeft_14f48_29"] > span{font:700 17px/1 var(--pd2-font)!important;color:var(--pd2-text)!important;letter-spacing:-.005em}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_headerLeft_17br1_6"] > span::before{width:14px!important;height:16px!important;background:var(--pd2-gold-text)!important}

  /* My skins | Shop: a recessed segmented switch, active = gold glyph on a gold wash */
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_iconTabList_"]{padding:3px!important;gap:2px!important;background:var(--pd2-well)!important;border-radius:var(--pd2-r-md)!important;border:0!important;
    box-shadow:inset 0 0 0 1px var(--pd2-line)!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_iconTab_tcvfg_40"]{width:34px!important;height:34px!important;border-radius:var(--pd2-r-sm)!important;color:var(--pd2-text-3)!important;background:transparent!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_iconTab_tcvfg_40"]:not([data-state=active]):hover{color:var(--pd2-text)!important;background:var(--pd2-s4)!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_iconTab_tcvfg_40"][data-state=active]{color:var(--pd2-gold-hi)!important;background:var(--pd2-gold-wash-2)!important;box-shadow:inset 0 0 0 1px var(--pd2-gold-line)!important}

  /* one control family: 40px, recessed, hairline; gold only on focus */
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_headerRight_14f48_35"]{gap:8px!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_wrap_bvzzp_2"]{gap:8px!important;flex:0 1 auto!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_headerRight_14f48_35"] [class*="_btn_1gf1u_2"],
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_totalBadge_tcvfg_29"],
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_wrap_bvzzp_2"] > input,
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_fields_bvzzp_20"],
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_btn_bvzzp_106"]{height:40px!important;min-height:40px!important;margin:0!important;border-radius:var(--pd2-r-md)!important;background:var(--pd2-well)!important;border:0!important;
    box-shadow:inset 0 0 0 1px var(--pd2-line-2)!important;color:var(--pd2-text-2)!important;transition:box-shadow var(--pd2-t) var(--pd2-ease),background var(--pd2-t) var(--pd2-ease),color var(--pd2-t) var(--pd2-ease)}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_headerRight_14f48_35"] [class*="_btn_1gf1u_2"],[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_btn_bvzzp_106"]{width:40px!important;min-width:40px!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_headerRight_14f48_35"] [class*="_btn_1gf1u_2"] svg,[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_btn_bvzzp_106"] svg{color:var(--pd2-text-2)!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_headerRight_14f48_35"] [class*="_btn_1gf1u_2"]:hover,[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_btn_bvzzp_106"]:hover{background:var(--pd2-s3)!important;box-shadow:inset 0 0 0 1px var(--pd2-line-3)!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_headerRight_14f48_35"] [class*="_btn_1gf1u_2"]:hover svg,[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_btn_bvzzp_106"]:hover svg{color:var(--pd2-text)!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_wrap_bvzzp_2"] > input{color:var(--pd2-text)!important;font-family:var(--pd2-font)!important;font-size:14px!important;font-weight:500!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_wrap_bvzzp_2"] > input::placeholder,[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_fields_bvzzp_20"] input::placeholder{color:var(--pd2-text-3)!important;font-weight:500!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_fields_bvzzp_20"] input{color:var(--pd2-text)!important;font-family:var(--pd2-font)!important;font-size:14px!important;font-weight:500!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_priceInput_bvzzp_31"] + [class*="_priceInput_bvzzp_31"]{border-left:1px solid var(--pd2-line-2)!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_wrap_bvzzp_2"] > input:hover,[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_fields_bvzzp_20"]:hover{box-shadow:inset 0 0 0 1px var(--pd2-line-3)!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_wrap_bvzzp_2"] > input:focus,[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_fields_bvzzp_20"]:focus-within{box-shadow:inset 0 0 0 1px var(--pd2-gold-line-2)!important;outline:0}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_totalBadge_tcvfg_29"]{gap:10px;padding:0 14px!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_totalBadge_tcvfg_29"] > span:first-child{color:var(--pd2-text-3)!important;font-family:var(--pd2-font)!important;font-size:13px!important;font-weight:500!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_totalBadge_tcvfg_29"] [class*="_root_19r0h"] span{color:var(--pd2-gold)!important;font-family:var(--pd2-font-num)!important;font-weight:700!important}

  /* footer / pagination: 64px on a hairline */
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_footer_14f48_51"]{min-height:64px;height:64px!important;border-top:1px solid var(--pd2-line)!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_pagination_14f48_55"]{gap:8px!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_btn_11jng_2"]{width:40px!important;height:40px!important;border:0!important;border-radius:var(--pd2-r-md)!important;background:var(--pd2-s3)!important;
    color:var(--pd2-text)!important;box-shadow:inset 0 0 0 1px var(--pd2-line-2),var(--pd2-hi)!important;transition:box-shadow var(--pd2-t) var(--pd2-ease),color var(--pd2-t) var(--pd2-ease),background var(--pd2-t) var(--pd2-ease)}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_btn_11jng_2"] svg{width:20px!important;height:20px!important;color:currentColor!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_btn_11jng_2"]:hover:not(:disabled){color:var(--pd2-gold-hi)!important;background:var(--pd2-s4)!important;box-shadow:inset 0 0 0 1px var(--pd2-gold-line)!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_btn_11jng_2"]:active:not(:disabled){transform:translateY(1px)}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_btn_11jng_2"]:disabled{background:transparent!important;color:var(--pd2-text-4)!important;box-shadow:inset 0 0 0 1px var(--pd2-line)!important;opacity:1;cursor:default}
}

/* ---------- empty state (and the other overlays of these panels) ---------- */
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlay_14f48_62"]{background:rgba(10,11,13,.5)!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important;z-index:2}
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlayContent_14f48_73"]{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:18px!important;
  box-sizing:border-box;min-width:min(340px,calc(100% - 32px));padding:30px 36px 32px!important;border:1px solid var(--pd2-line-2)!important;border-radius:var(--pd2-r-xl)!important;
  background:radial-gradient(80% 55% at 50% 0%,rgb(var(--pd2-gold-rgb)/.08),rgb(var(--pd2-gold-rgb)/0) 75%),var(--pd2-raised)!important;box-shadow:var(--pd2-hi),var(--pd2-shadow-2)!important}
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlayContent_14f48_73"]:has([class*="_emptyButton_"]){padding-top:132px!important}
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlayContent_14f48_73"]:has([class*="_emptyButton_"])::after{content:"";position:absolute;top:22px;left:50%;width:120px;height:108px;transform:translateX(-50%);
  background:url('/assets/pd-empty-box-v1.svg?v=1') center/contain no-repeat;pointer-events:none}
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlayContent_14f48_73"] > span{font:700 19px/24px var(--pd2-font)!important;color:var(--pd2-text)!important;text-align:center;letter-spacing:-.01em}
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlayContent_14f48_73"] button{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;height:46px!important;padding:0 22px!important;
  border:0!important;border-radius:var(--pd2-r-md)!important;background:var(--pd2-gold-fill)!important;color:var(--pd2-on-gold)!important;
  box-shadow:var(--pd2-gold-bevel),0 8px 22px rgb(var(--pd2-gold-rgb)/.16)!important;transition:filter .15s,transform .15s}
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlayContent_14f48_73"] button span{font:700 15px/1 var(--pd2-font)!important;color:var(--pd2-on-gold)!important}
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlayContent_14f48_73"] button:hover{background:var(--pd2-gold-fill-hover)!important}
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlayContent_14f48_73"] button:active{transform:translateY(1px)}
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_emptyButton_"]::before,[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_emptyButton_"]::after{content:"";flex:none;width:18px;height:18px;background:currentColor}
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_emptyButton_"]::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M9.3 3.3a1 1 0 0 1 .4 1.4L7.4 9h9.2l-2.3-4.3a1 1 0 1 1 1.8-1l2.8 5.3H21a1 1 0 0 1 1 1.2l-1.6 8.4A3 3 0 0 1 17.5 21h-11a3 3 0 0 1-2.9-2.4L2 10.2A1 1 0 0 1 3 9h2.1l2.8-5.3a1 1 0 0 1 1.4-.4ZM9 12.5a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0v-3a1 1 0 0 0-1-1Zm6 0a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0v-3a1 1 0 0 0-1-1Z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M9.3 3.3a1 1 0 0 1 .4 1.4L7.4 9h9.2l-2.3-4.3a1 1 0 1 1 1.8-1l2.8 5.3H21a1 1 0 0 1 1 1.2l-1.6 8.4A3 3 0 0 1 17.5 21h-11a3 3 0 0 1-2.9-2.4L2 10.2A1 1 0 0 1 3 9h2.1l2.8-5.3a1 1 0 0 1 1.4-.4ZM9 12.5a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0v-3a1 1 0 0 0-1-1Zm6 0a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0v-3a1 1 0 0 0-1-1Z%22/%3E%3C/svg%3E") center/contain no-repeat}
[class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_emptyButton_"]::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M4 12h15m-6-6 6 6-6 6%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M4 12h15m-6-6 6 6-6 6%22/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:767px){
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlayContent_14f48_73"]{border-radius:14px!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlayContent_14f48_73"]:has([class*="_emptyButton_"]){padding-top:112px!important}
  [class*="_panel_1ohf7_"] > [class*="_panel_14f48_2"] [class*="_overlayContent_14f48_73"]:has([class*="_emptyButton_"])::after{width:96px;height:86px;top:18px}
}
