:root {
  --nav-max: var(--site-width);
  --inset: 14px;
  --nav-h: 58px;
  --border-soft: #3a3a3a;
  --btn-border: #2c2c2c;
  --tab-hover: var(--accent);
  --tab-hover-border: rgba(120, 181, 255, 0.78);
  --tab-hover-ring: rgba(120, 181, 255, 0.16);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --surface: var(--panel);
}

  body, body * { -webkit-tap-highlight-color: transparent; }
  ::selection { background: transparent; }
  #petValuesPage, #petValuesPage * { user-select: none; }
  #petValuesPage input, #petValuesPage textarea { user-select: text; }

  .page{
    max-width: var(--nav-max);
    margin: 0 auto;
    padding: 14px calc(env(safe-area-inset-left) + var(--inset)) 28px calc(env(safe-area-inset-right) + var(--inset));
    min-height: calc(100svh - (var(--nav-h) + (var(--inset)*2) + env(safe-area-inset-top)));
  }

  :root{
    --rgb-low:239,83,80;
    --rgb-med:255,195,43;
    --rgb-high:139,195,74;
    --rgb-vhigh:227,171,241;
    --rgb-insane:204,0,255;
  }

  .pv-bar{
    width: 100%;
    position: relative;
    border-radius: 17px;
    border: 1px solid var(--border-hover);
    background: var(--panel);
    box-shadow: 0 16px 46px rgba(0,0,0,.22);
    padding: 12px;
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    transition: border-color 520ms var(--ease-out), background-color 520ms var(--ease-out), box-shadow 520ms var(--ease-out);
  }

  html[data-theme="light"] .pv-bar{
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 58px rgba(0,0,0,.10);
  }

  .search{
    flex: 1 1 auto;
    min-width: 160px;
    height: 44px;
    border-radius: 11px;
    border: 1px solid var(--btn-border);
    background-color: rgba(0,0,0,.14);
    color: var(--text);
    padding: 0 14px 0 44px;
    font-weight: 750;
    letter-spacing: .1px;
    outline: none;
    transition: border-color 220ms var(--ease-out), background-color 520ms var(--ease-out), box-shadow 220ms var(--ease);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 18px 18px;
  }
  html[data-theme="light"] .search{
    background-color: rgba(0,0,0,.04);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232f2f2f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
  }
  .search:focus{
    border-color: rgba(120,181,255,.75);
    box-shadow: 0 0 0 3px rgba(120,181,255,.18);
  }

  .chip{
    flex: 0 0 auto;
    height: 44px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid var(--btn-border);
    background: rgba(255,255,255,.02);
    color: var(--text);
    font-weight: 900;
    letter-spacing: .14px;
    font-size: 13px;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    cursor:pointer;
    transition: transform 180ms var(--ease), box-shadow 240ms var(--ease-out), border-color 220ms var(--ease-out), background-color 520ms var(--ease-out);
  }
  .chip svg, .chip .icon{ width: 18px; height: 18px; display:block; opacity:.96; }
  .chip:hover{ transform: translateY(-1px); border-color: rgba(120,181,255,.22); box-shadow: 0 14px 26px rgba(0,0,0,.20); }
  .chip:active{ transform: translateY(0px) scale(.99); }
  .chip:focus-visible{ outline: none; border-color: rgba(120,181,255,.85); box-shadow: 0 0 0 3px rgba(120,181,255,.18); }
  .chip.active{ background: var(--tab-hover); border-color: var(--tab-hover-border); color:#fff; box-shadow: 0 14px 26px rgba(0,0,0,.22), 0 0 0 3px var(--tab-hover-ring); }
  .chip.icon-only{ padding: 0; width: 44px; justify-content: center; }

  .csel{ flex: 0 0 auto; width: 170px; }

  .csel-trigger{
    width: 100%;
    height: 44px;
    border-radius: 11px;
    border: 1px solid var(--btn-border);
    background: rgba(255,255,255,.02);
    color: var(--text);
    font-weight: 900;
    letter-spacing: .14px;
    font-size: 13px;
    padding: 0 14px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: transform 180ms var(--ease), box-shadow 240ms var(--ease-out), border-color 220ms var(--ease-out), background-color 520ms var(--ease-out);
  }


  .csel-trigger:hover{ transform: translateY(-1px); border-color: rgba(120,181,255,.22); box-shadow: 0 14px 24px rgba(0,0,0,.16); }
  .csel-trigger:active{ transform: translateY(0px) scale(.99); }
  .csel-label{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
  .csel-caret{ width: 16px; height: 16px; opacity:.92; transition: transform 220ms var(--ease-out); }
  .csel-trigger[aria-expanded="true"] .csel-caret{ transform: rotate(180deg); }

  .csel-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms var(--ease-out);
    z-index: 3990;
  }
  .csel-overlay.open{ opacity: 1; pointer-events: auto; }

  .csel-menu-fixed{
    position: fixed;
    width: 260px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: rgba(23,23,23,.96);
    box-shadow: 0 30px 90px rgba(0,0,0,.30);
    overflow: hidden;
    padding: 6px;
    opacity: 0;
    transform: translateY(-10px) scale(.98);
    pointer-events: none;
    transition: opacity 180ms var(--ease-out), transform 240ms var(--ease-out);
    z-index: 4000;
  }

  html[data-theme="light"] .csel-menu-fixed{
    background: rgba(255,255,255,.96);
    box-shadow: 0 30px 90px rgba(0,0,0,.14);
  }
  .csel-menu-fixed.open{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .csel-opt{
    width: 100%;
    height: 36px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    font-weight: 900;
    letter-spacing: .12px;
    cursor: pointer;
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 0 10px;
    transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 180ms var(--ease);
    text-align:left;
  }

  .csel-opt:hover{ background: rgba(120,181,255,.10); border-color: rgba(120,181,255,.18); transform: translateY(-1px); }
  .csel-opt:active{ transform: translateY(0) scale(.99); }
  .csel-opt[aria-selected="true"]{ background: rgba(120,181,255,.16); border-color: rgba(120,181,255,.26); }
  .csel-divider{ height: 1px; background: var(--border-soft); margin: 8px 6px; }

  .pv-cats{
    margin-top: 12px;
    display:flex;
    justify-content:center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .seg{
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--btn-border);
    background: rgba(255,255,255,.02);
    color: var(--muted);
    font-weight: 950;
    letter-spacing: .14px;
    cursor: pointer;
    transition: transform 180ms var(--ease), box-shadow 240ms var(--ease-out), border-color 220ms var(--ease-out), background-color 520ms var(--ease-out), color 520ms var(--ease-out);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .seg:hover{ transform: translateY(-1px); border-color: rgba(120,181,255,.22); box-shadow: 0 14px 24px rgba(0,0,0,.16); color: var(--text); }
  .seg:active{ transform: translateY(0px) scale(.99); }
  .seg.active{ background: var(--tab-hover); border-color: var(--tab-hover-border); color: #fff; box-shadow: 0 14px 26px rgba(0,0,0,.20), 0 0 0 3px var(--tab-hover-ring); }

  .grid{
    margin-top: 14px;
    display:grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }
  @media (max-width: 1120px){ .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
  @media (max-width: 900px){ .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
  @media (max-width: 620px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }

  @media (max-width: 720px){
    .pv-bar{
      flex-wrap: wrap;
      overflow-x: visible;
      gap: 10px;
      justify-content: flex-start;
    }

    .search{
      flex: 1 1 100%;
      order: 1;
    }

    #petValuesPage .pets-sort{
      flex: 1 1 160px;
      order: 2;
    }

    #btnShiny2,
    #btnMythic2,
    #btnXL2,
    #btnSortDirection2,
    #btnSettings2{
      flex: 0 0 auto;
      order: 3;
    }

    #btnShiny2{ margin-left: auto; }
    #btnSettings2{ margin-right: auto; }

    .chip{
      height: 44px;
      padding: 0 14px;
      font-size: 13px;
    }

    .chip.icon-only{
      width: 44px;
      padding: 0;
      justify-content: center;
    }
  }




  .card{
    position: relative;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: var(--panel);
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
    transition: transform 220ms var(--ease), border-color 260ms var(--ease-out), box-shadow 220ms var(--ease), background-color 520ms var(--ease-out);
    min-width: 0;
    cursor: pointer;
    contain: layout paint style;
    content-visibility: auto;
    contain-intrinsic-size: 270px 340px;
  }
  html[data-theme="light"] .card{ background: rgba(255,255,255,.92); box-shadow: 0 14px 34px rgba(0,0,0,.10); }

  .card.skeleton{
    min-height: 300px;
    cursor: default;
    pointer-events: none;
  }
  .card.skeleton::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
    transform: translateX(-100%);
    animation: skeletonSweep 1.05s var(--ease-out) infinite;
  }
  .sk-thumb{
    height: auto;
    aspect-ratio: 1;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(255,255,255,.055);
  }
  .sk-body{
    padding: 12px;
    display:flex;
    flex-direction: column;
    gap: 10px;
  }
  .sk-line{
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.075);
  }
  .sk-line.short{ width: 46%; }
  .sk-line.mid{ width: 68%; }
  html[data-theme="light"] .card.skeleton::before{ background: linear-gradient(90deg, transparent, rgba(0,0,0,.055), transparent); }
  html[data-theme="light"] .sk-thumb{ background: rgba(0,0,0,.035); }
  html[data-theme="light"] .sk-line{ background: rgba(0,0,0,.06); }

  @keyframes skeletonSweep{
    to{ transform: translateX(100%); }
  }



  .card:hover{ transform: translateY(-3px); border-color: rgba(79,150,255,.48); box-shadow: 0 8px 18px rgba(0,0,0,.20); }
  html[data-theme="light"] .card:hover{ box-shadow: 0 22px 58px rgba(0,0,0,.12); }
  .card:focus-visible{ outline: none; border-color: rgba(120,181,255,.85); box-shadow: 0 0 0 3px rgba(120,181,255,.18), 0 22px 58px rgba(0,0,0,.22); }

  .thumb{
    position: relative;
    height: auto;
    aspect-ratio: 1;
    background: rgba(0,0,0,.10);
    border-bottom: 1px solid var(--border-soft);
    overflow:hidden;
    isolation: isolate;
  }
  html[data-theme="light"] .thumb{ background: rgba(0,0,0,.03); }
  .thumb a{ position:absolute; inset:0; z-index:6; display:block; }

  .petimgwrap{
    position:absolute;
    inset:0;
    z-index: 4;
  }
  .petimgwrap picture, .petimgwrap img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .petimgwrap img{
    object-fit: contain;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(150px, 84%);
    height: min(150px, 84%);
    transform: translate(-50%, -50%) translateZ(0) scale(1);
    transition: transform 340ms var(--ease-out), filter 520ms var(--ease-out);
    filter: brightness(1.10) saturate(1.12) contrast(1.02);
  }
  .card:hover .petimgwrap img{ transform: translate(-50%, -50%) translateZ(0) scale(1.06); }
  .petimgwrap.xl-art img{ transform: translate(-50%, -50%) translateZ(0) scale(2); }
  .card:hover .petimgwrap.xl-art img{ transform: translate(-50%, -50%) translateZ(0) scale(2); }

  .topchips{
    position:absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display:flex;
    justify-content: space-between;
    gap: 10px;
    z-index: 7;
    pointer-events:none;
  }
  .topchips .left, .topchips .right{ display:flex; gap: 8px; align-items:center; }

  .bottomchips{
    position:absolute;
    left: 10px;
    bottom: 10px;
    display:flex;
    gap: 8px;
    z-index: 7;
    pointer-events:none;
  }

  .pill{
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.80);
    color: #fff;
    font-weight: 900;
    letter-spacing: .14px;
    font-size: 11.5px;
    display:inline-flex;
    align-items:center;
    gap: 8px;
    line-height: 1;
    white-space: nowrap;
  }
  html[data-theme="light"] .pill{
    background: rgba(255,255,255,.88);
    border-color: rgba(0,0,0,.12);
    color: var(--text);
  }

  .pill img,
  .pill svg{ width: 14px; height: 14px; display:block; filter:none!important; opacity:.95; flex:0 0 auto; }

  .pill.dim{
    opacity: 1;
    background: rgba(0,0,0,.80);
    border-color: rgba(255,255,255,.14);
  }
  html[data-theme="light"] .pill.dim{
    opacity: 1;
    background: rgba(255,255,255,.80);
    border-color: rgba(0,0,0,.12);
  }


  .meta{
    padding: 12px 12px 14px;
    display:flex;
    flex-direction: column;
    gap: 10px;
    min-width:0;
  }
  .head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    min-width:0;
    min-height: 26px;
  }
  .namewrap{
    display:flex;
    align-items:center;
    gap: 8px;
    min-width:0;
  }
  .name{
    font-weight: 980;
    letter-spacing: .16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width:0;
  }

  .trendmini{
    position:absolute;
    bottom:10px;
    right:10px;
    height:34px;
    width:34px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:default;
    background:rgba(0,0,0,.75);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(8px);
    z-index:8;
    transition:transform 160ms var(--ease), box-shadow 200ms var(--ease-out);
  }

  .trendmini svg{
    width:26px;
    height:26px;
    display:block;
  }


  .trendmini.up,
  .trendmini.rising{ color:#4dff88; }
  .trendmini.down,
  .trendmini.dropping{ color:#ff5e5e; }
  .trendmini.stable{ color:#ffc32b; }
  .trendmini.unstable{ color:#ffb84d; }

  .trendmini:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(0,0,0,.45);
  }




  .warn-mini{
    height: 26px;
    width: 26px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.22);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:default;
    transition: transform 180ms var(--ease), box-shadow 240ms var(--ease-out), border-color 220ms var(--ease-out), background-color 520ms var(--ease-out);
    flex: 0 0 auto;
    position: relative;
    z-index: 9;
  }
  html[data-theme="light"] .warn-mini{ background: rgba(255,255,255,.82); border-color: rgba(0,0,0,.12); }
  .warn-mini:hover{ transform: translateY(-1px); box-shadow: 0 14px 24px rgba(0,0,0,.14); border-color: rgba(120,181,255,.22); }
  .warn-mini svg{ width: 16px; height: 16px; display:block; }
  .warn-mini.hoarded{ color: #f1c40f; border-color: rgba(241,196,15,.55); background: rgba(241,196,15,.12); }
  .warn-mini.manipulated{ color: #ff7a2f; border-color: rgba(255,122,47,.55); background: rgba(255,122,47,.12); }
  .warn-mini.both{ color: #ff3b30; border-color: rgba(255,59,48,.55); background: rgba(255,59,48,.12); }

  .hr{ height: 1px; background: var(--border-soft); width: 100%; }

  .vd-row{
    display:grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 4px;
    align-items: center;
  }

  .value-block{ display: contents; }
  .demand-pack{
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    display:inline-flex;
    align-items:center;
    min-width:0;
    cursor: default;
    border-radius: 999px;
    transform: translateY(-2px);
    position: relative;
    z-index: 9;
    padding: 0;
  }
  .demand-pack:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--dr), .18);
  }

  .value-block .value-num{
    grid-column: 1 / -1;
    grid-row: 1;
    font-family: Lexend, sans-serif;
    font-weight: 900;
    letter-spacing: .16px;
    font-size: 18px;
    line-height: 1.05;
    min-width: 0;
  }
  .value-block .value-label{
    grid-column: 1;
    grid-row: 2;
    color: var(--muted);
    font-weight: 900;
    letter-spacing: .22px;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 1.05;
  }

  .dscope{ --dr: var(--rgb-low); }
  .dscope.very-low{ --dr: var(--rgb-low); }
  .dscope.low{ --dr: var(--rgb-low); }
  .dscope.medium{ --dr: var(--rgb-med); }
  .dscope.high{ --dr: var(--rgb-high); }
  .dscope.very-high{ --dr: var(--rgb-vhigh); }
  .dscope.insane{ --dr: var(--rgb-insane); }

  .demand-pack .stars{
    display: inline-flex;
    height: 19px;
    gap: 1px;
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
    font-weight: 800;
  }

  .demand-pack .demand-empty{
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
  }

  .demand-pack .star{
    position: relative;
    display: block;
    width: 18px;
    height: 19px;
    line-height: 19px;
  }

  .demand-pack .star::before,
  .demand-pack .star::after{
    position: absolute;
    inset: 0;
    content: "★";
    line-height: 19px;
    text-align: center;
  }

  .demand-pack .star::before{
    color: rgba(var(--dr), .20);
  }

  .demand-pack .star::after{
    width: 0;
    overflow: hidden;
    color: rgb(var(--dr));
  }

  .demand-pack .star.on::after{
    width: 100%;
  }

  .demand-pack .star.half::after{
    width: 100%;
    clip-path: inset(0 50% 0 0);
  }

  .stats{
    display:flex;
    flex-wrap: nowrap;
    gap: 8px 10px;
    align-items:center;
    overflow: hidden;
    white-space: nowrap;
  }
  .stat{
    flex: 0 0 auto;
    display:inline-flex;
    align-items:center;
    gap: 6px;
    font-weight: 850;
    color: var(--muted);
    letter-spacing: .12px;
    font-size: 12px;
  }
  .stat img{ width: 14px; height: 14px; display:block; opacity:.95; filter: var(--decal-filter); }
  .stat svg{ width: 14px; height: 14px; display:block; opacity:.95; flex:0 0 auto; }
  .hidden{ display:none !important; }

  .overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--ease-out);
    z-index: 4990;
  }
  .overlay.open{ opacity: 1; pointer-events: auto; }
  .menu{
    position: fixed;
    z-index: 5000;
    width: min(360px, 92vw);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(.985);
    transition: opacity 180ms var(--ease-out), transform 240ms var(--ease-out);
  }
  .menu.open{ opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
  .menu-panel{
    border: 1px solid var(--border-soft);
    background: rgba(23,23,23,.96);
    border-radius: 22px;
    box-shadow: 0 30px 90px rgba(0,0,0,.28);
    overflow: hidden;
  }
  html[data-theme="light"] .menu-panel{ background: rgba(255,255,255,.96); box-shadow: 0 30px 90px rgba(0,0,0,.14); }
  .menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border-soft);
  }
  .menu-title{ font-family: Lexend, sans-serif; font-weight: 950; letter-spacing: .18px; }
  .menu-body{ padding: 12px; }
  .menu-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.02);
  }
  html[data-theme="light"] .menu-item{ background: rgba(0,0,0,.02); }
  .menu-item + .menu-item{ margin-top: 10px; }
  .menu-item span{ font-weight: 950; letter-spacing: .14px; }
  .ui-checkbox,
  .ui-checkbox *,
  .ui-checkbox *::before,
  .ui-checkbox *::after{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
  }
  .ui-checkbox{
    --primary-color: var(--io-blue);
    --secondary-color: rgba(255,255,255,.06);
    --primary-hover-color: #9bcaff;
    --checkbox-diameter: 22px;
    --checkbox-border-radius: 7px;
    --checkbox-border-color: var(--btn-border);
    --checkbox-border-width: 1px;
    --checkbox-border-style: solid;
    --checkmark-size: 1.2;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    width:var(--checkbox-diameter);
    height:var(--checkbox-diameter);
    border-radius:var(--checkbox-border-radius);
    background:var(--secondary-color);
    border:var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
    -webkit-transition:all .3s;
    -o-transition:all .3s;
    transition:all .3s;
    cursor:pointer;
    position:relative;
    flex:0 0 auto;
  }
  html[data-theme="light"] .ui-checkbox{
    --secondary-color: rgba(255,255,255,.94);
    --checkbox-border-color: rgba(0,0,0,.18);
  }
  .ui-checkbox::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    -webkit-box-shadow:0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
    box-shadow:0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
    border-radius:inherit;
    opacity:0;
    -webkit-transition:all .5s cubic-bezier(.12,.4,.29,1.46);
    -o-transition:all .5s cubic-bezier(.12,.4,.29,1.46);
    transition:all .5s cubic-bezier(.12,.4,.29,1.46);
  }
  .ui-checkbox::before{
    top:40%;
    left:50%;
    content:"";
    position:absolute;
    width:4px;
    height:7px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    -webkit-transform:translate(-50%,-50%) rotate(45deg) scale(0);
    -ms-transform:translate(-50%,-50%) rotate(45deg) scale(0);
    transform:translate(-50%,-50%) rotate(45deg) scale(0);
    opacity:0;
    -webkit-transition:all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;
    -o-transition:all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;
    transition:all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;
  }
  .ui-checkbox:hover{ border-color:var(--primary-hover-color); }
  .ui-checkbox:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(120,181,255,.18);
  }
  .ui-checkbox:checked{
    background:var(--primary-color);
    border-color:transparent;
  }
  .ui-checkbox:checked::before{
    opacity:1;
    -webkit-transform:translate(-50%,-50%) rotate(45deg) scale(var(--checkmark-size));
    -ms-transform:translate(-50%,-50%) rotate(45deg) scale(var(--checkmark-size));
    transform:translate(-50%,-50%) rotate(45deg) scale(var(--checkmark-size));
    -webkit-transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
    -o-transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
    transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
  }
  .ui-checkbox:active:not(:checked)::after{
    -webkit-transition:none;
    -o-transition:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    transition:none;
    opacity:1;
  }

  .warn-tooltip{
    position: fixed;
    width: min(320px, 86vw);
    border-radius: 18px;
    border: 1px solid var(--border-soft);
    background: rgba(23,23,23,.97);
    box-shadow: 0 30px 90px rgba(0,0,0,.34);
    padding: 10px;
    z-index: 25000;
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    pointer-events: none;
    transition: opacity 160ms var(--ease-out), transform 220ms var(--ease-out);
  }
  html[data-theme="light"] .warn-tooltip{ background: rgba(255,255,255,.97); box-shadow: 0 30px 90px rgba(0,0,0,.16); }
  .warn-tooltip.open{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .wt-title{
    font-family: Lexend, sans-serif;
    font-weight: 950;
    letter-spacing: .16px;
    display:flex;
    align-items:center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .wt-row{
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.02);
    border-radius: 14px;
    padding: 10px;
  }
  html[data-theme="light"] .wt-row{ background: rgba(0,0,0,.02); }
  .wt-row + .wt-row{ margin-top: 8px; }
  .wt-h{
    font-weight: 950;
    letter-spacing: .14px;
    display:flex;
    align-items:center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .wt-dot{ width: 8px; height: 8px; border-radius: 999px; }
  .wt-dot.h{ background: #f1c40f; box-shadow: 0 0 0 4px rgba(241,196,15,.16); }
  .wt-dot.m{ background: #ff7a2f; box-shadow: 0 0 0 4px rgba(255,122,47,.16); }
  .wt-p{ color: var(--muted); font-weight: 750; line-height: 1.45; font-size: 13px; }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none!important; animation:none!important; }
  }

  #pets-page.page {
    width: min(calc(100% - 28px), var(--site-width));
    margin: 42px auto 28px;
    padding: 0;
    color: var(--text);
    font-family: Lexend, sans-serif;
  }

  #petValuesPage .pv-bar,
  .csel-menu-fixed,
  .menu-panel {
    background: var(--panel);
    border-color: var(--border);
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.22);
  }

  #petValuesPage .search,
  #petValuesPage .chip,
  #petValuesPage .seg {
    color: var(--soft);
    background-color: var(--header);
    border-color: var(--border);
    font-family: Lexend, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  #petValuesPage .pets-sort {
    display: block;
    flex: 0 0 160px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  #petValuesPage .pets-sort .custom-select {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  #petValuesPage .pets-sort .custom-select-menu {
    display: grid;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top;
    transition: opacity 150ms var(--ease-out), transform 180ms var(--ease-out), visibility 150ms;
  }

  #petValuesPage .pets-sort .custom-select.is-open .custom-select-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  #petValuesPage .pets-sort:focus-within {
    border: 0;
    outline: 0;
  }

  #petValuesPage .pets-sort .custom-select-trigger {
    min-height: 44px;
    padding: 0 14px;
    color: var(--soft);
    background: var(--header);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: Lexend, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  @media (min-width: 721px) {
    #petValuesPage .pv-bar {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto auto auto 160px 44px 44px;
      gap: 8px;
    }

    #petValuesPage .search {
      width: 100%;
    }

    #petValuesPage .pets-sort {
      width: 160px;
    }
  }

  #petValuesPage .name {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  #petValuesPage .value-block .value-num {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  #eggs-page.page {
    width: min(calc(100% - 28px), var(--site-width));
    margin: 42px auto 28px;
    padding: 0;
    color: var(--text);
    font-family: Lexend, sans-serif;
  }

  #eggValuesPage .pv-bar {
    background: var(--panel);
    border-color: var(--border);
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.22);
  }

  #eggValuesPage .search,
  #eggValuesPage .chip {
    color: var(--soft);
    background-color: var(--header);
    border-color: var(--border);
    font-family: Lexend, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  #eggValuesPage .pets-sort {
    display: block;
    flex: 0 0 160px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  #eggValuesPage .pets-sort .custom-select {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  #eggValuesPage .pets-sort .custom-select-menu {
    display: grid;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top;
    transition: opacity 150ms var(--ease-out), transform 180ms var(--ease-out), visibility 150ms;
  }

  #eggValuesPage .pets-sort .custom-select.is-open .custom-select-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  #eggValuesPage .pets-sort:focus-within {
    border: 0;
    outline: 0;
  }

  #eggValuesPage .pets-sort .custom-select-trigger {
    min-height: 44px;
    padding: 0 14px;
    color: var(--soft);
    background: var(--header);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: Lexend, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  #eggValuesPage .egg-grid {
    margin-top: 14px;
  }

  @media (min-width: 721px) {
    #eggValuesPage .pv-bar {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) 160px 44px;
      gap: 8px;
    }

    #eggValuesPage .search,
    #eggValuesPage .pets-sort {
      width: 100%;
    }
  }

  @media (max-width: 720px) {
    #eggValuesPage .pets-sort {
      flex: 1 1 160px;
      order: 2;
    }

    #eggs-direction-button {
      flex: 0 0 auto;
      order: 3;
    }
  }

  @media (max-width: 720px) {
    #eggs-page.page {
      width: calc(100% - 20px);
      margin-top: 28px;
    }
  }

  #petValuesPage .value-block .value-label,
  #petValuesPage .stat {
    font-weight: 600;
    letter-spacing: 0;
  }

  #petValuesPage .chip.active,
  #petValuesPage .seg.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent-hover);
    box-shadow: 0 0 0 3px rgba(79, 150, 255, 0.16);
  }

  #petValuesPage .csel-opt:hover,
  #petValuesPage .csel-opt[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent) 16%, var(--panel));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  }

  html[data-theme="light"] #petValuesPage .pv-bar,
  html[data-theme="light"] .csel-menu-fixed,
  html[data-theme="light"] .menu-panel {
    background: var(--panel);
    box-shadow: 0 14px 36px rgba(32, 38, 48, 0.12);
  }

  @media (max-width: 720px) {
    #pets-page.page {
      width: calc(100% - 20px);
      margin-top: 28px;
    }
  }

  @media (max-width: 560px) {
    #pets-page.page,
    #eggs-page.page {
      margin-top: 18px;
    }

    #petValuesPage .pv-bar,
    #eggValuesPage .pv-bar {
      gap: 8px;
    }

    #petValuesPage .search,
    #petValuesPage .pets-sort,
    #eggValuesPage .search,
    #eggValuesPage .pets-sort {
      flex-basis: 100%;
      min-width: 0;
      width: 100%;
    }

    #petValuesPage .csel,
    #eggValuesPage .csel {
      width: 100%;
    }

    #petValuesPage .grid,
    #eggValuesPage .grid {
      gap: 8px;
    }

    .csel-menu-fixed {
      max-width: calc(100vw - 16px);
    }
  }

  .card.skeleton .sk-thumb {
    display: grid;
    place-items: center;
  }

  .card.skeleton .sk-pet-art,
  .card.skeleton .sk-pet-badge,
  .card.skeleton .sk-stats span,
  .card.skeleton .sk-value-row span {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.075);
  }

  .card.skeleton .sk-pet-art::after,
  .card.skeleton .sk-pet-badge::after,
  .card.skeleton .sk-stats span::after,
  .card.skeleton .sk-value-row span::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
    transform: translateX(-100%);
    animation: skeletonSweep 1.05s var(--ease-out) infinite;
  }

  .card.skeleton .sk-pet-art {
    width: 62%;
    height: 62%;
    border-radius: 8px;
  }

  .card.skeleton .sk-pet-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 42px;
    height: 12px;
    border-radius: 4px;
  }

  .card.skeleton .sk-body {
    gap: 9px;
  }

  .card.skeleton .sk-name {
    width: 72%;
    height: 12px;
  }

  .card.skeleton .sk-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .card.skeleton .sk-stats span {
    height: 17px;
    border-radius: 4px;
  }

  .card.skeleton .sk-value-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 8px;
  }

  .card.skeleton .sk-value-row span {
    height: 24px;
    border-radius: 5px;
  }