:root{
  --primary:#f472b6;
  --accent:#fbbf24;
  --bg:#fff5f7;
  --text:#4a2530;
  --radius-card:1rem;
  --radius-pill:50rem;
  --shadow-sm:0 6px 18px rgba(244,114,182,0.10);
}
*{font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;}
body{
  background-color: var(--bg);
  color: var(--text);
  letter-spacing:0.01em;
}
h1,h2,h3,h4{font-weight:800;color:#3a1e25;}
a{text-decoration:none;color:inherit;}
.navbar-ludashi{
  background: rgba(255,245,247,0.85);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(244,114,182,0.15);
  transition: background .3s, box-shadow .3s;
}
.navbar-ludashi.scrolled{
  background: rgba(255,245,247,0.95);
  box-shadow: 0 10px 30px -10px rgba(244,114,182,0.3);
}
.navbar-brand{
  font-weight: 900;
  font-size:1.6rem;
  color:#c2416f;
  display: flex;
  align-items:center;
  gap:0.5rem;
}
.navbar-brand i{color:var(--primary);}
.nav-link{
  font-weight:600;
  color:var(--text);
  margin:0 0.2rem;
  padding:0.5rem 1rem !important;
  border-radius: var(--radius-pill);
  transition: background 0.2s;
}
.nav-link:hover{background: rgba(244,114,182,0.12); color:#b83a64;}
.btn-pill{
  border-radius: var(--radius-pill);
  padding:0.5rem 1.5rem;
}
.hero-section{
  padding: 3rem 0 2rem;
  background: radial-gradient(circle at 10% 20%, #ffe1ec, transparent 40%), var(--bg);
}
.hero-badge{
  background: rgba(251,191,36,0.2);
  color:#b45309;
  border-radius: var(--radius-pill);
  padding:0.35rem 1rem;
  font-weight:600;
  font-size:0.9rem;
  display:inline-block;
}
.typewriter-title{
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1.2;
  color:#3a1e25;
  min-height: 4rem;
}
@media (max-width:768px){.typewriter-title{font-size:2.5rem;}}
.typewriter-title .typed-cursor{color:var(--primary);font-weight:400;}
.movie-card{
  background: white;
  border-radius: var(--radius-card);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s;
  border: none;
  position: relative;
}
.movie-card:hover{
  transform: translateY(-8px);
  box-shadow:0 20px 30px -10px rgba(244,114,182,0.25);
}
.movie-poster{
  position:relative;
  aspect-ratio: 2/3;
  overflow:hidden;
  background: #fde8f0;
}
.movie-poster img{
  width:100%;height:100%;object-fit:cover;
  transition: transform 0.6s ease;
  filter: blur(0px);
}
.movie-card:hover .movie-poster img{transform: scale(1.05);}
.poster-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(74,37,48,0.75), transparent 60%);
  opacity:0; transition: opacity .3s;
  display:flex; align-items:flex-end;
  padding:1rem;
}
.movie-card:hover .poster-overlay{opacity:1;}
.movie-card .rating-badge{
  position:absolute; top:10px; left:10px;
  background: rgba(251,191,36,0.9);
  color:#292524;
  font-weight:800;
  font-size:0.85rem;
  padding:0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  z-index:5;
}
.update-ep{
  position:absolute; top:10px; right:10px;
  background: rgba(0,0,0,0.7);
  color:white;
  font-size:0.7rem;
  padding:0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  z-index:5;
}
.card-info{
  padding:0.9rem;
}
.card-info h6{font-weight:700; margin-bottom:0.25rem; font-size:1rem;}
.card-info .meta{font-size:0.8rem;color:#9d6b7a;}
.card-back{
  position:absolute; inset:0; background: white; 
  border-radius: var(--radius-card);
  padding:1.2rem;
  transform: rotateY(180deg);
  transition: 0.5s;
  backface-visibility:hidden;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  box-shadow: var(--shadow-sm);
}
.movie-card.flipped .card-front{transform: rotateY(180deg); visibility:hidden;}
.movie-card.flipped .card-back{transform: rotateY(0deg); visibility:visible;}
.card-front{
  backface-visibility:hidden;
  transition: 0.5s;
  visibility:visible;
}
.flip-close{
  position:absolute; top:8px; right:12px;
  background: none; border:none; font-size:1.4rem; color:#7f4b5a;
}
.flip-close:hover{color:#2d1219;}
.section-title{
  font-weight:800;
  font-size:1.8rem;
  margin-bottom:1.2rem;
  display:flex; align-items:center; gap:0.5rem;
}
.section-title i{color:var(--primary);}
.bg-soft-pink{background-color: #ffe9f0;}
.chip-tag{
  background: white;
  padding:0.4rem 1.2rem;
  border-radius: var(--radius-pill);
  font-weight:600;
  color: var(--text);
  border:1px solid #fbd5e0;
}
.chip-tag:hover{background:var(--primary); color:white; border-color:var(--primary);}
footer{
  background: #f9dfe9;
  color: #4a2530;
}
.footer-links a{color:#6b3548; margin:0 0.8rem;}
.friend-links{
  background: white;
  border-radius: var(--radius-card);
  padding:1.5rem 2rem;
  margin: 2rem 0;
}
.friend-links a{color:#b3446c; margin:0 0.6rem; display:inline-block;}
.friend-links a:hover{text-decoration:underline;}
/* 懒加载渐显 */
.lazy-fade{opacity:0; transition: opacity 0.5s;}
.lazy-fade.loaded{opacity:1;}
/* 步骤条 */
.steps-wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;}
.step-item{flex:1; min-width:140px; background:white; border-radius:2rem; padding:1.2rem; box-shadow: var(--shadow-sm);}

/* --- 子页面追加 --- */
/* 页面专属补充样式，自动合并进站点CSS */
        .about-hero {
            background: linear-gradient(135deg, rgba(244,114,182,0.08) 0%, rgba(251,191,36,0.05) 100%);
            border: 1px solid rgba(244,114,182,0.15);
        }
.about-section {
            padding: 3.5rem 0;
        }
.about-section + .about-section {
            border-top: 1px dashed rgba(244,114,182,0.2);
        }
.about-icon {
            width: 48px;
            height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: rgba(244,114,182,0.12);
            color: var(--primary);
            font-size: 1.3rem;
            margin-bottom: 1rem;
        }
.timeline-list {
            list-style: none;
            padding-left: 0;
            position: relative;
        }
.timeline-list::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 8px;
            bottom: 8px;
            width: 2px;
            background: linear-gradient(to bottom, var(--primary), var(--accent));
            border-radius: 2px;
            opacity: 0.3;
        }
.timeline-list li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1.2rem;
        }
.timeline-list li::before {
            content: '';
            position: absolute;
            left: 3px;
            top: 0.55em;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--primary);
            border: 2px solid var(--bg);
            box-shadow: 0 0 0 2px var(--primary);
        }
.stat-number {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary);
            line-height: 1.2;
        }
.stat-label {
            font-size: 0.9rem;
            color: rgba(74,37,48,0.7);
            margin-top: 0.2rem;
        }
.content-card {
            background: rgba(255,255,255,0.55);
            border: 1px solid rgba(244,114,182,0.12);
            border-radius: var(--radius-card);
            padding: 1.8rem;
            box-shadow: var(--shadow-sm);
            height: 100%;
        }
.content-card h3 {
            color: var(--text);
            font-weight: 700;
            font-size: 1.25rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
.content-card h3 i {
            color: var(--primary);
            font-size: 1.1rem;
        }
.content-card p {
            color: rgba(74,37,48,0.85);
            line-height: 1.75;
            font-size: 0.95rem;
            margin-bottom: 0.8rem;
        }
.content-card ul {
            padding-left: 1.2rem;
            color: rgba(74,37,48,0.85);
            line-height: 1.8;
            font-size: 0.95rem;
        }
.content-card ul li {
            margin-bottom: 0.4rem;
        }
.content-card ul li::marker {
            color: var(--primary);
        }
.steps-wrap .step-item {
            padding: 1.5rem 1.2rem;
        }
.steps-wrap .step-item .step-num {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--accent);
            margin-bottom: 0.3rem;
        }
.steps-wrap .step-item h4 {
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.4rem;
        }
.steps-wrap .step-item p {
            font-size: 0.88rem;
            color: rgba(74,37,48,0.75);
            margin-bottom: 0;
        }
.work-hours {
            background: rgba(244,114,182,0.05);
            border-radius: var(--radius-card);
            padding: 1.2rem 1.5rem;
            border-left: 3px solid var(--primary);
            margin-top: 1.5rem;
        }
.work-hours p {
            margin-bottom: 0.3rem;
            font-size: 0.92rem;
            color: var(--text);
        }
.work-hours p i {
            color: var(--primary);
            margin-right: 0.5rem;
        }
.friend-links .chip-tag {
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
.about-section {
                padding: 2.5rem 0;
            }
.content-card {
                padding: 1.3rem;
                margin-bottom: 1rem;
            }

/* --- 子页面追加 --- */
/* 本页专用 —— 覆盖bootstrap组件白底，与首页配色统一 */
        .card, .card-body, .card-title, .card-text, .card-header, .card-footer,
        .list-group-item, .accordion-item, .accordion-button, .accordion-body {
            background: var(--bg) !important;
            color: var(--text) !important;
            border-color: rgba(244, 114, 182, 0.25) !important;
        }
.accordion-button:not(.collapsed) {
            background: rgba(244, 114, 182, 0.1) !important;
            color: var(--text) !important;
        }
.accordion-button:focus {
            box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.15) !important;
        }
.form-control, .form-select {
            background: rgba(255,255,255,0.7) !important;
            border-color: rgba(244, 114, 182, 0.3) !important;
            color: var(--text) !important;
        }
.form-control::placeholder {
            color: rgba(74, 37, 48, 0.5) !important;
        }
/* 本页卡片风格微调 */
        .disclaimer-card {
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-sm);
            padding: 1.5rem;
            height: 100%;
            transition: transform 0.2s ease;
            background: var(--bg);
            border: 1px solid rgba(244, 114, 182, 0.2);
        }
.disclaimer-card:hover {
            transform: translateY(-4px);
        }
.disclaimer-icon {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 0.75rem;
        }
.section-block {
            margin-top: 3rem;
        }
.fine-print {
            font-size: 0.9rem;
            opacity: 0.8;
        }
.link-plain {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
        }
.link-plain:hover {
            text-decoration: underline;
            color: var(--accent);
        }
.disclaimer-card {
                padding: 1.2rem;
            }
/* 覆盖bootstrap的text-muted变成深色站适配 */
        .text-muted {
            color: rgba(74, 37, 48, 0.7) !important;
        }

/* --- 子页面追加 --- */
/* 确保页面背景与变量一致 */
        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: 'Inter', sans-serif;
        }
/* 覆盖 Bootstrap 组件默认白底（如果用到） */
        .card, .card-body, .card-header, .card-footer {
            background: rgba(255,255,255,0.6) !important;
            color: var(--text) !important;
            border-color: rgba(244,114,182,0.2) !important;
            backdrop-filter: blur(4px);
        }
.nav-link, .navbar-brand {
            color: var(--text) !important;
        }
.nav-link.active, .nav-link:hover {
            color: var(--primary) !important;
        }
.btn-light {
            background: var(--primary) !important;
            border-color: var(--primary) !important;
            color: #fff !important;
        }
/* 覆盖列表组/手风琴（如有） */
        .list-group-item, .accordion-item, .accordion-button {
            background: rgba(255,255,255,0.6) !important;
            color: var(--text) !important;
            border-color: rgba(244,114,182,0.2) !important;
        }
/* 表格 */
        .table {
            --bs-table-bg: rgba(255,255,255,0.5) !important;
            color: var(--text) !important;
            border-color: rgba(244,114,182,0.2) !important;
        }
.table th, .table td {
            border-color: rgba(244,114,182,0.2) !important;
        }
/* 热播卡片悬浮效果 */
        .movie-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
/* 本页特有：热播横向滚动区 */
        .hot-scroll {
            overflow-x: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--primary) rgba(244,114,182,0.1);
        }
.hot-scroll::-webkit-scrollbar {
            height: 6px;
        }
.hot-scroll::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 10px;
        }
.hot-scroll .movie-card {
            min-width: 160px;
        }
/* 榜单单行 */
        .rank-item {
            border-bottom: 1px dashed rgba(244,114,182,0.2);
            padding: 12px 0;
        }
.rank-item:last-child {
            border-bottom: none;
        }
.rank-number {
            font-weight: 800;
            color: var(--primary);
            font-size: 1.2rem;
            width: 40px;
        }
50% { border-color: transparent; }
/* 页脚链接样式 */
        .friend-links a {
            color: var(--text);
            opacity: 0.8;
            text-decoration: none;
        }

/* --- 子页面追加 --- */
/* 本页专属微调——仅用于排行榜页面的额外布局, 配色全部沿用CSS变量 */
        .rank-hero {
            background: linear-gradient(135deg, rgba(244, 114, 182, 0.08), rgba(251, 191, 36, 0.06));
            border-radius: var(--radius-card);
            padding: 2.5rem 2rem;
            margin-top: 1.5rem;
        }
.rank-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem 0.8rem;
            margin: 1.8rem 0 1.2rem;
        }
.rank-tab {
            padding: 0.45rem 1.3rem;
            border-radius: var(--radius-pill);
            background: rgba(244, 114, 182, 0.08);
            border: 1px solid rgba(244, 114, 182, 0.25);
            color: var(--text);
            font-weight: 600;
            font-size: 0.9rem;
            transition: all .2s;
            cursor: default;
        }
.rank-tab.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            box-shadow: var(--shadow-sm);
        }
.rank-list {
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
        }
.rank-info {
            flex: 1;
        }
.rank-title {
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.15rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
.rank-title i {
            color: var(--accent);
            font-size: 0.85rem;
        }
.rank-meta {
            font-size: 0.8rem;
            color: var(--text);
            opacity: 0.7;
        }
.rank-score {
            background: var(--accent);
            color: #3a2a1a;
            padding: 0.2rem 0.8rem;
            border-radius: var(--radius-pill);
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }
.rank-trend {
            color: var(--primary);
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.2rem;
        }
.section-subhead {
            font-size: 1.4rem;
            font-weight: 700;
            margin-top: 2.2rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
.section-subhead i {
            color: var(--primary);
        }
.footer-note {
            font-size: 0.9rem;
            opacity: 0.8;
        }
to { opacity: 1; }
.navbar-ludashi .nav-link.active {
            color: var(--primary);
            font-weight: 700;
        }