/* ========================================

   VK COLLECTION LIST CHIPS v2

   Prefix: vkclc

   ======================================== */

.vkclc{

  --lime:#AAFF00;--cyan:#00e5ff;--red:#ff4444;

  --lime06:rgba(170,255,0,0.06);--lime08:rgba(170,255,0,0.08);

  --lime10:rgba(170,255,0,0.10);--lime12:rgba(170,255,0,0.12);

  --lime15:rgba(170,255,0,0.15);--lime20:rgba(170,255,0,0.20);

  --lime25:rgba(170,255,0,0.25);--lime40:rgba(170,255,0,0.40);

  --bg:#000;--card:#0a0a0a;--bg3:#111;

  --b1:#161616;--b2:#1a1a1a;--b3:#222;

  --w100:#fff;--w85:rgba(255,255,255,0.85);

  --w06:rgba(255,255,255,0.06);--w04:rgba(255,255,255,0.04);

  --w02:rgba(255,255,255,0.02);

  --g1:#999;--g2:#777;--g3:#555;--g4:#444;--g5:#333;

  --r:10px;

  --ease:cubic-bezier(0.22,1,0.36,1);

  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  -webkit-font-smoothing:antialiased;color:var(--w100);

  background:var(--bg);position:relative;overflow:hidden;

}

.vkclc *,.vkclc *::before,.vkclc *::after{box-sizing:border-box}



/* -- Subtle top/bottom borders -- */

.vkclc::before,.vkclc::after{

  content:'';position:absolute;left:0;right:0;height:1px;z-index:2;

}

.vkclc::before{top:0;background:linear-gradient(90deg,transparent 10%,var(--b2) 50%,transparent 90%)}

.vkclc::after{bottom:0;background:linear-gradient(90deg,transparent 10%,var(--b2) 50%,transparent 90%)}



/* -- Noise grain -- */

.vkclc__noise{

  position:absolute;inset:0;z-index:0;opacity:.02;pointer-events:none;

  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");

  background-repeat:repeat;background-size:200px 200px;

}



/* -- Ambient glow -- */

.vkclc__glow{

  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);

  width:500px;height:200px;border-radius:50%;

  background:radial-gradient(ellipse,rgba(170,255,0,.02) 0%,transparent 70%);

  pointer-events:none;z-index:0;filter:blur(40px);

}



/* -- Inner container -- */

.vkclc__inner{max-width:1340px;margin:0 auto;padding:36px 40px 40px;position:relative;z-index:1}



/* =======================================

   SECTION HEADER - Left aligned

   ======================================= */

.vkclc__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px}

.vkclc__header-left{display:flex;align-items:center;gap:14px}

.vkclc__icon{

  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;

  background:linear-gradient(145deg,var(--lime10),var(--lime06));

  border:1px solid var(--lime12);flex-shrink:0;

}

.vkclc__icon svg{width:14px;height:14px;stroke:var(--lime);fill:none;opacity:.8}

.vkclc__heading{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.06em;color:var(--w85);margin:0;line-height:1}

.vkclc__heading-dot{color:var(--lime)}

.vkclc__tag{

  font-size:9px;font-weight:800;color:var(--lime);

  background:var(--lime06);border:1px solid var(--lime10);

  padding:3px 10px;border-radius:4px;letter-spacing:.08em;text-transform:uppercase;

}



/* -- Scroll arrows (desktop) -- */

.vkclc__arrows{display:none;align-items:center;gap:6px}

@media(min-width:769px){.vkclc__arrows{display:flex}}

.vkclc__arrow{

  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;

  background:var(--card);border:1px solid var(--b2);cursor:pointer;

  transition:all .25s var(--ease);color:var(--g3);

}

.vkclc__arrow:hover{border-color:var(--lime25);color:var(--lime);background:var(--lime06)}

.vkclc__arrow svg{width:14px;height:14px;stroke:currentColor;fill:none}

.vkclc__arrow:active{transform:scale(.92)}



/* =======================================

   SCROLL TRACK

   ======================================= */

.vkclc__track{position:relative}



/* -- Edge fades -- */

.vkclc__track::before,.vkclc__track::after{

  content:'';position:absolute;top:0;bottom:0;width:40px;z-index:3;pointer-events:none;

}

.vkclc__track::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}

.vkclc__track::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}



.vkclc__scroll{

  display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;

  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;

  scroll-behavior:smooth;

}

.vkclc__scroll::-webkit-scrollbar{height:2px}

.vkclc__scroll::-webkit-scrollbar-track{background:var(--b1);border-radius:2px}

.vkclc__scroll::-webkit-scrollbar-thumb{background:var(--lime20);border-radius:2px}

.vkclc__scroll::-webkit-scrollbar-thumb:hover{background:var(--lime40)}



/* -- Progress bar under scroll -- */

.vkclc__progress{height:2px;background:var(--b1);border-radius:2px;margin-top:4px;overflow:hidden;position:relative}

.vkclc__progress-bar{

  height:100%;border-radius:2px;width:0%;

  background:linear-gradient(90deg,var(--lime),var(--cyan));

  transition:width .15s ease;

}



/* =======================================

   PILL - UPGRADED

   ======================================= */

.vkclc__pill{

  flex-shrink:0;scroll-snap-align:start;

  display:inline-flex;align-items:center;gap:10px;

  padding:10px 22px;border-radius:100px;text-decoration:none !important;

  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;

  color:var(--g1);white-space:nowrap;

  background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.01));

  border:1px solid var(--b2);

  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);

  transition:all .35s var(--ease);position:relative;overflow:hidden;

  opacity:0;transform:translateY(12px) scale(.95);

}

.vkclc__pill.is-vis{opacity:1;transform:translateY(0) scale(1)}



/* -- Shimmer sweep -- */

.vkclc__pill::before{

  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;

  background:linear-gradient(90deg,transparent,rgba(170,255,0,.05),transparent);

  pointer-events:none;transition:left .6s ease;

}

.vkclc__pill:hover::before{left:100%}



/* -- Bottom glow line on hover -- */

.vkclc__pill::after{

  content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:1px;

  background:linear-gradient(90deg,transparent,var(--lime),transparent);

  opacity:0;transition:opacity .3s ease,left .3s ease,right .3s ease;

}

.vkclc__pill:hover::after{opacity:.5;left:10%;right:10%}



/* -- Hover state -- */

.vkclc__pill:hover{

  color:var(--w100);border-color:var(--lime20);

  background:linear-gradient(145deg,var(--lime08),var(--lime04));

  transform:translateY(-3px) scale(1);

  box-shadow:0 6px 24px rgba(170,255,0,.08),0 2px 8px rgba(0,0,0,.3);

}



/* -- Pill dot indicator -- */

.vkclc__pill-dot{

  width:4px;height:4px;border-radius:50%;flex-shrink:0;

  background:var(--g4);transition:all .3s ease;

}

.vkclc__pill:hover .vkclc__pill-dot{background:var(--lime);box-shadow:0 0 6px rgba(170,255,0,.5)}



/* -- Pill count badge -- */

.vkclc__count{

  font-size:9px;font-weight:800;color:var(--g3);

  background:var(--w04);border:1px solid var(--b2);

  padding:2px 8px;border-radius:100px;letter-spacing:.04em;

  transition:all .3s ease;

}

.vkclc__pill:hover .vkclc__count{

  color:var(--lime);background:var(--lime06);border-color:var(--lime12);

}



/* -- "All" pill variant -- */

.vkclc__pill--all{

  background:linear-gradient(145deg,var(--lime08),var(--lime04));

  border-color:var(--lime15);color:var(--lime);

}

.vkclc__pill--all .vkclc__pill-dot{background:var(--lime);box-shadow:0 0 6px rgba(170,255,0,.4)}

.vkclc__pill--all .vkclc__count{color:var(--lime);background:var(--lime06);border-color:var(--lime12)}

.vkclc__pill--all:hover{

  background:linear-gradient(145deg,var(--lime12),var(--lime08));

  border-color:var(--lime25);

  box-shadow:0 6px 24px rgba(170,255,0,.12),0 2px 8px rgba(0,0,0,.3);

}



/* =======================================

   REVEAL

   ======================================= */

.vkclc__rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}

.vkclc__rv.is-vis{opacity:1;transform:translateY(0)}

.vkclc__rv[data-d="1"]{transition-delay:.1s}

.vkclc__rv[data-d="2"]{transition-delay:.25s}



/* =======================================

   RESPONSIVE

   ======================================= */

@media(max-width:768px){

  .vkclc__inner{padding:28px 20px 32px}

  .vkclc__pill{padding:9px 18px;font-size:10px;letter-spacing:.05em;gap:8px}

  .vkclc__count{font-size:8px;padding:2px 6px}

  .vkclc__heading{font-size:18px}

  .vkclc__icon{width:28px;height:28px;border-radius:6px}

  .vkclc__icon svg{width:12px;height:12px}

  .vkclc__track::before,.vkclc__track::after{width:20px}

}

@media(max-width:480px){

  .vkclc__inner{padding:24px 16px 28px}

  .vkclc__pill{padding:8px 16px;font-size:9px}

  .vkclc__count{font-size:7px;padding:1px 5px}

  .vkclc__header{flex-wrap:wrap;gap:10px}

  .vkclc__heading{font-size:16px}

  .vkclc__progress{display:none}

}



/* -- Reduced motion -- */

@media(prefers-reduced-motion:reduce){

  .vkclc__rv{opacity:1 !important;transform:none !important;transition-duration:.01s !important;transition-delay:0s !important}

  .vkclc__pill{opacity:1 !important;transform:none !important;transition:none !important}

  .vkclc__pill::before{transition:none !important}

  .vkclc__arrow{transition:none !important}

  .vkclc__scroll{scroll-behavior:auto !important}

}