/* =========================
   SSX FINAL
========================= */

.ssx-card{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  margin: 0 0 14px;
  overflow: hidden;
  align-items: stretch;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ssx-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0,0,0,.10);
}

/* LEFT dark */
.ssx-side{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  border: 1px solid rgba(255,255,255,.08);
}

/* poster stretches */
.ssx-posterWrap{
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 18px 30px rgba(0,0,0,.25);
}
.ssx-posterLink{
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.ssx-posterImg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .22s ease, filter .22s ease;
}
.ssx-card:hover .ssx-posterImg{ transform: scale(1.05); }

.ssx-posterPh{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,.70);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
}

.ssx-sizeBadge{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 8;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #07210f;
  background: rgba(34,197,94,.95);
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}

/* rating spacing fix */
.ssx-rate{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.ssx-rateBtn{
  width: 100%;
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border-radius: 12px;
  min-height: 36px;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  cursor: pointer;
  user-select: none;
  line-height: 1;
  font-weight: 900;

  transition: transform .18s ease, filter .18s ease;
}
.ssx-rateBtn:active{ transform: scale(.98); }

.ssx-rateBtn--like{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.12);
}
.ssx-rateBtn--dislike{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.10);
}

.ssx-rateScore{
  min-width: 44px;
  text-align: center;
  padding: 7px 10px;
  border-radius: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}

/* RIGHT */
.ssx-main{
  position: relative;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 64px; /* rail space */
}

.ssx-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ssx-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}
.ssx-titleLink{
  color: #16a34a;
  text-decoration: none;
  transition: color .18s ease;
}
.ssx-card:hover .ssx-titleLink{
  color: #15803d;
  text-decoration: underline;
}

.ssx-fav{
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  align-items: center;
}

.ssx-favBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.82);
  transition: transform .18s ease;
}
.ssx-favBtn:hover{ transform: translateY(-1px); }

.ssx-favBtn--add{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.25);
  color: #166534;
}
.ssx-favBtn--del{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.25);
  color: #991b1b;
}

/* edit button */
.ssx-iconBtn{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.82);

  cursor: pointer;
  user-select: none;

  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ssx-iconBtn:hover{
  transform: translateY(-1px);
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.20);
  color: #1d4ed8;
}
.ssx-iconBtn--edit{
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.22);
  color: #92400e;
}
.ssx-iconBtn--edit:hover{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.30);
  color: #7c2d12;
}

.ssx-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: rgba(15,23,42,.72);
}
.ssx-sep{ opacity: .55; }

/* panels */
.ssx-panel,
.ssx-textPanel{
  padding: 12px 14px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.10);
}

.ssx-panelHead{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: rgba(15,23,42,.86);
}
.ssx-panelHead i{ color: rgba(37,99,235,.85); }

/* Upload tags block (same chips, just wrapper) */
.ssx-uploadTags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* Hide upload block completely if no tags at all */
.ssx-uploadTags:empty{
  display: none;
}

/* Icon inside chips (НЕ трогаем фон/рамку/текст чипса) */
.upload-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  vertical-align: middle;
  line-height: 1;
}
.upload-icoSvg{
  width: 14px;
  height: 14px;
  display: block;
}

/* Icon colors (разноцветные) */
.upload-ico--torrent{ color: #16a34a; }
.upload-ico--magnet{ color: #f59e0b; }
.upload-ico--tg{ color: #0ea5e9; }
.upload-ico--vk{ color: #2563eb; }
.upload-ico--max{ color: #111827; }
.upload-ico--cloud{ color: #1d4ed8; }
.upload-ico--folder{ color: #7c3aed; }
.upload-ico--link{ color: #10b981; }
.upload-ico--multi{ color: #a855f7; }
.upload-ico--disk{ color: #64748b; }
.upload-ico--play{ color: #06b6d4; }
.upload-ico--db{ color: #4f46e5; }
.upload-ico--zap{ color: #f59e0b; }
.upload-ico--upload{ color: #8b5cf6; }
.upload-ico--file{ color: #ef4444; }
.upload-ico--drop{ color: #38bdf8; }
.upload-ico--flame{ color: #ef4444; }
.upload-ico--server{ color: #334155; }

/* description */
.ssx-excerpt{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15,23,42,.86);
}
.ssx-moreInline{ color: #2563eb; text-decoration: none; }
.ssx-moreInline:hover{ text-decoration: underline; }

/* categories blocks */
.ssx-cats{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0;
}
.ssx-cats a{
  font-size: 12px;
  display: inline-block;
  padding: 7px 10px;
  border-radius: 10px;
  font-weight: 900;
  text-decoration: none;
  color: rgba(15,23,42,.88);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
}
.ssx-cats a:nth-of-type(6n+1){ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.22); }
.ssx-cats a:nth-of-type(6n+2){ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.22); }
.ssx-cats a:nth-of-type(6n+3){ background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.22); }
.ssx-cats a:nth-of-type(6n+4){ background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.22); }
.ssx-cats a:nth-of-type(6n+5){ background: rgba(14,165,233,.12); border-color: rgba(14,165,233,.22); }
.ssx-cats a:nth-of-type(6n+6){ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.22); }

/* upload chip base (как было) */
.ssx-uploadTags .upload-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.82);
}

/* upload colors (как было) */
.upload-tag--torrent{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.22); color: #166534; }
.upload-tag--tg-vip{ background: rgba(147,51,234,.12); border-color: rgba(147,51,234,.22); color: #6b21a8; }
.upload-tag--tg-boosty{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.22); color: #1d4ed8; }
.upload-tag--tg-free{ background: rgba(14,165,233,.12); border-color: rgba(14,165,233,.22); color: #075985; }
.upload-tag--vk{ background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.22); color: #1d4ed8; }
.upload-tag--max{ background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.14); color: rgba(15,23,42,.88); }
.upload-tag--yadisk{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.22); color: #991b1b; }
.upload-tag--mailcloud{ background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.22); color: #9a3412; }
.upload-tag--gdrive, .upload-tag--gdrive-folder{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.20); color: #166534; }
.upload-tag--onedrive{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.20); color: #1d4ed8; }
.upload-tag--mega{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.20); color: #991b1b; }
.upload-tag--terabox{ background: rgba(168,85,247,.10); border-color: rgba(168,85,247,.20); color: #6b21a8; }
.upload-tag--direct{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.20); color: #065f46; }
.upload-tag--magnet{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.22); color: #92400e; }
.upload-tag--multiup{ background: rgba(168,85,247,.10); border-color: rgba(168,85,247,.20); color: #6b21a8; }
.upload-tag--wdfiles{ background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.14); color: rgba(15,23,42,.88); }
.upload-tag--mixdrop{ background: rgba(14,165,233,.10); border-color: rgba(14,165,233,.20); color: #075985; }
.upload-tag--datanodes{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.20); color: #1d4ed8; }
.upload-tag--buzz{ background: rgba(249,115,22,.10); border-color: rgba(249,115,22,.20); color: #9a3412; }
.upload-tag--megaup{ background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.18); color: #166534; }
.upload-tag--mediafire{ background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.18); color: #1d4ed8; }
.upload-tag--1fichier{ background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.18); color: #991b1b; }
.upload-tag--pixeldrain{ background: rgba(14,165,233,.08); border-color: rgba(14,165,233,.18); color: #075985; }
.upload-tag--sendcm{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.20); color: #92400e; }
.upload-tag--modsfire{ background: rgba(168,85,247,.08); border-color: rgba(168,85,247,.18); color: #6b21a8; }
.upload-tag--kraken{ background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.14); color: rgba(15,23,42,.88); }
.upload-tag--workupload{ background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.18); color: #065f46; }
.upload-tag--clicknupload{ background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.18); color: #1d4ed8; }
.upload-tag--firefile{ background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.18); color: #991b1b; }
.upload-tag--empireg{ background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.14); color: rgba(15,23,42,.88); }

/* Right rail */
.ssx-moreRail{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #fff;

  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);

  border-left: 1px solid rgba(15,23,42,.10);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 12px 24px rgba(37,99,235,.18);

  border-radius: 0 16px 16px 0;
  transition: filter .18s ease;
}
.ssx-moreRail i{
  font-size: 18px;
  transition: transform .18s ease;
}
.ssx-moreRail:hover{ filter: brightness(1.06); }
.ssx-moreRail:hover i{ transform: translateX(2px); }
.ssx-moreRail:active{ filter: brightness(.98); }

/* 18+ overlay FIX */
.ssx-posterWrap .ssx-ageGate{
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  background: rgba(2,6,23,.78);
  backdrop-filter: blur(3px);
}
.ssx-posterWrap .ssx-ageBox{
  width: calc(100% - 18px);
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(15,23,42,.65);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 34px rgba(0,0,0,.35);
  text-align: center;
}
.ssx-posterWrap .ssx-ageBadge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-weight: 1000;
  font-size: 18px;
  line-height: 1;
}
.ssx-posterWrap .ssx-ageText{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,.92);
}
.ssx-posterWrap .ssx-ageBtns{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ssx-posterWrap .ssx-ageBtn{
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .02em;
  line-height: 1;
}
.ssx-posterWrap .ssx-ageBtn--yes{ background: #22c55e; color: #062312; }
.ssx-posterWrap .ssx-ageBtn--no{ background: #ef4444; color: #fff; }

/* adult state */
.ssx-card--adult .ssx-posterLink{ pointer-events: none; }
.ssx-card--adult .ssx-posterImg{ filter: blur(10px) brightness(.72); transform: scale(1.06); }
.ssx-card--adult .ssx-ageGate[aria-hidden="true"]{ display: none; }
.ssx-card--adult .ssx-ageGate[aria-hidden="true"] ~ .ssx-posterLink{ pointer-events: auto; }
.ssx-card--adult .ssx-ageGate[aria-hidden="true"] ~ .ssx-posterLink .ssx-posterImg{
  filter: none;
  transform: scale(1);
}

/* mobile */
@media (max-width: 720px){
  .ssx-card{ grid-template-columns: 1fr; }
  .ssx-main{ padding-right: 0; }

  .ssx-moreRail{
    position: static;
    width: 100%;
    height: 46px;
    border-left: 0;
    border-top: 1px solid rgba(15,23,42,.10);
    border-radius: 14px;
    margin-top: 6px;
  }

  .ssx-posterWrap{ min-height: 0; }
  .ssx-posterImg, .ssx-posterPh{ height: auto; aspect-ratio: 2 / 3; }
}