/* Verified against dushe04.com common/template/layout.css, 2026-09-24.
   Keep the archived demo intact; correct its approximations for the product. */
:root { --yellow: #ffd000; --ink: #393e41; font-family: "PingFang SC", HarmonyOS_Regular, "Helvetica Neue", "Microsoft YaHei", sans-serif; color: var(--ink); }
.menu a, .top-actions .history { font-size: 14px; }
.menu a { color: var(--ink); }
.sidebar .menu a { border-radius: 8px; justify-content: normal; }
.sidebar .menu a:hover { background: rgba(255,214,119,.2); color: var(--ink); }
.sidebar .menu a.active, .sidebar .menu a.active:hover { background: var(--yellow); color: var(--ink); }
.sidebar .menu-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.topbar { background: #fff; }
.mobile-top-links { overflow-x: auto; scrollbar-width: none; }
.mobile-top-links a { flex-shrink: 0; }
.mobile-top-links::-webkit-scrollbar { display: none; }
.topbar > .history-pop-open { top: 58px; right: 16px; max-width: calc(var(--viewport-width, 100vw) - 32px); }
.hero-slide .hero-backdrop { filter: none; transform: none; object-position: center; }
.hero-copy h1 { font-size: 20px; line-height: 21px; }
.hero-copy p { font-size: 14px; line-height: 21px; }
.poster-card h3 { font-size: 14px; font-weight: 400; }
.poster { background: azure; }
.poster img { width: 100%; object-fit: cover; transition: all .5s; }
.poster-card:hover img { transform: none; }
.poster:hover img { transform: scale(1.1); }
.poster-card:hover .poster { box-shadow: 0 0 8px #999; }
.poster .score { height: 24px; line-height: 24px; padding: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-bottom-right-radius: 4px; background: #41ac52; color: #fff; font-size: 12px; }
.poster .quality { height: 24px; line-height: 24px; padding: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font-size: 12px; color: #fff; background: linear-gradient(rgba(0,0,0,0),rgba(18,18,18,.5019607843)); }
.poster .score > span, .poster .quality > span { display: inline-block; margin: 0 8px; }
/* Original layout.css search-bar/search-rec, including its inset panel. */
.topbar .search { flex: 1; width: auto; }
.topbar .search form { position: relative; overflow: visible; width: calc(100% - 16px); max-width: 560px; border-radius: 8px; background: #f5f5f5; }
.topbar .search form:hover { background: #ebebeb; }
.topbar .search input { margin-left: 12px; padding: 1px 2px; font-size: 14px; color: var(--ink); }
.topbar .search button { width: 40px; height: 40px; padding: 0; flex-shrink: 0; }
.search .search-panel, .mobile-search-block .search-panel { display: block; padding: 0; border: 0; border-radius: 4px; background: #f5f5f5; box-shadow: 0 0 64px rgba(255,255,255,.062745098); z-index: 70; }
.topbar .search-panel { top: 38px; left: 16px; right: 16px; }
.search-rec-content { margin: 16px; }
.search-rec-content h5 { margin: 0; font-size: 13.28px; font-weight: 700; line-height: normal; }
.search-tag { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.search-tag a { display: inline-block; height: 32px; line-height: 32px; padding: 0 16px; border-radius: 4px; color: #fff; background: #1d1c1e; font-size: 14px; }
.search-empty { margin: 16px 0 0; font-size: 14px; }
.mobile-search-block { position: relative; }
.mobile-search-block .search-panel { top: 116px; left: 0; right: 0; padding: 1px; text-align: left; }
.mobile-search-block .search-tag a { color: var(--ink); }
.section-head h2, .channel-section h2 { color: #333; }
.channel-tabs { gap: 16px; margin: 14px 0 28px; padding-top: 0; }
.channel-tabs a { position: relative; padding: 16px 0 8px; }
.channel-tabs a, .channel-tabs a:last-child { color: #666; }
.channel-tabs a.active { border: 0; color: var(--ink); }
.channel-tabs a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px; background: var(--yellow); }
.channel-section { margin: 28px 0; }
.channel-section h2 { margin: 0 0 16px; line-height: 32px; }
.detail-title, .watch-side h1 { font-size: 24px; line-height: 36px; font-weight: 600; }
.detail-content .description { font-size: 14px; line-height: 21px; height: auto; max-height: none; color: var(--ink); }
.detail-content .detail-card, .detail-content .detail-card:has(.tag:nth-child(5)) { height: auto; min-height: 0; }
.detail-content .detail-main-panel { height: auto; padding: 16px; background: rgba(0,0,0,.05); }
.detail-content .detail-poster { height: auto; border-radius: 8px; }
.detail-content .detail-poster img { height: auto; }
.detail-content .meta-row { height: auto; min-height: 24px; line-height: 21px; }
.detail-content .meta-row b { font-weight: 400; }
.detail-content .review-icons { gap: 10px; }
.detail-view .tags .tag:hover { color: var(--ink); background: var(--yellow); }
.detail-content .controls { height: auto; min-height: 57px; flex-wrap: wrap; }
.detail-content .primary, .detail-content .dark-btn { width: 108px; height: 40px; padding: 0; border-radius: 4px; font-size: 14px; }
.detail-content .primary { color: var(--ink); }
.detail-content .slogan { font-size: 14px; color: #666; }
.detail-content .detail-card ~ .section { height: auto; min-height: 0; }
.detail-content .detail-card ~ .section .poster-grid,
.play-view .watch ~ .section .poster-grid { height: auto; grid-template-rows: none; }
.detail-content .detail-card ~ .section .poster-card,
.play-view .watch ~ .section .poster-card { height: auto; }
.detail-content .source-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.detail-content .source { min-width: 128px; }
.source, .watch-side .source { border-radius: 8px; padding: 16px; min-width: 96px; height: auto; min-height: 68px; background: #393a43; color: #ebebeb; }
.source strong, .watch-side .source strong { font-size: 14px; }
.source small, .watch-side .source small { font-size: 10.96px; color: #adb7be; }
.source.active { background: var(--yellow); color: var(--ink); }
.source.active small { color: #9a1f1f; }
.source i { padding: 4px 6px; line-height: 10px; font-weight: 700; border-radius: 0 8px 0 8px; }
.source.active i { background: linear-gradient(to bottom,#ff9900,#ff6600); }
.detail-content .episodes { gap: 12px; }
.detail-content .episode { padding: 0 16px; height: 40px; line-height: 40px; font-size: 14px; background: rgba(0,0,0,.05); }
.watch-side { height: 100%; min-height: 0; overflow: auto; }
.watch-side .source-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; max-height: none; }
.watch-side .source { min-width: 0; padding: 12px; }
.watch-side .section-head h2 { font-size: 16px; font-weight: 600; }
.watch-side .section-head h2 { color: #fff; }
.watch-side .watch-episodes { margin-top: 16px; }
.watch-side .tags-line, .watch-tools button { font-size: 14px; }
.watch-side .episode-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); max-height: none; gap: 8px; }
.watch-side .episode-grid a { display: grid; place-items: center; min-width: 56px; height: 40px; padding: 0 16px; font-size: 12px; background: #393a43; color: #ebebeb; }
.watch-side .episode-grid a.active { background: var(--yellow); color: var(--ink); }
.catalog-results .channel-title h1 { font-size: 20px; }
.channel-filter a, .pager a, .pager span { font-size: 14px; }
.pager { align-items: center; flex-wrap: wrap; gap: 16px; margin: var(--section-space) 0; }
.pager a, .pager span, .channel-filter a { height: 32px; line-height: 32px; padding: 0 16px; background: rgba(0,0,0,.05); color: #666; }
.pager a:hover, .channel-filter a:hover { background: rgba(255,214,119,.2); color: #333; }
.pager .active, .channel-filter a.active, .channel-filter a.active:hover { background: var(--yellow); color: var(--ink); }
.channel-filter { gap: 12px; margin: var(--section-space) 0; }
.search-result-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.search-result-item { display: block; min-width: 0; color: var(--ink); }
.search-result-item-header { display: flex; justify-content: flex-end; height: 32px; line-height: 32px; font-size: 14px; color: #666; }
.search-result-item-ctn { display: flex; gap: 16px; align-items: center; background: #f5f5f5; border-radius: 4px; }
/* Original template.css declares 25% in early media rules, then overrides
   every breakpoint with 115px in its later base rule. Preserve that cascade. */
.search-result-item-side { flex-shrink: 0; width: 115px; height: 163.1296296296px; margin: -32px 0 16px 16px; }
.search-result-item-pic { width: 100%; height: 100%; border-radius: 4px; overflow: hidden; background: #cecece; }
.search-result-item-pic img { display: block; padding: 0; margin: 0; width: 100%; height: 100%; object-fit: cover; background: #1d1c1e; }
.search-result-item-main { flex: 1; min-width: 0; margin-right: 16px; font-size: 12px; line-height: 18px; color: #666; }
.search-result-item-main .title, .search-result-item-main .result-tags, .search-result-item-main .actors, .search-result-item-main .desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; word-break: break-all; }
.search-result-item-main .title { margin: 8px 0 0; font-size: 16px; line-height: 18px; font-weight: 700; color: var(--ink); }
.search-result-item-main .result-tags, .search-result-item-main .actors { margin-top: 4px; }
.search-result-item-main .desc { margin: 4px 0 8px; -webkit-line-clamp: 2; }
.search-result-item:hover .search-result-item-ctn { background: #ebebeb; }
.search-result-item:hover .search-result-item-pic img { transition: .5s; transform: scale(1.1); }
@media (min-width: 1790px) { .search-result-list { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 772px) { .search-result-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 772px) { .channel-tabs a { font-size: 20px; } .catalog-results .channel-title h1 { font-size: 18px; } }
@media (max-width: 772px) { .catalog-results .channel-title h1 { font-size: 16px; } }
@media (max-width: 560px) {
    .hero-copy h1 { font-size: 20px; }
    .hero-copy p { font-size: 14px; }
    .poster-card h3 { font-size: 14px; height: auto; min-height: 18px; }
    .channel-tabs { justify-content: center; }
    .channel-tabs a { font-size: 16px; }
    .catalog-results .channel-title h1 { font-size: 14px; }
    .detail-content .detail-main-panel .controls { display: none; }
    .detail-content .mobile-detail-controls { gap: 16px; }
    .detail-content .detail-main-panel { margin: 0 -13px; padding: 16px 13px; }
    .detail-content .source-grid .source { flex: 1 1 calc(50% - 12px); min-width: 0; }
    .channel-home .channel-section .poster-card:nth-child(n+10) { display: block; }
    .detail-title, .watch-side h1 { font-size: 24px; }
    .play-view .watch, .play-view .watch-side { height: auto; }
    .search-result-list { grid-template-columns: 1fr; }
}

/* Spacing audit: original fs-margin-section is 28/24/20/16px, not one
   desktop value carried into tablet layouts. Keep the 50px page spacer. */
:root { --section-space: 28px; --sidebar: 200px; }
body::before { left: var(--sidebar); }
.sidebar { width: var(--sidebar); border-right: 0; padding: 0; }
.sidebar .logo { height: 64px; }
.sidebar .logo img { width: 120px; height: 40px; object-fit: contain; }
.sidebar .menu-group { margin: 16px; padding: 0; border: 0; }
.sidebar .menu-group + .menu-group { margin-top: 41px; position: relative; }
.sidebar .menu-group + .menu-group::before { content: ""; position: absolute; top: -21px; left: 4px; right: 4px; height: 1px; background: #efefef; }
.sidebar .menu a { height: 40px; padding: 0 16px; gap: 12px; }
.sidebar .menu a span { display: block; line-height: 14px; }
.sidebar .menu-icon { height: 16px; line-height: 16px; }
.page { margin-left: calc(var(--sidebar) + 1px); padding-top: 50px; }
.topbar { position: fixed; top: 0; right: 0; left: calc(var(--sidebar) + 1px); width: auto; }
.content { width: auto; max-width: none; padding: 0 var(--section-space); display: flow-root; }
.content > div { display: flow-root; }
.hero { height: 0; padding-bottom: clamp(180px,32.1%,520px); margin: var(--section-space) 0; }
.hero-copy { inset: 0; max-width: none; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; }
.hero-copy h1 { margin: 0 16px; }
.hero-copy .hero-tags { margin: 8px 16px; font-size: 14px; line-height: 21px; color: #cecece; }
.hero-copy p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: none; margin: 0 16px 40px; white-space: normal; }
.section, .channel-section, .channel-tabs { margin: var(--section-space) 0; }
.channel-section:last-of-type { margin-bottom: var(--section-space) !important; }
.poster-grid { height: auto; grid-template-rows: none; gap: 16px; grid-template-columns: repeat(6,minmax(0,1fr)); }
.poster { aspect-ratio: 9 / 13; }
.poster-card h3 { margin: 8px 0 0; height: 20px; line-height: 20px; }
.detail-view .detail-content .detail-card { margin: var(--section-space) 0; padding: 0; }
.detail-content .detail-main-panel { margin: 16px 0 0; padding: 16px; }
.detail-content .detail-card + .section .section-head,
.detail-content .detail-card + .section + .section .section-head { height: 46px; margin-bottom: 12px; }
.detail-content .detail-card + .section .section-head h2,
.detail-content .detail-card + .section + .section .section-head h2 { line-height: 46px; }
.play-view .watch { margin: var(--section-space) 0; height: auto; grid-template-columns: minmax(0,1fr); }
.play-view .player { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.play-view .watch-side { height: auto; padding: 16px; }
.watch-side .tags-line { margin: 16px 0; }
.watch-side .watch-tools { margin: 16px 0; }
.watch-side .section-head { height: auto; min-height: 0; margin-bottom: 12px; }
.watch-side .section-head h2 { line-height: normal; }
.watch-side .watch-episodes { margin-top: 16px; }
.watch-side .episode-grid a { min-width: 0; padding: 0; }
.catalog-results .channel-title { margin: calc(2 * var(--section-space)) var(--section-space); }
.catalog-results .channel-title h1 { margin: 0; line-height: normal; }
.search-result-list { margin: var(--section-space) 0; }
.footer { width: calc(100% + 2 * var(--section-space)); min-height: 0; margin: 0 calc(-1 * var(--section-space)); padding: 16px; }
.footer > div { padding: 0 16px; }
.footer img { width: 120px; height: 40px; object-fit: contain; margin: 0 0 16px; }
.footer p { margin: 0; min-height: 20px; line-height: 18px; }
.footer p + p { margin-top: 0; }
@media (min-width: 1355px) {
    .play-view .watch { grid-template-columns: minmax(0,1fr) 480px; align-items: start; }
    .play-view .watch-side { height: calc((var(--viewport-width, 100vw) - 201px - 56px - 480px) * 9 / 16); overflow-y: auto; }
}
@media (min-width: 1550px) {
    .poster-grid { grid-template-columns: repeat(7,minmax(0,1fr)); }
    .video-section .poster-card:nth-child(7) { display: block; }
}
@media (min-width: 1790px) {
    .poster-grid { grid-template-columns: repeat(8,minmax(0,1fr)); }
    .video-section .poster-card:nth-child(8) { display: block; }
}
@media (max-width: 772px) {
    :root { --sidebar: 100px; --section-space: 24px; }
    .sidebar .menu a { display: flex; flex-direction: column; justify-content: center; height: 60px; gap: 8px; padding: 0; }
    .sidebar .menu a span { display: block; }
    .sidebar .menu-icon { margin: 0; }
    .sidebar .logo img { width: 40px; height: 40px; }
    .poster-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (max-width: 772px) {
    :root { --section-space: 20px; }
    .poster-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .footer img { margin-inline: auto; }
    .footer { text-align: center; }
    .footer p + p { margin-top: 8px; }
}
@media (max-width: 560px) {
    :root { --sidebar: 0px; --section-space: 16px; }
    .page { margin-left: 0; }
    .topbar { left: 0; }
    .detail-view .content, .play-view .content { padding-top: 0; }
    .mobile-search-block { margin-top: 16px; height: 116px; }
    .mobile-search-block form { width: calc(var(--viewport-width, 100vw) - 32px); }
    .poster-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .detail-content .detail-main-panel { margin: 0; padding: 16px; }
    .detail-content .mobile-detail-controls .primary { margin: 0; }
    .play-view .watch { margin-inline: 0; }
    .play-view .watch-side { height: auto; }
    .footer, body[data-page="home"] .footer, .detail-view .footer, .play-view .footer { margin-bottom: 0; padding-inline: 0; }
}