/* DESILEAKS - shared styles and utility classes. */

:root {
  --background: #000000;
  --foreground: #fafafa;
  --card: #1a1a1a;
  --muted: #333333;
  --muted-foreground: #a6a6a6;
  --primary: #ff0019;     /* HSL 358 100% 50% */
  --primary-foreground: #fafafa;
  --border: #333333;
  --secondary: #262626;
}

/* Tell the UA to render form controls (including <select> popups) in dark mode */
html { color-scheme: dark; }
select, select option, select optgroup {
  background: #1a1a1a;
  color: var(--foreground);
}

html, body {
  background: var(--background);
  color: var(--foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100%;
}

body { margin: 0; }

*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img, video, iframe { max-width: 100%; display: block; }
.hidden { display: none !important; }
.block { display: block; } .inline-block { display: inline-block; }
.relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; }
.top-0 { top: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .bottom-1 { bottom: .25rem; } .right-1 { right: .25rem; }
.z-40 { z-index: 40; }
.mx-auto { margin-left: auto; margin-right: auto; } .mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mb-0\.5{margin-bottom:.125rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}
.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-20{padding-top:5rem;padding-bottom:5rem}.pt-4{padding-top:1rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}
.flex { display: flex; } .grid { display: grid; } .flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.container{width:100%;max-width:1200px}.max-w-md{max-width:28rem}.max-w-2xl{max-width:42rem}.max-w-7xl{max-width:80rem}.min-h-screen{min-height:100vh}.min-w-max{min-width:max-content}.w-full{width:100%}.w-16{width:4rem}.w-20{width:5rem}.w-1\/2{width:50%}.w-3\/4{width:75%}.h-full{height:100%}.h-3{height:.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-20{height:5rem}
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.object-cover{object-fit:cover}.object-contain{object-fit:contain}.text-center{text-align:center}.whitespace-nowrap{white-space:nowrap}.border{border:1px solid var(--border)}.border-b{border-bottom:1px solid var(--border)}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.bg-black{background:#000}
.text-\[10px\]{font-size:10px}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.leading-tight{line-height:1.2}.text-white{color:#fff}.text-gray-200{color:#e5e7eb}.backdrop-blur-sm{backdrop-filter:blur(6px)}

@media (max-width: 639px) {
  .hero-window {
    height: auto;
  }

  .hero-track {
    height: auto;
  }

  .hero-card {
    flex: 0 0 82vw;
  }

  .hero-card-shade {
    padding: 1rem;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.95),
      rgba(0,0,0,.7),
      transparent
    );
  }
}
@media (min-width: 640px) { .sm\:flex-row{flex-direction:row}.sm\:gap-3{gap:.75rem}.sm\:p-3{padding:.75rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-4{padding-top:1rem;padding-bottom:1rem}.sm\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.sm\:py-8{padding-top:2rem;padding-bottom:2rem}.sm\:text-xs{font-size:.75rem}.sm\:text-sm{font-size:.875rem}.sm\:text-xl{font-size:1.25rem}.sm\:text-2xl{font-size:1.5rem}.sm\:w-20{width:5rem}.sm\:h-9{height:2.25rem}.sm\:h-20{height:5rem}.sm\:bottom-2{bottom:.5rem}.sm\:right-2{right:.5rem} }
@media (min-width: 768px) { .md\:block{display:block!important}.md\:hidden{display:none!important}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:gap-4{gap:1rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.md\:h-10{height:2.5rem}.md\:text-2xl{font-size:1.5rem}.md\:text-3xl{font-size:1.875rem} }
@media (min-width: 1024px) {

  .lg\:block{
    display:block !important;
  }

  .lg\:container{
    width:100%;
    max-width:1200px;
  }

  .lg\:mx-auto{
    margin-left:auto;
    margin-right:auto;
  }

  .lg\:grid-cols-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .lg\:col-span-2{
    grid-column:span 2 / span 2;
  }

  .lg\:px-12{
    padding-left:3rem;
    padding-right:3rem;
  }

  .lg\:text-lg{
    font-size:1.125rem;
  }

  .lg\:text-6xl{
    font-size:3.75rem;
  }

}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.btn-primary {
  background: var(--primary); color: var(--primary-foreground);
  padding: .5rem 1rem; border-radius: .5rem; font-weight: 600; cursor: pointer;
  border: none; transition: opacity .15s;
}
.btn-primary:hover { opacity: .9; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost {
  background: transparent; color: var(--foreground); padding: .5rem;
  border-radius: .5rem; cursor: pointer; border: none;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); }

.btn-outline {
  background: transparent; color: var(--foreground); padding: .5rem 1rem;
  border-radius: .5rem; cursor: pointer; border: 1px solid var(--border);
}
.btn-outline:hover { background: rgba(255,255,255,.05); }

.input {
  width: 100%; background: rgba(255,255,255,.05);
  border: 1px solid var(--border); color: var(--foreground);
  padding: .55rem .75rem; border-radius: .5rem; outline: none;
}
.input:focus { border-color: var(--primary); }

.card-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: .75rem; padding: 1.5rem;
}

.skeleton {
  background: linear-gradient(90deg, #1a1a1a 25%, #262626 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: skel 1.4s infinite;
  border-radius: .375rem;
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Toast */
#toast-root {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 100;
  display: flex; flex-direction: column; gap: .5rem; max-width: 360px;
}
.toast {
  background: var(--card); border: 1px solid var(--border);
  border-radius: .5rem; padding: .75rem 1rem; color: var(--foreground);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: toast-in .2s ease-out;
}
.toast.error { border-color: #ef4444; }
.toast .t-title { font-weight: 600; margin-bottom: .15rem; }
.toast .t-desc { font-size: .85rem; color: var(--muted-foreground); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Aspect ratio helpers */
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-34 { aspect-ratio: 3 / 4; }
.aspect-cinema { aspect-ratio: 2.35 / 1; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center; z-index: 80;
  padding: 1rem;
}
.modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: .75rem; padding: 1.25rem; max-width: 640px; width: 100%;
  max-height: 90vh; overflow: auto;
}

/* Hero carousel */
.carousel, .hero-window { position: relative; overflow: hidden; }
.carousel-track, .hero-track {
  display: flex; transition: transform .5s ease;
}
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15); color: white; border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px); width: 3rem; height: 3rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5;
}
.carousel-btn.prev { left: 1rem; }
.carousel-btn.next { right: 1rem; }

.video-card { cursor: pointer; transition: transform .2s; }
.video-card:hover { transform: scale(1.04); z-index: 5; }
.video-card img { transition: transform .3s; }
.video-card:hover img { transform: scale(1.06); }

/* Compact navbar */
.site-nav svg { width: 18px; height: 18px; }
.nav-inner { padding: .42rem .65rem; }
.nav-brand-gap, .nav-actions { gap: .35rem; }
.nav-logo { width: 24px; height: 24px; }
.nav-title { font-size: .95rem; letter-spacing: 0; }
.site-nav .btn-ghost { padding: .38rem; border-radius: .4rem; }
.site-nav .input { padding: .42rem .6rem; }

/* Sticky navbar offset utility */
.page { padding-top: 3.25rem; }

/* Latest uploads hero */
.hero-loop {
  height: auto;
  min-height: auto;
  padding: .5rem 0 .75rem;
  display:flex;
  align-items:stretch;
}
.hero-window { width:100%; height:100%; }
.hero-track { height:100%; gap: .65rem; will-change: transform; align-items:stretch; }
.hero-card {
  flex: 0 0 78vw;
  height:auto;
  aspect-ratio: 3 / 4;
  position:relative;
  overflow:hidden;
  border-radius: .85rem;
  background:var(--card);
  box-shadow: 0 14px 38px rgba(0,0,0,.55);
}
.hero-card-shade { position:absolute; inset:auto 0 0; padding:.75rem; background:linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0)); }
.hero-card-shade span {
  color:#22c55e;
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
}
.hero-card-shade h2 {
  margin:.2rem 0 0;
  font-size:1.35rem;
  font-weight:800;
  line-height:1.15;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.section-tabs { gap: .45rem; min-width: 0; }
.section-tabs a, .section-tabs span { font-size: .78rem; line-height: 1; padding: .38rem .55rem; white-space: nowrap; }
.home-sort { max-width: 6.8rem; padding: .45rem .5rem; font-size: .78rem; }
.empty-state { min-height: 8rem; display:flex; align-items:center; justify-content:center; color:var(--muted-foreground); }

/* Watch page header */
.watch-header { margin-top: 1.1rem; }
.watch-title { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; }
.watch-meta { margin-top: .55rem; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .7rem; font-size: .82rem; color: var(--muted-foreground); }
.watch-dot { opacity: .55; }
.watch-cat { margin-left: auto; padding: .3rem .75rem; border-radius: 9999px; background: rgba(255,0,25,.18); color: var(--primary); font-weight: 600; font-size: .78rem; }
.watch-cat:hover { background: rgba(255,0,25,.28); }
.watch-desc { margin: .9rem 0 0; color: var(--muted-foreground); font-size: .92rem; line-height: 1.55; white-space: pre-wrap; }
@media (min-width: 640px) { .watch-title { font-size: 1.55rem; } .watch-meta { font-size: .9rem; } }
@media (min-width: 1024px) { .watch-title { font-size: 1.75rem; } }

.watch-cat-inline {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.watch-cat-inline:hover {
  opacity: .85;
}

@media (min-width: 640px) {
  .nav-inner { padding: .5rem 1rem; }
  .nav-logo { width: 28px; height: 28px; }
  .nav-title { font-size: 1.15rem; }
  .nav-actions { gap: .5rem; }
  .page { padding-top: 3.75rem; }
  .hero-loop { height: calc(100svh - 3.75rem); min-height: 28rem; padding: .75rem 0 1rem; }
  .hero-card { height:100%; aspect-ratio: 16 / 10; }
  .section-tabs { gap: .75rem; }
  .section-tabs a, .section-tabs span { font-size: 1.25rem; padding: .25rem .75rem; }
  .home-sort { max-width: none; font-size: 1rem; }
}

@media (min-width: 1024px) {
  .hero-card {
    height: 100%;
    aspect-ratio: 16 / 9;
  }

  .hero-card-shade {
    padding: 1.5rem;
  }

  .hero-card-shade span {
    font-size: 1rem;
  }

  .hero-card-shade h2 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
  }
}

/* MOBILE */

.mobile-download-btn{
  width:100%;
  padding:16px;
  border:none;
  border-radius:14px;
  font-weight:800;
  font-size:16px;
  color:#fff;
  cursor:pointer;

  background:linear-gradient(
    135deg,
    #ff0080,
    #ff2d55,
    #b300ff
  );

  margin-top:20px;
}

.download-links{
  margin-top:15px;
}

.download-links .download-box{
  display:block;
  width:100%;
  text-align:center;

  padding:18px;
  margin-bottom:12px;

  color:#fff;
  font-weight:700;

  border-radius:14px;

  background:linear-gradient(
    135deg,
    #ff0080,
    #ff2d55,
    #b300ff
  );
}

/* DESKTOP */

.desktop-download-panel{
  width:130px;
  margin:0 auto;
}

.desktop-download-title{
  text-align:center;
  color:#fff;
  font-size:22px;
  font-weight:800;

  margin-bottom:15px;
}

.desktop-download-box{
  display:block;

  width:130px;
  text-align:center;

  padding:12px 8px;
  font-size:13px;
  margin-bottom:12px;

  color:#fff;
  font-weight:700;

  border-radius:14px;

  background:linear-gradient(
    135deg,
    #ff0080,
    #ff2d55,
    #b300ff
  );

  box-shadow:
    0 10px 25px rgba(255,0,128,.25);
}

.desktop-download-box:hover{
  transform:translateY(-2px);
}

/* Hide mobile button on desktop */

@media (min-width:1024px){

  .mobile-download-wrap{
    display:none;
  }

  .desktop-download-panel{
    display:block;
  }
}

/* Hide desktop panel on mobile */

@media (max-width:1023px){

  .desktop-download-panel{
    display:none;
  }
}

.desktop-top-ad{
  display:none;
}

@media (min-width:1024px){

  .desktop-top-ad{
    display:flex;
    justify-content:center;
    margin-bottom:20px;
  }

}

.mobile-top-ad{
  display:flex;
  justify-content:center;
  margin-bottom:15px;
}

@media (min-width:1024px){

  .mobile-top-ad{
    display:none;
  }

}