:root {
  --ph-color: #e50914;
  --ph-accent: #f5c518;
  --ph-bg: #0b0b0f;
  --ph-text: #f5f5f7;
  --ph-outline: 2px solid #2a2a35;
  --ph-shadow: 8px 8px 0 rgba(0,0,0,0.6);
}
* { box-sizing: border-box; }
body { background: var(--ph-bg); color: var(--ph-text); font-family: 'Inter', system-ui, -apple-system, sans-serif; }
h1,h2,h3,h4,.display-4 { font-weight: 800; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
.outline-card { background: #101014; border: var(--ph-outline); box-shadow: var(--ph-shadow); margin-bottom: 1.8rem; }
.hero-media { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: grayscale(30%) contrast(1.2); border: var(--ph-outline); box-shadow: var(--ph-shadow); background: #1d1d22; }
.btn-dark-red { background: var(--ph-color); color: white; border: 2px solid #ffd; border-radius: 0; font-weight: 700; }
.btn-outline-accent { border: 2px solid var(--ph-accent); color: var(--ph-accent); border-radius: 0; font-weight: 600; }
.section-number { font-size: 2.5rem; font-weight: 900; color: var(--ph-accent); opacity: .7; margin-right: .8rem; }
.badge-hot { background: var(--ph-color); color: white; font-size: .65rem; padding: .3rem .7rem; border-radius: 0; font-weight: 700; }
.episode-badge { position: absolute; top: 8px; left: 8px; background: var(--ph-bg); color: var(--ph-accent); border: 1px solid var(--ph-accent); font-size: .75rem; padding: .1rem .4rem; z-index: 5; }
.poster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.poster-card { position: relative; cursor: pointer; transition: .2s; border: var(--ph-outline); background: #141419; }
.poster-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: #23232a; transition: transform .4s; }
.poster-card:hover img { transform: scale(1.05); }
.card-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; transition: opacity .3s; }
.poster-card:hover .card-overlay { opacity: 1; }
.overlay-text { font-weight: 600; font-size: .9rem; text-shadow: 1px 1px 3px black; }
.rating-star { color: var(--ph-accent); }
.hard-nav { background: rgba(11,11,15,.9); backdrop-filter: blur(12px); border-bottom: 2px solid #f5c518; position: sticky; top: 0; z-index: 99; }
.hard-nav a { font-weight: 600; margin-right: 1.2rem; color: var(--ph-text); border-bottom: 2px solid transparent; padding-bottom: .2rem; }
.hard-nav a:hover { border-bottom-color: var(--ph-accent); }
.magazine-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 992px){ .poster-grid{grid-template-columns: repeat(3,1fr);} .magazine-2col{grid-template-columns:1fr;} }
@media (max-width: 600px){ .poster-grid{grid-template-columns: repeat(2,1fr);} }
.faq-item { background: #131318; border: 1px solid #2e2e3a; padding: 1.2rem; margin-bottom: 1rem; }
.timeline-item { border-left: 3px solid var(--ph-accent); padding-left: 1.2rem; margin-bottom: 1.8rem; }
.news-card { border: 1px solid #2e2e3a; padding: 1rem; background: #121217; }
footer a { color: #bbb; }
.footer-link-block a{ display: inline-block; margin-right: 1.2rem; color:#aaa; }
.drawer-modal { position: fixed; bottom: 0; left: 0; width: 100%; max-height: 85vh; overflow: auto; background: #121218; border-top: 5px solid var(--ph-accent); padding: 2rem 1.5rem; transform: translateY(105%); transition: transform .35s ease; z-index: 1000; }
.drawer-modal.show { transform: translateY(0%); }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 999; display: none; }

/* --- 子页面追加 --- */
.guide-hero {
            background: linear-gradient(135deg, rgba(11,11,15,0.92) 0%, rgba(11,11,15,0.75) 50%, rgba(229,9,20,0.15) 100%);
            border-bottom: var(--ph-outline);
            padding: 4rem 0 3rem;
            position: relative;
            overflow: hidden;
        }
.guide-hero h1 {
            font-size: 2.6rem;
            font-weight: 900;
            letter-spacing: -0.02em;
            line-height: 1.15;
            margin-bottom: 1.2rem;
        }
.guide-hero .hero-accent {
            color: var(--ph-accent);
        }
.guide-hero p {
            font-size: 1.1rem;
            opacity: 0.85;
            max-width: 680px;
        }
.guide-section-title {
            font-size: 1.9rem;
            font-weight: 800;
            margin-bottom: 2rem;
            position: relative;
            display: inline-block;
        }
.guide-section-title:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--ph-color), var(--ph-accent));
            border-radius: 4px;
        }
.update-tag {
            display: inline-block;
            background: rgba(229,9,20,0.15);
            border: 1px solid rgba(229,9,20,0.4);
            color: #ff6b6b;
            padding: 0.2rem 0.8rem;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-right: 0.4rem;
            margin-bottom: 0.4rem;
        }
.guide-feature-card {
            background: rgba(255,255,255,0.03);
            border: var(--ph-outline);
            border-radius: 12px;
            padding: 1.8rem 1.5rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            height: 100%;
        }
.guide-feature-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--ph-shadow);
        }
.guide-feature-card .icon-circle {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            margin-bottom: 1.2rem;
            background: rgba(229,9,20,0.12);
            color: var(--ph-accent);
            border: 1px solid rgba(229,9,20,0.3);
        }
.guide-step {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            margin-bottom: 2.2rem;
            padding: 1.5rem;
            background: rgba(255,255,255,0.02);
            border-radius: 12px;
            border-left: 3px solid var(--ph-color);
        }
.step-num {
            font-size: 2.2rem;
            font-weight: 900;
            color: var(--ph-accent);
            line-height: 1;
            min-width: 60px;
            opacity: 0.9;
        }
.timeline-custom {
            position: relative;
            padding-left: 2.5rem;
        }
.timeline-custom:before {
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(180deg, var(--ph-color), var(--ph-accent), transparent);
        }
.timeline-item-custom {
            position: relative;
            margin-bottom: 2rem;
        }
.timeline-item-custom:before {
            content: '';
            position: absolute;
            left: -2.5rem;
            top: 0.4rem;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--ph-bg);
            border: 3px solid var(--ph-accent);
        }
.faq-custom-item {
            background: rgba(255,255,255,0.02);
            border: var(--ph-outline);
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.2rem;
        }
.faq-custom-item h4 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.6rem;
            color: var(--ph-accent);
        }
.btn-custom-red {
            background: var(--ph-color);
            color: #fff;
            border: 2px solid var(--ph-color);
            font-weight: 700;
            padding: 0.6rem 1.8rem;
            border-radius: 30px;
            transition: all 0.25s ease;
        }
.btn-custom-red:hover {
            background: transparent;
            color: var(--ph-color);
            border-color: var(--ph-color);
        }
.tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8rem;
        }
.tag-cloud span {
            background: rgba(245,197,24,0.08);
            border: 1px solid rgba(245,197,24,0.25);
            color: var(--ph-accent);
            padding: 0.4rem 1.2rem;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: default;
            transition: all 0.2s ease;
        }
.tag-cloud span:hover {
            background: rgba(245,197,24,0.18);
        }
.notice-box {
            background: linear-gradient(135deg, rgba(229,9,20,0.08), rgba(245,197,24,0.04));
            border: 1px solid rgba(229,9,20,0.3);
            border-radius: 12px;
            padding: 2rem;
            margin: 3rem 0;
        }
.active-nav {
            color: var(--ph-accent) !important;
            font-weight: 700;
        }
.guide-hero h1 { font-size: 2rem; }
.guide-section-title { font-size: 1.5rem; }
.guide-step { flex-direction: column; gap: 0.8rem; padding: 1.2rem; }
.step-num { font-size: 1.8rem; min-width: 40px; }

/* --- 子页面追加 --- */
/* 本页专属样式 —— 只补充关于页的排版细节 */
        .about-hero {
            padding: 3rem 0 1rem;
        }
.about-hero h1 {
            font-size: clamp(1.9rem, 4vw, 3rem);
            font-weight: 900;
            line-height: 1.15;
            margin-bottom: 1rem;
        }
.about-hero .lead-about {
            font-size: 1.1rem;
            max-width: 720px;
            color: rgba(245, 245, 247, .85);
            line-height: 1.8;
        }
.about-section {
            padding: 2.2rem 0;
            border-bottom: 1px solid #1e1e28;
        }
.about-section:last-child {
            border-bottom: none;
        }
.about-section h2 {
            font-weight: 800;
            font-size: 1.5rem;
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            gap: .6rem;
        }
.about-section h2 .section-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 38px;
            background: var(--ph-color);
            color: #fff;
            font-weight: 800;
            font-size: 1rem;
            padding: 0 .5rem;
            border-radius: 4px;
        }
.about-section p {
            line-height: 1.85;
            color: rgba(245, 245, 247, .88);
            margin-bottom: 1rem;
        }
.about-section strong {
            color: var(--ph-accent);
        }
.feature-grid-about {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.2rem;
            margin: 1.5rem 0 .5rem;
        }
.feature-item-about {
            background: rgba(255,255,255,.03);
            border: 1px solid #2a2a35;
            border-radius: 10px;
            padding: 1.3rem 1.2rem;
            transition: transform .2s ease, box-shadow .2s ease;
        }
.feature-item-about:hover {
            transform: translateY(-3px);
            box-shadow: var(--ph-shadow);
        }
.feature-item-about i {
            color: var(--ph-accent);
            font-size: 1.4rem;
            margin-bottom: .6rem;
        }
.feature-item-about h3 {
            font-size: 1.05rem;
            font-weight: 700;
            margin-bottom: .5rem;
        }
.feature-item-about p {
            font-size: .92rem;
            line-height: 1.65;
            margin-bottom: 0;
            color: rgba(245, 245, 247, .75);
        }
.timeline-item .year {
            font-weight: 800;
            color: var(--ph-accent);
            font-size: .95rem;
        }
.timeline-item p {
            margin-bottom: .2rem;
        }
.stat-row {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            margin: 1.5rem 0;
        }
.stat-item {
            text-align: center;
        }
.stat-item .num {
            font-size: 2.2rem;
            font-weight: 900;
            color: var(--ph-accent);
            line-height: 1;
        }
.stat-item .label {
            font-size: .85rem;
            color: rgba(245, 245, 247, .7);
            margin-top: .3rem;
        }
.about-quote {
            border-left: 4px solid var(--ph-accent);
            background: rgba(245, 197, 24, .05);
            padding: 1.2rem 1.5rem;
            border-radius: 0 8px 8px 0;
            margin: 1.5rem 0;
            font-style: italic;
            font-size: 1.02rem;
            color: rgba(245, 245, 247, .9);
        }
.about-hero h1 { font-size: 1.6rem; }
.stat-row { gap: 1.2rem; }
.stat-item .num { font-size: 1.6rem; }

/* --- 子页面追加 --- */
.privacy-section { padding: 60px 0; }
.privacy-title { color: var(--ph-accent); font-weight: 800; margin-bottom: 20px; font-size: 1.8rem; }
.privacy-text { color: var(--ph-text); line-height: 1.9; font-size: 1rem; opacity: .9; }
.privacy-block { margin-bottom: 40px; }
.privacy-highlight { background: rgba(229, 9, 20, .08); border-left: 4px solid var(--ph-color); padding: 20px 25px; border-radius: 0 12px 12px 0; margin: 20px 0; }
.privacy-highlight p { margin: 0; color: var(--ph-text); opacity: .95; }
.privacy-list { list-style: none; padding-left: 0; }
.privacy-list li { padding: 8px 0 8px 30px; position: relative; color: var(--ph-text); opacity: .9; }
.privacy-list li::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; color: var(--ph-accent); }
.privacy-note { background: rgba(245, 197, 24, .08); border: 1px solid rgba(245, 197, 24, .3); padding: 20px; border-radius: 12px; margin-top: 30px; }
.privacy-note p { color: var(--ph-text); opacity: .9; margin: 0; }
.contact-highlight { color: var(--ph-accent); font-weight: 600; }