:root {
  --pan-ink: #25324a;
  --pan-muted: #7c8ca5;
  --pan-blue: #4d7cf7;
  --pan-orange: #ff8b27;
  --pan-line: #edf0f4;
  --pan-bg: #f7f8fa;
}

html { min-height: 100%; background: #f7faff url("../images/sakura-desktop.webp") center top / cover fixed no-repeat; }
body { min-height: 100%; background: linear-gradient(rgba(247,250,255,.22), rgba(255,248,251,.32)); color: var(--pan-ink); }
body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
.headBg { display: none !important; }
.petal-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.petal-layer i { position: absolute; top: -8vh; width: 15px; height: 9px; background: linear-gradient(135deg, #ffd2df, #f4a9c1); border-radius: 90% 10% 90% 10%; opacity: .72; filter: drop-shadow(0 1px 1px rgba(230,120,155,.15)); animation: pan-petal-fall 12s linear infinite, pan-petal-sway 3.5s ease-in-out infinite alternate; }
.petal-layer i:nth-child(1) { left: 4%; animation-delay: -2s; animation-duration: 13s, 3s; }
.petal-layer i:nth-child(2) { left: 13%; width: 12px; height: 8px; animation-delay: -8s; animation-duration: 15s, 4s; }
.petal-layer i:nth-child(3) { left: 23%; animation-delay: -5s; animation-duration: 11s, 3.2s; }
.petal-layer i:nth-child(4) { left: 32%; width: 18px; height: 10px; animation-delay: -10s; animation-duration: 17s, 4.3s; }
.petal-layer i:nth-child(5) { left: 43%; animation-delay: -1s; animation-duration: 14s, 3.6s; }
.petal-layer i:nth-child(6) { left: 52%; width: 11px; height: 7px; animation-delay: -6s; animation-duration: 12s, 2.8s; }
.petal-layer i:nth-child(7) { left: 61%; animation-delay: -9s; animation-duration: 16s, 4s; }
.petal-layer i:nth-child(8) { left: 70%; width: 17px; height: 10px; animation-delay: -3s; animation-duration: 13s, 3.3s; }
.petal-layer i:nth-child(9) { left: 78%; animation-delay: -7s; animation-duration: 18s, 4.5s; }
.petal-layer i:nth-child(10) { left: 86%; width: 12px; height: 8px; animation-delay: -11s; animation-duration: 14s, 3s; }
.petal-layer i:nth-child(11) { left: 93%; animation-delay: -4s; animation-duration: 15s, 3.8s; }
.petal-layer i:nth-child(12) { left: 97%; width: 10px; height: 7px; animation-delay: -12s; animation-duration: 19s, 4.4s; }
@keyframes pan-petal-fall { to { top: 108vh; transform: rotate(540deg); } }
@keyframes pan-petal-sway { from { margin-left: -24px; } to { margin-left: 32px; } }
.headerBox { height: 74px; position: relative; background: linear-gradient(180deg, rgba(190,220,248,.86), rgba(205,228,250,.74)); backdrop-filter: blur(14px); border-bottom: 0; box-shadow: none; z-index: 20; }
.headerBox .bg { display: none; }
.headerBox .box { width: min(1180px, calc(100% - 48px)); height: 74px; margin: auto; display: flex; align-items: center; gap: 34px; }
.headerBox .logoBox { display: none !important; }
.headerBox .logoBox .logo { width: 30px; height: 30px; object-fit: contain; margin-right: 10px; }
.headerBox .logoBox .title { color: #343942; font-size: 20px; font-weight: 700; }
.headerBox .search { display: none !important; }
.headerBox .search input { height: 100%; font-size: 14px; padding: 0 52px 0 22px; }
.headerBox .search .btn { width: 48px; height: 42px; color: var(--pan-blue); }
.headerBox .search .btn .iconfont { font-size: 21px; }
.headerBox .navs { margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 50px; padding: 4px 8px; white-space: nowrap; background: rgba(255,255,255,.96); border: 1px solid #e7edf8; border-radius: 14px; box-shadow: 0 8px 22px rgba(56,82,130,.12); }
.headerBox .navs .item, .headerBox .navs a { color: #35445d; font-size: 14px; text-decoration: none; font-weight: 500; }
.headerBox .navs .item, .headerBox .navs a { padding: 11px 20px; border-radius: 9px; line-height: 22px; transition: background .2s ease, color .2s ease; }
.headerBox .navs .item:hover, .headerBox .navs a:hover { color: #4d7cf7; background: #e9f0ff; }
.headerBox .navs .iconfont { display: none; }
.headerKox { display: none; }

.pan-home { position: relative; z-index: 2; min-height: calc(100vh - 74px); }
.pan-hero { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 70px 0 42px; text-align: center; }
.pan-brand { display: flex; justify-content: center; align-items: center; gap: 12px; }
.pan-brand img { width: 38px; height: 38px; object-fit: contain; }
.pan-brand h1 { margin: 0; color: #292d34; font-size: 34px; line-height: 1.3; letter-spacing: 0; font-weight: 750; }
.pan-subtitle { margin: 7px 0 0; color: #6e7784; font-size: 14px; }
.pan-search { width: min(860px, 100%); height: 58px; margin: 42px auto 0; background: #fff; border: 1px solid #dce7ff; border-radius: 10px !important; box-shadow: 0 7px 20px rgba(74,112,190,.10); }
.searchBox .pan-search { width: min(860px, 100%); height: 58px !important; margin: 42px auto 0; border-radius: 10px !important; }
.pan-search input { height: 100%; padding: 0 92px 0 18px; color: #35445d; font-size: 16px; }
.pan-search .btn { width: 82px; height: 42px; margin-right: 8px; color: #fff; background: #4d7cf7; border-radius: 8px; }
.searchBox .pan-search .btn { width: 82px; height: 42px; margin-right: 8px; color: #fff; background: #4d7cf7; border-radius: 8px; }
.pan-search .btn:hover { background: #3f6ee7; }
.pan-search .btn span { color: #fff; font-size: 14px; font-weight: 600; }
.pan-hotline { width: min(860px, 100%); min-height: 36px; display: flex; justify-content: flex-start; align-items: center; gap: 8px; overflow-x: auto; margin: 12px auto 0; padding: 4px 6px; border: 1px solid rgba(214,226,248,.92); border-radius: 12px; background: rgba(255,255,255,.52); box-shadow: 0 5px 16px rgba(64,92,139,.07); color: #52627c; font-size: 13px; white-space: nowrap; scrollbar-width: none; }
.pan-hotline::-webkit-scrollbar { display: none; }
.pan-hotline a { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid rgba(194,211,244,.9); border-radius: 7px; background: rgba(255,255,255,.78); color: #52627c; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.pan-hotline a:hover { border-color: #9cbaff; background: #edf3ff; color: #3f6ee7; }
.pan-hotline a:hover { color: var(--pan-blue); }
.pan-hot-label { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 7px; background: #4d7cf7; color: #fff; font-weight: 700; }
.pan-hot-fallback { color: #35445d; }

.pan-rankings { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 45px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pan-scroll-hint { display: none; }
.pan-card { min-width: 0; overflow: hidden; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.92); border-radius: 12px; box-shadow: 0 8px 24px rgba(44,67,104,.08); }
.pan-card-title { height: 64px; padding: 0 20px; display: flex; align-items: center; gap: 10px; color: #26334a; font-size: 19px; font-weight: 700; border-bottom: 1px solid #edf2fb; }
.pan-card-title img { width: 24px; height: 24px; object-fit: contain; }
.pan-title-icon { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; font-size: 11px; font-weight: 800; border-radius: 5px; }
.icon-new { color: #2669ee; background: #edf3ff; }
.icon-play { color: #fff; background: #ff9952; font-size: 12px; }
.pan-card .content { min-height: 0; }
.pan-card .content .list { padding: 9px 16px 15px; }
.pan-card .content .list .item { width: 100%; display: block; margin: 0; padding: 8px 0; color: #4d5b72; text-decoration: none; font-size: 14px; line-height: 1.45; }
.pan-card .content .list .item p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.pan-card .content .list .item p span { display: inline-block; width: 25px; color: #b8bec8; }
.pan-card .content .list .item:nth-child(-n+3) p span { color: var(--pan-orange); }
.pan-card .content .list .item:nth-child(1) p span { color: #ff3b30; }
.pan-card .content .list .item:nth-child(2) p span { color: #ff7a21; }
.pan-card .content .list .item:nth-child(3) p span { color: #f0a51a; }
.pan-card .content .list .item:hover p { color: var(--pan-blue); }
.footerBox { position: relative; z-index: 2; padding: 38px 24px 48px; background: #2947b5; border-top: 0; }
.footerBox .box { width: min(1180px, 100%); margin: auto; padding: 0; color: #fff; font-size: 13px; text-align: center; }
.footerBox .box > p { display: block; margin: 0 0 10px; }
.copyrightComplaint { max-width: 1040px; margin: 0 auto; padding: 28px; border: 1px solid rgba(173,198,255,.42); border-radius: 8px; background: rgba(67,93,190,.62); line-height: 1.9; }
.copyrightTitle { margin-bottom: 18px; color: #fff; font-size: 16px; font-weight: 700; }
.copyrightTitle { margin-bottom: 20px; }
.copyrightNotice { padding: 18px 20px 20px; border-radius: 7px; background: rgba(31,58,148,.75); color: rgba(255,255,255,.86); }
.copyrightNotice strong { display: inline-block; margin-bottom: 10px; padding: 2px 8px; border-radius: 4px; background: #ff5a55; color: #fff; font-size: 13px; }
.copyrightNotice p { margin: 3px auto; }
.copyrightNotice small { display: block; margin-top: 12px; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .2px; }

@media (max-width: 900px) {
  .headerBox .box { width: calc(100% - 32px); gap: 15px; }
  .headerBox .logoBox { min-width: auto; }
  .headerBox .search { max-width: none; }
  .headerBox .navs { gap: 12px; }
  .headerBox .navs .item { display: none; }
  .headerBox .navs .iconfont { display: block; }
  .pan-rankings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  html { background-position: 62% top; background-attachment: scroll; }
  .petal-layer i:nth-child(n+8) { display: none; }
  .headerBox { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: transparent; }
  .headerBox, .headerBox .box { height: 58px; }
  .headerBox .box { width: 100%; position: relative; }
  .headerBox .navs { position: absolute; top: 9px; right: 12px; z-index: 3; min-height: 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 5px 14px rgba(42,68,120,.14); }
  .headerBox .navs .iconfont { display: grid; place-items: center; width: 40px; height: 40px; color: #30415e; font-size: 0; line-height: 1; text-align: center; }
  .headerBox .navs .iconfont::before { content: "☰"; display: block; color: #30415e; font-family: Arial, sans-serif; font-size: 22px; line-height: 1; transform: translateY(9px); }
  .pan-home { min-height: auto; }
  .headerBox .search { display: none; }
  .pan-home { min-height: calc(100vh - 58px); }
  .pan-hero, .pan-rankings { width: calc(100% - 24px); }
  .pan-hero { padding: 72px 0 26px; }
  .pan-brand { gap: 8px; }
  .pan-brand img { width: 30px; height: 30px; }
  .pan-brand h1 { font-size: 24px; }
  .pan-subtitle { font-size: 12px; }
  .pan-search { height: 46px; margin-top: 27px; }
  .pan-search input { padding-left: 17px; font-size: 14px; }
  .pan-search .btn { height: 46px; width: 50px; }
  .pan-hotline { width: 100%; min-height: 33px; gap: 6px; margin-top: 9px; padding: 3px; border-radius: 10px; font-size: 11px; }
  .pan-hotline a { min-height: 25px; padding: 0 8px; border-radius: 6px; }
  .pan-hot-label { min-height: 25px; padding: 0 8px; border-radius: 6px; }
  .pan-hot-fallback { padding: 0 5px; }
  .pan-rankings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 0 0 12px; }
  .pan-rankings::-webkit-scrollbar { display: none; }
  .pan-rankings .pan-card { min-width: 0; }
  .pan-scroll-hint { display: none; }
  .pan-card-title { height: 46px; padding: 0 10px; gap: 6px; font-size: 15px; }
  .pan-card-title img, .pan-title-icon { width: 20px; height: 20px; }
  .pan-card .content .list { padding: 5px 9px 7px; }
  .pan-card .content .list .item { padding: 5px 0; font-size: 11px; }
  .pan-card .content .list .item p span { width: 20px; }
  .footerBox { margin-top: 4px; padding: 20px 12px 30px; }
  .footerBox .box { font-size: 11px; }
  .copyrightComplaint { padding: 20px 14px; }
  .copyrightTitle { margin-bottom: 15px; font-size: 15px; }
  .copyrightNotice { padding: 15px 10px; }
  .copyrightNotice p { font-size: 11px; }
  .copyrightNotice small { margin-top: 12px; font-size: 13px; font-weight: 800; }
}

@media (max-width: 600px) {
  .petal-layer i { display: none !important; }
  .pan-home { animation: cherry-mobile-enter .55s ease-out both; }
  .pan-card { animation: cherry-card-enter .45s ease-out both; }
  .pan-card:nth-child(2) { animation-delay: .06s; }
  .pan-card:nth-child(3) { animation-delay: .12s; }
  .pan-card:nth-child(4) { animation-delay: .18s; }
  .pan-card:nth-child(5) { animation-delay: .24s; }
}

@keyframes cherry-mobile-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cherry-card-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .el-dialog { width: calc(100% - 40px) !important; max-width: 340px; border-radius: 16px !important; overflow: hidden; }
  .el-dialog__header { padding: 12px 16px 4px !important; }
  .el-dialog__body { padding: 8px 14px 16px !important; }
  /* Keep the mobile menu consistent with the default news theme. */
  .headerBox .box .navs .header-menu-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 22px !important;
  }
  .headerBox .box .navs .header-menu-btn::before {
    content: none !important;
  }
  .menu-dialog-wrapper {
    width: min(210px, calc(100vw - 32px)) !important;
    margin: 68px max(14px, calc((100vw - 560px) / 2 + 14px)) 0 auto !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18) !important;
  }
  .menu-dialog-wrapper .el-dialog__body { padding: 8px !important; }
  .menu-dialog-wrapper .drawer { padding: 0 !important; }
  .menu-dialog-wrapper .drawer .item,
  .menu-dialog-wrapper .drawer a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1f2937 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 44px !important;
    text-align: left !important;
  }
  .menu-dialog-wrapper .drawer .item:active,
  .menu-dialog-wrapper .drawer a:active,
  .menu-dialog-wrapper .drawer .item:hover,
  .menu-dialog-wrapper .drawer a:hover {
    background: #f4f7ff !important;
    color: #0052d9 !important;
  }
  .loading-minimal {
    padding: 24px 0 !important;
  }
}

.pan-option-icon {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px;
  object-fit: contain;
  vertical-align: middle;
}

.pan-filter-minimal a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.pan-select-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.resource-pan-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.resource-pan-name {
  color: #7b879c;
  font-size: 13px;
}

/* Final cherry layout contract: mobile rankings follow the legacy horizontal rail. */
@media (max-width: 600px) {
  body.cherry-home .pan-rankings {
    display: flex !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 8px !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.cherry-home .pan-rankings::-webkit-scrollbar { display: none; }
  body.cherry-home .pan-rankings .pan-card {
    flex: 0 0 calc((100% - 10px) / 2) !important;
    min-width: calc((100% - 10px) / 2) !important;
    scroll-snap-align: start;
  }
  body.cherry-home .pan-scroll-hint {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 22px !important;
    margin: 4px auto 0 !important;
    color: #7483a3 !important;
    font-size: 11px !important;
  }
  body.cherry-home .pan-scroll-hint::after { content: ""; display: block; width: 18px; height: 3px; border-radius: 3px; background: #4d7cf7; }
}
@media (prefers-reduced-motion: reduce) {
  .petal-layer i { animation: none; display: none; }
}