/* improted from index */
:root{
  --bg:#0b0f14; --card:#121823; --muted:#9fb0c3; --text:#e8f0fa;
  --accent:#72d0ff; --ok:#3bd671; --warn:#ffb86b; --bad:#ff6b6b; --border:#1d2633;
  --group-width:520px;
  --card-pad:12px;
  --sticky-offset:54px;
  --mode-light-red:#c8a2ff;
}

@font-face{
    font-family:'Nishiki-teki';
    font-style:normal;
    font-weight:500;
    unicode-range: U+1F5F2;
  src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
  }

*{ box-sizing:border-box }

body{
  margin:0;
  font-family:system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Nishiki-teki;
  background:var(--bg);
  color:var(--text);
}


.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:#0c1117e6;
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}

.topbar-inner{
  max-width:min(100vw - 32px, calc(var(--group-width) + 2*var(--card-pad)));
  margin:0 auto;
  padding:.65rem .75rem;
  display:flex;
  align-items:center;
  gap:.75rem;
}

.title{
  font-weight:700;
  letter-spacing:.2px;
}

.pill{
  font-size:.8rem;
  padding:.15rem .5rem;
  border-radius:.6rem;
  background:#0f1622;
  border:1px solid var(--border);
  color:var(--muted);
}


.spacer{ flex:1 }

.btn{
  padding:.45rem .65rem;
  border-radius:.55rem;
  border:1px solid var(--border);
  background:#0f1622;
  color:var(--text);
  cursor:pointer;
}

.btn:hover{
  border-color:#233045;
}

    
/* killshots  */
    :root{
      --group-width: 1120px;
      --card-pad: 14px;
    }

    html{
      scrollbar-gutter:stable;
      scrollbar-color:rgba(114,208,255,.35) rgba(11,15,20,.55);
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar{
      width:10px;
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track{
      background:rgba(11,15,20,.55);
    }

    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb{
      background:rgba(114,208,255,.26);
      border:2px solid #0b0f14;
      border-radius:999px;
    }

    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover{
      background:rgba(114,208,255,.38);
    }

    body{
      background:
        radial-gradient(1200px 800px at 20% -10%, #142132 0%, #0b0f14 55%) fixed
        #0b0f14;
    }

    .topbar-inner{
      min-height:var(--sticky-offset);
    }

    .ks-title-skull{
      display:inline-block;
      width:1.9em;
      height:1.14em;
      margin-left:-0.3rem;
      vertical-align:-0.15em;
      object-fit:contain;
      filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
    }

    .page-wrap{
      width:calc(var(--group-width) + 2*var(--card-pad));
      max-width:min(100vw - 32px, calc(var(--group-width) + 2*var(--card-pad)));
      margin:18px auto 42px;
    }

    .panel{
      background:linear-gradient(180deg, #111824 0%, #0f1622 100%);
      border:1px solid var(--border);
      border-radius:16px;
      box-shadow:0 10px 30px rgba(0,0,0,.35);
    }

    .filters{
      padding:12px;
    }

    .filters-row{
      display:flex;
      gap:10px;
      align-items:flex-end;
      flex-wrap:wrap;
    }

    .ks-field{
      display:flex;
      flex-direction:column;
      gap:6px;
      flex:1 1 220px;
      min-width:220px;
    }

    .ks-field .lbl{
      font-size:.72rem;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--muted);
    }

    .ks-input, .ks-select{
      height:42px;
      padding:.55rem .65rem;
      border-radius:12px;
      border:1px solid var(--border);
      background:#0f1622;
      color:var(--text);
      outline:none;
    }

    .ks-input::placeholder{
      color:rgba(159,176,195,.7);
    }

    .ks-input:focus, .ks-select:focus{
      border-color:#2a3a52;
      box-shadow:0 0 0 3px rgba(114,208,255,.14);
    }

    .ks-input[aria-invalid="true"]{
      border-color:rgba(255,77,93,.85);
      box-shadow:0 0 0 3px rgba(255,77,93,.14);
    }

    .ks-suggest{
      position:absolute;
      left:0;
      right:0;
      top:calc(100% + 8px);
      z-index:40;
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:8px;
      border-radius:12px;
      border:1px solid var(--border);
      background:rgba(15,22,34,.96);
      box-shadow:0 24px 70px rgba(0,0,0,.55);
    }

    .ks-suggest[hidden]{
      display:none;
    }

    .ks-suggest-option{
      display:flex;
      align-items:center;
      gap:8px;
      padding:.45rem .6rem;
      border-radius:10px;
      border:1px solid transparent;
      background:rgba(15,22,34,.55);
      color:var(--text);
      font-weight:700;
      text-align:left;
      cursor:pointer;
      font-family:inherit;
    }

    .ks-suggest-option:hover,
    .ks-suggest-option:focus-visible{
      outline:none;
      border-color:#2a3a52;
      background:rgba(19,27,40,.92);
    }

    .filters-actions{
      display:flex;
      gap:10px;
      flex:0 0 auto;
    }

    .filters-actions .btn{
      height:42px;
      padding:.55rem .8rem;
    }

    .filters-actions .ks-headshots-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:42px;
      min-width:42px;
      padding:0;
    }

    .filters-actions .ks-headshots-toggle .icon{
      font-size:1.05rem;
      line-height:1;
    }

    .filters-actions .ks-headshots-toggle[aria-pressed="true"]{
      border-color:rgba(114,208,255,.38);
      box-shadow:0 0 0 3px rgba(114,208,255,.10);
    }

    .ks-sort-btn{
      width:42px;
      padding:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }

    .ks-sort-icon{
      font-size:1.15rem;
      line-height:1;
    }

    .ks-sort-icon.level{
      color:#ffa726;
      font-weight:900;
      font-family:system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Nishiki-teki;
    }

    .ks-sort-wrap{
      position:relative;
      display:inline-flex;
    }

    .ks-sort-wrap::after{
      content:"";
      position:absolute;
      left:0;
      top:100%;
      height:10px;
      width:100%;
      min-width:62px;
      background:transparent;
    }

    .ks-sort-key[aria-expanded="true"]{
      border-color:#2a3a52;
      box-shadow:0 0 0 3px rgba(114,208,255,.14);
    }

    .ks-sort-menu{
      position:absolute;
      top:calc(100% + 10px);
      left:0;
      padding:10px;
      border-radius:14px;
      border:1px solid var(--border);
      background:rgba(15,22,34,.96);
      box-shadow:0 20px 70px rgba(0,0,0,.55);
      display:flex;
      flex-direction:column;
      gap:8px;
      z-index:250;
      min-width:62px;
    }

    .ks-sort-menu[hidden]{ display:none }

    .ks-sort-option{
      width:42px;
      height:42px;
      padding:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }

    .ks-sort-option[aria-checked="true"]{
      border-color:rgba(114,208,255,.38);
      box-shadow:0 0 0 3px rgba(114,208,255,.10);
    }

    .ks-map-wrap{
      position:relative;
      width:100%;
    }

    .ks-map-btn{
      width:100%;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 .65rem;
      text-align:left;
    }

    .ks-map-btn[aria-expanded="true"]{
      border-color:#2a3a52;
      box-shadow:0 0 0 3px rgba(114,208,255,.14);
    }

    .ks-map-thumb{
      width:50px;
      height:28px;
      border-radius:4px;
      object-fit:cover;
      flex:0 0 auto;
      border:1px solid rgba(29,38,51,.85);
      background:#0b0f14;
      opacity:0.8;
    }

    .ks-map-label{
      flex:1 1 auto;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .ks-map-caret{
      flex:0 0 auto;
      color:rgba(159,176,195,.7);
    }

    .ks-map-menu{
      position:absolute;
      top:calc(100% + 10px);
      left:0;
      right:0;
      padding:10px;
      border-radius:14px;
      border:1px solid var(--border);
      background:rgba(15,22,34,.96);
      box-shadow:0 20px 70px rgba(0,0,0,.55);
      display:flex;
      flex-direction:column;
      gap:8px;
      z-index:240;
      max-height:min(640px, 75vh);
      overflow-y:auto;
      overflow-x:hidden;
      overscroll-behavior:contain;
      scrollbar-gutter:stable;
      scrollbar-width:auto;
      scrollbar-color:rgba(114,208,255,.35) rgba(11,15,20,.55);
    }

    .ks-map-menu[hidden]{ display:none }

    .ks-map-option{
      width:100%;
      height:44px;
      flex:0 0 auto;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 10px;
      text-align:left;
    }

    .ks-map-option[aria-selected="true"]{
      border-color:rgba(114,208,255,.38);
      box-shadow:0 0 0 3px rgba(114,208,255,.10);
    }

    .ks-map-native{ display:none }

    .ks-weapon-wrap{
      position:relative;
      width:100%;
    }

    .ks-weapon-btn{
      width:100%;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 .65rem;
      text-align:left;
    }

    .ks-weapon-btn[aria-expanded="true"]{
      border-color:#2a3a52;
      box-shadow:0 0 0 3px rgba(114,208,255,.14);
    }

    .ks-weapon-thumb{
      width:50px;
      height:28px;
      border-radius:4px;
      object-fit:contain;
      flex:0 0 auto;
      border:1px solid rgba(29,38,51,.85);
      background:none;
    }

    .ks-weapon-label{
      flex:1 1 auto;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .ks-weapon-caret{
      flex:0 0 auto;
      color:rgba(159,176,195,.7);
    }

    .ks-weapon-menu{
      position:absolute;
      top:calc(100% + 10px);
      left:0;
      right:0;
      padding:10px;
      border-radius:14px;
      border:1px solid var(--border);
      background:rgba(15,22,34,.96);
      box-shadow:0 20px 70px rgba(0,0,0,.55);
      display:flex;
      flex-direction:column;
      gap:8px;
      z-index:240;
      max-height:min(640px, 75vh);
      overflow-y:auto;
      overflow-x:hidden;
      overscroll-behavior:contain;
      scrollbar-gutter:stable;
      scrollbar-width:auto;
      scrollbar-color:rgba(114,208,255,.35) rgba(11,15,20,.55);
    }

    .ks-map-menu::-webkit-scrollbar,
    .ks-weapon-menu::-webkit-scrollbar{
      width:10px;
    }

    .ks-map-menu::-webkit-scrollbar-track,
    .ks-weapon-menu::-webkit-scrollbar-track{
      background:rgba(11,15,20,.55);
      border-radius:999px;
    }

    .ks-map-menu::-webkit-scrollbar-thumb,
    .ks-weapon-menu::-webkit-scrollbar-thumb{
      background:rgba(114,208,255,.26);
      border:2px solid rgba(15,22,34,.96);
      border-radius:999px;
    }

    .ks-map-menu::-webkit-scrollbar-thumb:hover,
    .ks-weapon-menu::-webkit-scrollbar-thumb:hover{
      background:rgba(114,208,255,.38);
    }

    .ks-weapon-menu[hidden]{ display:none }

    .ks-weapon-option{
      width:100%;
      height:44px;
      flex:0 0 auto;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 10px;
      text-align:left;
    }

    .ks-weapon-option[aria-selected="true"]{
      border-color:rgba(114,208,255,.38);
      box-shadow:0 0 0 3px rgba(114,208,255,.10);
    }

    .ks-weapon-native{ display:none }

    @media (hover: none){
      .ks-map-btn, .ks-weapon-btn{ display:none }
      .ks-map-menu, .ks-weapon-menu{ display:none !important }
      .ks-map-native, .ks-weapon-native{ display:block }
    }

    .count-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 2px 0;
      color:var(--muted);
      font-size:.92rem;
    }

    .count-row strong{ color:var(--text) }

    .ks-grid{
      margin-top:12px;
      position:relative;
      overflow-anchor:none;
    }

    .ks-grid-inner{
      display:grid;
      gap:12px;
      grid-template-columns:repeat(4, 1fr);
      --virtual-card-aspect:16/10;
    }

    @media (max-width: 1100px){ .ks-grid-inner{ grid-template-columns:repeat(3, 1fr) } }
    @media (max-width: 860px){ .ks-grid-inner{ grid-template-columns:repeat(2, 1fr) } }
    @media (max-width: 540px){ .ks-grid-inner{ grid-template-columns:1fr } }

    .ks-card{
      position:relative;
      border:1px solid rgba(29,38,51,1);
      background:#0f1622;
      border-radius:16px;
      overflow:hidden;
      cursor:pointer;
      padding:0;
      width:100%;
      aspect-ratio:16/10;
      box-shadow:0 10px 30px rgba(0,0,0,.25);
      transform:translateZ(0);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .ks-card:focus-visible{
      outline:none;
      border-color:rgba(114,208,255,.8);
      box-shadow:0 0 0 3px rgba(114,208,255,.14), 0 16px 50px rgba(0,0,0,.35);
    }

    .ks-card:hover{
      transform:translateY(-2px);
      border-color:#2a3a52;
      box-shadow:0 16px 50px rgba(0,0,0,.35);
    }

    .ks-thumb{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1.03);
      filter:saturate(1.05) contrast(1.05);
      opacity:1;
      transition:transform .25s ease, filter .25s ease, opacity .12s ease;
    }



    .ks-card:hover .ks-thumb{
      transform:scale(1.08);
      filter:saturate(1.12) contrast(1.08);
    }

    .ks-gradient{
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 48%, rgba(11,15,20,.85) 100%);
      z-index:2;
      pointer-events:none;
    }

    .ks-overlay{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      padding:12px 12px 10px;
      z-index:3;
      display:flex;
      flex-direction:column;
      gap:6px;
    }

    .ks-user{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-width:0;
    }

    .ks-user::after{
      content:"";
      width:22px;
      height:22px;
      flex:0 0 auto;
    }

    .ks-avatar-wrap{
      width:22px;
      height:22px;
      border-radius:999px;
      overflow:hidden;
      flex:0 0 auto;
      /* background:rgba(15,22,34,.6);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 10px 30px rgba(0,0,0,.22); */
    }

    .ks-avatar{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      opacity:1;
      /* transition:opacity .12s ease; */
    }

  
    .ks-user-name{
      font-weight:900;
      font-size:.98rem;
      line-height:1.1;
      letter-spacing:.2px;
      color:rgba(232, 240, 250, .88);
      text-shadow:0 6px 18px rgba(0,0,0,.55);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      min-width:0;
    }

    .ks-weapon{
      font-weight:700;
      font-size:.82rem;
      color:rgba(159, 176, 195, .92);
      text-shadow:0 6px 18px rgba(0,0,0,.55);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .ks-meta-row{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
    }

    .ks-meta-row .ks-weapon{
      flex:1 1 auto;
      min-width:0;
    }

    .ks-headshot{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:24px;
      height:24px;
      border-radius:999px;
      background:rgba(15,22,34,.75);
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter:blur(8px);
      box-shadow:0 10px 30px rgba(0,0,0,.22);
    }

    .ks-headshot .icon{
      font-size:14px;
      line-height:1;
      transform:translateY(1px);
    }

    .ks-chips{
      position:absolute;
      top:10px;
      left:10px;
      right:10px;
      display:flex;
      justify-content:space-between;
      gap:8px;
      z-index:3;
      pointer-events:none;
    }

    .ks-chips-left,
    .ks-chips-right{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .ks-chip{
      display:inline-flex;
      align-items:center;
      gap:.38rem;
      padding:.22rem .55rem;
      border-radius:999px;
      background:rgba(15,22,34,.75);
      border:1px solid rgba(29,38,51,.85);
      backdrop-filter:blur(8px);
      font-size:.75rem;
      color:var(--text);
      font-variant-numeric:tabular-nums;
      box-shadow:0 10px 30px rgba(0,0,0,.22);
    }

    .ks-chip.level{
      color:#ffb86b;
      border-color:rgba(255,184,107,.26);
      font-family:system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Nishiki-teki;
    }

    .ks-chip.distance{
      color:#72d0ff;
      border-color:rgba(114,208,255,.26);
    }

    .ks-play{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:3;
      opacity:0;
      transform:scale(.98);
      transition:opacity .18s ease, transform .18s ease;
      pointer-events:none;
    }

    .ks-card:hover .ks-play{
      opacity:1;
      transform:scale(1);
    }

    .ks-play .bubble{
      width:54px;
      height:54px;
      border-radius:999px;
      background:rgba(15,22,34,.55);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 18px 60px rgba(0,0,0,.42);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .ks-play .bubble::before{
      content:"▶";
      font-size:20px;
      margin-left:2px;
    }

    .ks-empty{
      margin:20px 0 0;
      padding:22px;
      border-radius:16px;
      border:1px dashed rgba(29,38,51,.9);
      color:var(--muted);
      text-align:center;
      background:rgba(15,22,34,.35);
    }

    .ks-dots{
      display:inline-block;
      width:3ch;
      text-align:left;
      vertical-align:baseline;
    }

    .ks-dots span{
      display:inline-block;
      opacity:.25;
      animation:ksDotPulse 1.25s infinite;
    }

    .ks-dots span:nth-child(2){ animation-delay:.18s }
    .ks-dots span:nth-child(3){ animation-delay:.36s }

    @keyframes ksDotPulse{
      0%, 70%, 100%{ opacity:.25 }
      35%{ opacity:1 }
    }

    .ks-stats-modal{
      position:fixed;
      inset:0;
      z-index:2950;
      background:rgba(0,0,0,.56);
      backdrop-filter:blur(8px);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px 18px;
    }

    .ks-stats-modal[hidden]{
      display:none;
    }

    .ks-stats-card{
      width:min(calc(54ch + 32px), 92vw);
      border-radius:18px;
      overflow:hidden;
      background:
        radial-gradient(110% 130% at 0% 0%, rgba(114,208,255,.06) 0%, rgba(114,208,255,0) 55%),
        linear-gradient(180deg, #111824 0%, #0f1622 100%);
      border:1px solid rgba(35,48,69,.95);
      box-shadow:0 40px 120px rgba(0,0,0,.55);
    }

    .ks-stats-head{
      display:flex;
      align-items:center;
      gap:10px;
      padding:14px 16px;
      border-bottom:1px solid rgba(29,38,51,.9);
    }

    .ks-stats-title{
      margin:0;
      color:rgba(232, 240, 250, .95);
      font-size:1.32rem;
      line-height:1.15;
      font-weight:900;
      letter-spacing:.01em;
    }

    .ks-stats-close{
      min-width:42px;
      min-height:42px;
      padding:.45rem .7rem;
      border-radius:12px;
      border:1px solid rgba(29,38,51,.95);
      background:rgba(15,22,34,.72);
      color:rgba(232,240,250,.92);
      font-size:1.15rem;
      font-weight:800;
      line-height:1;
    }

    .ks-stats-close:hover{
      border-color:#2a3a52;
      background:rgba(15,22,34,.95);
    }

    .ks-stats-body{
      padding:18px 16px 20px;
      color:rgba(198, 210, 226, .94);
      font-size:1.02rem;
      line-height:1.62;
      letter-spacing:0;
    }

    .ks-stats-body p{
      margin:0;
    }

    .ks-stats-body strong{
      color:rgba(232, 240, 250, .98);
      font-weight:900;
    }

    body.ks-lock{ overflow:hidden }

    .ks-modal{
      position:fixed;
      inset:0;
      z-index:3000;
      background:rgba(0,0,0,.62);
      backdrop-filter:blur(8px);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px 18px;
    }

    .ks-modal[hidden]{ display:none }

    .ks-modal-card{
      width:min(1040px, 96vw);
      border-radius:18px;
      overflow:hidden;
      background:linear-gradient(180deg, #111824 0%, #0f1622 100%);
      border:1px solid var(--border);
      box-shadow:0 40px 120px rgba(0,0,0,.55);
    }

    .ks-modal-head{
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-bottom:1px solid var(--border);
    }

    .ks-modal-head .meta{
      min-width:0;
      display:flex;
      gap:8px;
      align-items:center;
    }

    .ks-modal-head .ks-avatar-wrap{
      width:28px;
      height:28px;
      box-shadow:0 12px 34px rgba(0,0,0,.28);
    }

    .ks-modal-head .meta .user{
      font-weight:900;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      color:rgba(232, 240, 250, .88);
    }

    .ks-modal-head .meta .dot{ color:var(--muted) }

    .ks-modal-head .meta .weapon{
      color:rgba(159, 176, 195, .92);
      font-weight:700;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .ks-modal-head .meta a.user,
    .ks-modal-head .meta a.weapon{
      text-decoration:none;
      cursor:pointer;
    }

    .ks-modal-head .meta a.user:hover,
    .ks-modal-head .meta a.weapon:hover{
      text-decoration:none;
    }

    .ks-modal-head .spacer{ flex:1 }

    .ks-copy-btn{
      width:42px;
      padding:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }

    .ks-copy-btn .icon{
      font-size:1.05rem;
      line-height:1;
    }

    .ks-modal-body{
      position:relative;
      background:#0b0f14;
    }

    .ks-video{
      width:100%;
      height:min(70vh, 580px);
      background:#0b0f14;
      display:block;
      object-fit:contain;
    }

    .ks-nav{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:44px;
      height:56px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(15,22,34,.55);
      color:var(--text);
      cursor:pointer;
      z-index:5;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 18px 60px rgba(0,0,0,.45);
    }

    .ks-nav:disabled{
      opacity:.35;
      cursor:default;
      border-color:rgba(255,255,255,.08);
      background:rgba(15,22,34,.35);
      box-shadow:none;
    }

    .ks-nav:disabled:hover{
      border-color:rgba(255,255,255,.08);
      background:rgba(15,22,34,.35);
    }

    .ks-nav:hover{
      border-color:#2a3a52;
      background:rgba(15,22,34,.78);
    }

    .ks-nav:active{
      transform:translateY(-50%) scale(.98);
    }

    .ks-nav.prev{ left:12px }
    .ks-nav.next{ right:12px }

    .ks-modal-foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-top:1px solid var(--border);
      background:rgba(15,22,34,.65);
    }

    .ks-modal-foot .chips{
      display:flex;
      gap:8px;
      align-items:center;
    }

    .ks-tags{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      flex:1 1 auto;
      min-width:0;
    }

    .ks-tag{
      display:inline-flex;
      align-items:center;
      appearance:none;
      border:1px solid rgba(29,38,51,.85);
      background:rgba(15,22,34,.55);
      color:rgba(232, 240, 250, .88);
      border-radius:999px;
      padding:.18rem .55rem;
      font-size:.75rem;
      letter-spacing:.02em;
      cursor:pointer;
      max-width:160px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      text-decoration:none;
      backdrop-filter:blur(8px);
      box-shadow:0 10px 30px rgba(0,0,0,.18);
    }

    .ks-tag:hover{
      border-color:#233045;
      background:rgba(15,22,34,.78);
      color:var(--text);
    }

    .ks-tag:focus-visible{
      outline:none;
      border-color:#2a3a52;
      box-shadow:0 0 0 3px rgba(114,208,255,.14);
    }

    .ks-tag.ks-tag-more{
      color:rgba(159,176,195,.9);
      cursor:default;
    }

    .ks-active-tag-row{
      display:flex;
      align-items:center;
      min-height:28px;
      position:absolute;
      left:0;
      top:calc(100% + 8px);
    }

    .ks-active-tag-row[hidden]{
      display:none;
    }

    .filters.ks-has-active-tag{
      padding-bottom:56px;
    }

    .ks-username-field{
      position:relative;
    }

    .ks-username-field.ks-suggest-open .ks-active-tag-row{
      display:none;
    }

    .ks-filter-tag{
      cursor:default;
      max-width:100%;
      padding:.18rem .35rem .18rem .55rem;
      gap:.45rem;
    }

    .ks-filter-tag .txt{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .ks-tag-clear{
      appearance:none;
      border:0;
      background:transparent;
      color:rgba(159,176,195,.9);
      cursor:pointer;
      padding:0 .18rem;
      line-height:1;
      font-size:.85rem;
    }

    .ks-tag-clear:hover{
      color:var(--text);
    }

    .ks-tag-clear:focus-visible{
      outline:none;
      color:var(--text);
    }

    .ks-hint{
      color:var(--muted);
      font-size:.9rem;
    }

    a.pill{
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
    }

    a.pill:hover{
      border-color:#233045;
      color:var(--text);
    }

    .ks-monster{
      position:fixed;
      right:18px;
      bottom:18px;
      width:125px;
      z-index:1200;
      text-decoration:none;
      user-select:none;
      -webkit-tap-highlight-color:transparent;
    }

    .ks-monster img{
      width:100%;
      height:auto;
      display:block;
      transform-origin:center;
      filter:drop-shadow(0 18px 55px rgba(0,0,0,.5));
      transition:transform .18s ease, filter .18s ease;
    }

    .ks-monster:hover img,
    .ks-monster:focus-visible img{
      transform:translateY(-2px) scale(1.12);
      filter:drop-shadow(0 28px 70px rgba(0,0,0,.6));
    }

    .ks-monster .bubble{
      position:absolute;
      right:10px;
      bottom:calc(100% + 12px);
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(29,38,51,.95);
      background:rgba(15,22,34,.92);
      color:rgba(232,240,250,.92);
      font-weight:900;
      font-size:.95rem;
      letter-spacing:.2px;
      white-space:nowrap;
      box-shadow:0 20px 70px rgba(0,0,0,.55);
      opacity:0;
      transform:translateY(8px);
      pointer-events:none;
      transition:opacity .18s ease, transform .18s ease;
    }

    .ks-monster .bubble::after{
      content:"";
      position:absolute;
      right:18px;
      bottom:-12px;
      width:14px;
      height:14px;
      background:rgba(15,22,34,.92);
      border-right:1px solid rgba(29,38,51,.95);
      border-bottom:1px solid rgba(29,38,51,.95);
      transform:rotate(45deg);
    }

    .ks-monster:hover .bubble,
    .ks-monster:focus-visible .bubble{
      opacity:1;
      transform:translateY(0);
    }

    body.ks-lock .ks-monster{ display:none }

    @media (max-width: 1400px), (hover: none){
      .ks-monster{ display:none }
    }

    @media (prefers-reduced-motion: reduce){
      .ks-card, .ks-thumb, .ks-play{ transition:none !important }
    }