#worksView.theater-mode {
  background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 62%);
}

#worksView .theater-panel {
  display: grid;
  gap: 14px;
  padding: 6px 0 18px;
}

#worksView .theater-hero {
  position: relative;
  min-height: 178px;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: 22px 18px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 213, 118, 0.30), transparent 28%),
    linear-gradient(140deg, #161f3e 0%, #293b73 58%, #745a7f 100%);
  color: #fff;
  box-shadow: 0 18px 40px rgba(29, 42, 82, 0.24);
}

#worksView .theater-hero::after {
  content: "▶";
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.90);
  font-size: 15px;
  backdrop-filter: blur(10px);
}

#worksView .theater-hero > span { color: #f4d58d; font-size: 9px; letter-spacing: 0.18em; }
#worksView .theater-hero h2 { margin: 0; color: #fff; font-size: 26px; font-weight: 790; }
#worksView .theater-hero p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 11px; }

#worksView .theater-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#worksView .theater-preview-grid article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(207, 219, 237, 0.88);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 9px 24px rgba(31, 58, 98, 0.07);
}

#worksView .theater-preview-grid article > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: #eceefe;
  color: #5969bd;
  font-size: 13px;
  font-weight: 780;
}

#worksView .theater-preview-grid strong { color: #25344b; font-size: 13px; }
#worksView .theater-preview-grid small { color: #8490a2; font-size: 9px; line-height: 1.35; }

#worksView .theater-coming {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 24px 16px;
  border: 1px dashed rgba(125, 143, 171, 0.38);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  text-align: center;
}

#worksView .theater-coming strong { color: #35455b; font-size: 14px; }
#worksView .theater-coming small { color: #8b96a6; font-size: 10px; }

html.theme-dark #worksView.theater-mode { background: #090a0b; }
html.theme-dark #worksView .theater-preview-grid article,
html.theme-dark #worksView .theater-coming { border-color: rgba(217, 169, 87, 0.17); background: rgba(22, 22, 21, 0.96); box-shadow: none; }
html.theme-dark #worksView .theater-preview-grid strong,
html.theme-dark #worksView .theater-coming strong { color: #f0eadf !important; }
html.theme-dark #worksView .theater-preview-grid small,
html.theme-dark #worksView .theater-coming small { color: #9f9685 !important; }