/* Scoped theater UI: no global typography, tabs, player, or grid overrides. */
#appPanel #worksView #theaterPanel {
  padding: 0; border: 0; border-radius: 20px;
  background: #F4F5F9; color: #14151C; overflow: hidden;
  width: 100%; min-width: 0; max-width: 100%;
}
#theaterApp { width: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; }
#theaterApp { --theater-gold: #C7A855; --theater-navy: #0B0F1A; padding-bottom: 24px; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.5; }
#theaterApp p, #theaterApp small, #theaterApp em { line-height: 1.5; text-decoration: none; text-shadow: none; }
#theaterApp *, #theaterApp *::before, #theaterApp *::after { box-sizing: border-box; }
#theaterApp button {
  appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 0;
  background: transparent; color: inherit; -webkit-text-fill-color: currentColor;
  font: inherit; text-align: left; cursor: pointer; box-shadow: none; min-width: 0;
}
#theaterApp button:focus-visible { outline: 2px solid #C7A855; outline-offset: 3px; }
#theaterApp button:disabled { cursor: not-allowed; opacity: .65; }
#theaterApp h2, #theaterApp h3, #theaterApp p { margin: 0; }
#theaterApp .theater-page-head { display: flex; align-items: center; padding: 20px 16px; background: #0B0F1A; color: #fff; }
#theaterApp .theater-page-head > div { flex: 1; min-width: 0; margin: 0 12px; }
#theaterApp .theater-page-head small { font-size: 9px; letter-spacing: .14em; color: #DCC585; }
#theaterApp .theater-page-head h2 { font-size: 20px; line-height: 1.5; color: #fff; }
#theaterApp .theater-page-head p { font-size: 10px; line-height: 1.6; color: #A2A5B8; }
#theaterApp .theater-icon-button, #theaterApp .theater-head-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255,255,255,.08); color: #DCC585; font-size: 25px;
}
#theaterApp .theater-head-mark { font: 700 21px Georgia,serif; border: 1px solid rgba(199,168,85,.4); }
#theaterApp .theater-subnav { display: flex; padding: 14px 16px 6px; }
#theaterApp .theater-subnav button { margin-right: 10px; padding: 8px 18px; border: 1px solid #E8E9F1; border-radius: 22px; background: #fff; font-size: 13px; }
#theaterApp .theater-subnav button.active { color: #DCC585; background: #0B0F1A; border-color: #0B0F1A; }
#theaterApp .theater-feature { position: relative; display: block; width: calc(100% - 32px); height: 235px; margin: 16px; border-radius: 18px; overflow: hidden; color: #fff; }
#theaterApp .theater-feature .theater-poster { width: 100%; height: 100%; border-radius: 0; }
#theaterApp .theater-feature .theater-poster-copy { display: none; }
#theaterApp .theater-feature-copy { position: absolute; left: 18px; right: 18px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; z-index: 2; }
#theaterApp .theater-feature-copy small { color: #DCC585; font-size: 11px; letter-spacing: .1em; }
#theaterApp .theater-feature-copy strong { font: 700 24px/1.5 "Noto Serif SC", "Songti SC", SimSun,serif; max-width: 100%; white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#theaterApp .theater-feature-copy > span { font-size: 11px; color: #ddd8ec; margin-bottom: 10px; }
#theaterApp .theater-feature-copy b { background: #C7A855; color: #0B0F1A; border-radius: 18px; padding: 7px 14px; font-size: 12px; }
#theaterApp .theater-portals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 16px; }
#theaterApp .theater-portals button { position: relative; display: flex; flex-direction: column; padding: 14px; border-radius: 14px; background: #141A2B; color: #fff; }
#theaterApp .theater-portals button > span { color: #C7A855; font: 15px Georgia,serif; margin-bottom: 6px; }
#theaterApp .theater-portals strong { font-size: 15px; }
#theaterApp .theater-portals small { font-size: 10px; color: #aaa5bb; margin-top: 4px; }
#theaterApp .theater-portals i { position: absolute; right: 12px; top: 15px; color: #DCC585; font-size: 22px; }
#theaterApp .theater-section-title { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 12px; }
#theaterApp .theater-section-title h3 { color: #14151C; font-size: 16px; }
#theaterApp .theater-section-title span, #theaterApp .theater-section-title button { color: #6D7086; font-size: 11px; }
#theaterApp .theater-horizontal { display: flex; width: 100%; min-width: 0; overflow-x: auto; padding: 0 16px 10px; -webkit-overflow-scrolling: touch; }
#theaterApp .theater-horizontal > button { flex: 0 0 112px; margin-right: 12px; }
#theaterApp .theater-work-card { display: block; width: 100%; }
#theaterApp .theater-poster { position: relative; display: block; width: 100%; height: 155px; border-radius: 13px; overflow: hidden; background: linear-gradient(165deg,#241B45,#5A3D8C); color: #fff; }
#theaterApp .genre-cool { background: linear-gradient(165deg,#2B3363,#4B3A78); }
#theaterApp .genre-warm { background: linear-gradient(165deg,#4A2E28,#8B5A2E); }
#theaterApp .genre-teal { background: linear-gradient(165deg,#123230,#1F5C52); }
#theaterApp .genre-rose { background: linear-gradient(165deg,#3B2440,#8C4B72); }
#theaterApp .genre-family { background: linear-gradient(165deg,#453144,#947252); }
#theaterApp .genre-travel { background: linear-gradient(165deg,#14353e,#437578); }
#theaterApp .theater-poster img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#theaterApp .theater-poster::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg,rgba(11,15,26,0) 25%,rgba(11,15,26,.8)); }
#theaterApp .theater-poster-copy { position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 1; }
#theaterApp .theater-poster-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 14px/1.5 "Noto Serif SC","Songti SC",SimSun,serif; }
#theaterApp .theater-poster-copy small { display: block; font-size: 10px; color: #DCC585; }
#theaterApp .theater-card-copy { display: block; margin-top: 7px; }
#theaterApp .theater-card-copy strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#theaterApp .theater-card-copy small { display: block; color: #6D7086; font-size: 10px; margin-top: 3px; }
#theaterApp .theater-top-three { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: 10px; padding: 25px 16px 0; }
#theaterApp .theater-top-three > button { position: relative; text-align: center; }
#theaterApp .theater-top-three .rank-1 { grid-column: 2; grid-row: 1; }
#theaterApp .theater-top-three .rank-2 { grid-column: 1; grid-row: 1; }
#theaterApp .theater-top-three .rank-3 { grid-column: 3; grid-row: 1; }
#theaterApp .theater-top-three i { position: absolute; top: 7px; left: 7px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 50%; background: #141A2B; color: #DCC585; font: 700 13px Georgia,serif; }
#theaterApp .theater-top-three .rank-1 i { background: #C7A855; color: #0B0F1A; }
#theaterApp .theater-top-three .rank-poster { height: 150px; }
#theaterApp .theater-top-three .rank-1 .rank-poster { height: 185px; }
#theaterApp .theater-top-three > button > strong { display: block; font-size: 12px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#theaterApp .theater-top-three > button > small { font-size: 10px; color: #B8632E; }
#theaterApp .theater-rank-list > button, #theaterApp .theater-follow-list > button { display: flex; align-items: center; width: 100%; padding: 12px 16px; border-bottom: 1px solid #E8E9F1; }
#theaterApp .theater-rank-list > button > b { flex: 0 0 24px; color: #6D7086; font: 700 20px Georgia,serif; }
#theaterApp .theater-rank-list .rank-thumb { flex: 0 0 48px; height: 66px; margin: 0 10px; border-radius: 8px; }
#theaterApp .rank-thumb .theater-poster-copy, #theaterApp .follow-thumb .theater-poster-copy { display: none; }
#theaterApp .theater-rank-list > button > span:not(.theater-poster), #theaterApp .theater-follow-list > button > span:not(.theater-poster) { flex: 1; min-width: 0; }
#theaterApp .theater-rank-list strong, #theaterApp .theater-follow-list strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#theaterApp .theater-rank-list small, #theaterApp .theater-follow-list small { display: block; color: #6D7086; font-size: 10px; margin-top: 5px; }
#theaterApp .theater-rank-list em { margin-left: 8px; padding: 4px 7px; border-radius: 8px; background: #FBEDE3; color: #B8632E; font-size: 10px; font-style: normal; }
#theaterApp .theater-category-layout { display: flex; margin-top: 12px; }
#theaterApp .theater-category-rail { flex: 0 0 70px; background: #EEEFF6; }
#theaterApp .theater-category-rail button { display: block; width: 100%; min-height: 52px; text-align: center; border-left: 3px solid transparent; color: #6D7086; }
#theaterApp .theater-category-rail strong { font-size: 12px; }
#theaterApp .theater-category-rail small { margin-left: 4px; font-size: 9px; }
#theaterApp .theater-category-rail button.active { background: #F4F5F9; border-color: #C7A855; color: #14151C; }
#theaterApp .theater-category-main { flex: 1; min-width: 0; padding: 8px 12px 20px; }
#theaterApp .theater-category-copy h3 { font-size: 16px; color: #14151C; }
#theaterApp .theater-category-copy p { color: #6D7086; font-size: 11px; margin: 4px 0 14px; }
#theaterApp .theater-poster-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 10px; }
#theaterApp .theater-detail-hero { position: relative; height: 280px; display: flex; align-items: flex-end; padding: 22px 20px; color: #fff; overflow: hidden; }
#theaterApp .theater-detail-hero > img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; opacity: .65; }
#theaterApp .theater-detail-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent,#141A2B); }
#theaterApp .theater-detail-hero > div { position: relative; z-index: 1; }
#theaterApp .theater-detail-hero > button { position: absolute; top: 16px; left: 16px; z-index: 2; }
#theaterApp .theater-detail-hero h2 { font: 700 26px/1.4 "Noto Serif SC","Songti SC",SimSun,serif; color: #fff; margin: 8px 0; }
#theaterApp .theater-detail-hero small { font-size: 10px; color: #DCC585; }
#theaterApp .theater-detail-hero p { font-size: 12px; color: #d8d4e2; }
#theaterApp .theater-detail-actions { display: flex; padding: 16px; }
#theaterApp .theater-play-button { flex: 1; display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 23px; color: #fff; background: linear-gradient(90deg,#493B7C,#7460AA); font-size: 14px; font-weight: 700; }
#theaterApp .theater-play-button > span { margin-right: 8px; }
#theaterApp .theater-follow-button { flex: 0 0 78px; margin-left: 10px; border: 1px solid #E8E9F1; border-radius: 23px; text-align: center; background: #fff; color: #493B7C; font-size: 18px; }
#theaterApp .theater-follow-button > span { font-size: 12px; margin-left: 4px; }
#theaterApp .theater-follow-button.active { color: #755f23; background: #f7eed7; border-color: #DCC585; }
#theaterApp .theater-synopsis { padding: 0 20px; font-size: 13px; line-height: 1.7; color: #6D7086; overflow-wrap: break-word; }
#theaterApp .theater-episode-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; padding: 0 16px 20px; }
#theaterApp .theater-episode-grid button { height: 44px; border: 1px solid #E8E9F1; border-radius: 10px; text-align: center; background: #fff; color: #6D7086; font-size: 12px; }
#theaterApp .theater-episode-grid button.current { background: #0B0F1A; color: #DCC585; border-color: #0B0F1A; }
#theaterApp .theater-episode-grid button.watched { background: #EEEFF6; color: #A2A5B8; }
#theaterApp .theater-episode-grid button.locked { background: #F7F7FB; color: #A2A5B8; font-size: 10px; }
#theaterApp .theater-resume { display: flex; align-items: center; width: calc(100% - 32px); margin: 8px 16px; padding: 14px; border-radius: 18px; color: #fff; background: #0B0F1A; }
#theaterApp .theater-resume > span { color: #C7A855; margin-right: 12px; }
#theaterApp .theater-resume > strong { font-size: 12px; }
#theaterApp .theater-resume > small { flex: 1; text-align: right; font-size: 10px; color: #A2A5B8; }
#theaterApp .theater-resume > i { margin-left: 10px; }
#theaterApp .theater-follow-list .follow-thumb { flex: 0 0 60px; height: 80px; margin-right: 12px; }
#theaterApp .theater-follow-list em { margin-left: 10px; padding: 8px 10px; border-radius: 16px; background: #0B0F1A; color: #fff; font-size: 11px; font-style: normal; }
#theaterApp .theater-progress, #theaterApp .theater-follow-list i { display: block; height: 4px; border-radius: 2px; background: #E8E9F1; overflow: hidden; margin-top: 8px; }
#theaterApp .theater-progress i, #theaterApp .theater-follow-list i b { display: block; height: 100%; background: linear-gradient(90deg,#493B7C,#C7A855); }
#theaterApp .theater-empty { text-align: center; padding: 46px 20px; color: #6D7086; }
#theaterApp .theater-empty > span { display: block; color: #C7A855; font-size: 36px; margin-bottom: 12px; }
#theaterApp .theater-empty strong { display: block; font-size: 16px; color: #14151C; }
#theaterApp .theater-empty p { margin-top: 9px; font-size: 12px; line-height: 1.8; }
@media(min-width:700px) {
  #theaterApp .theater-feature { height: 300px; }
  #theaterApp .theater-poster-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #theaterApp .theater-category-rail { flex-basis: 92px; }
  #theaterApp .theater-top-three { max-width: 580px; margin: auto; }
  #theaterApp .theater-detail-hero { height: 340px; }
}
@media(max-width:350px) {
  #theaterApp .theater-category-rail { flex-basis: 58px; }
  #theaterApp .theater-category-main { padding-left: 8px; padding-right: 8px; }
  #theaterApp .theater-episode-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}