:root{
  --ql-primary:#06b6d4;
  --ql-accent:#ec4899;
  --ql-bg:#0c0a1a;
  --ql-text:#e0f2fe;
  --ql-ink:#bae6fd;
  --ql-card:#151329;
  --ql-border:#2d2a4a;
}
body{
  background-color:var(--ql-bg);
  color:var(--ql-text);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:400;
  letter-spacing:.2px;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display-hero{font-weight:800;letter-spacing:-.02em;color:#fff;}
a{color:var(--ql-primary);text-decoration:none;}
a:hover{color:var(--ql-accent);}
.nav-classic{
  background:rgba(12,10,26,.75);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ql-border);
  padding:.85rem 2rem;
}
.brand-logo{font-size:1.8rem;font-weight:900;color:var(--ql-text);}
.brand-logo i{color:var(--ql-accent);margin-right:8px;}
.nav-links a{
  color:var(--ql-text);
  margin-left:1.5rem;
  font-weight:500;
  border-bottom:2px solid transparent;
  padding-bottom:4px;
  font-size:.95rem;
}
.nav-links a:hover{border-bottom-color:var(--ql-primary);}
.hero-mag{
  display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;
  padding:3rem 2rem 2rem;align-items:center;
  max-width:1400px;margin:0 auto;
}
.eyebrow{color:var(--ql-accent);letter-spacing:4px;font-weight:700;font-size:.9rem;}
.hero-title{font-size:3.8rem;line-height:1.1;}
.hero-desc{color:var(--ql-ink);max-width:520px;font-size:1.1rem;font-weight:300;margin-top:1rem;}
.btn-soft{border-radius:50px;padding:.5rem 1.5rem;font-weight:600;background:rgba(6,182,212,.1);border:1px solid var(--ql-primary);color:var(--ql-primary);}
.btn-soft:hover{background:var(--ql-primary);color:#0c0a1a;}
.btn-mag{border-radius:50px;padding:.5rem 1.5rem;font-weight:600;background:var(--ql-accent);border:none;color:#fff;}
.btn-mag:hover{background:#d63384;}
.signals-grid{display:grid;grid-template-columns:repeat(4,auto);gap:2rem;margin-top:2rem;}
.signal-item .num{font-family:'JetBrains Mono',monospace;font-size:1.8rem;font-weight:600;color:var(--ql-primary);}
.signal-item .label{font-size:.75rem;color:#8ea0bb;letter-spacing:1px;}
.hero-media img{width:100%;border-radius:24px;box-shadow:0 25px 40px -15px rgba(236,72,153,.3);border:1px solid #3b3659;aspect-ratio:4/3;object-fit:cover;}
.section-mag{max-width:1400px;margin:2rem auto;padding:0 2rem;}
.section-num{font-size:.85rem;letter-spacing:3px;color:var(--ql-primary);font-weight:600;}
.section-title{font-size:2.2rem;font-weight:800;margin:.25rem 0 1.2rem;}
.outline-card{
  background:rgba(21,19,41,.7);
  border:1px solid var(--ql-border);
  border-radius:22px;
  padding:1.5rem 1.8rem;
  backdrop-filter:blur(4px);
  transition:all .2s;
}
.outline-card:hover{transform:translateY(-3px);border-color:var(--ql-primary);}
.poster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:1.2rem;
  margin-top:1.5rem;
}
.poster-item{
  position:relative;
  cursor:pointer;
  transition:transform .2s;
  background:var(--ql-card);
  border-radius:16px;
  overflow:hidden;
  border:1px solid #2f2c4a;
  box-shadow:0 8px 18px rgba(0,0,0,.6);
}
.poster-item img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;transition:transform .4s ease;background:#1e1b33;}
.poster-item:hover img{transform:scale(1.06);}
.poster-info{
  position:absolute;left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(0,0,0,.92),transparent);
  color:#fff;padding:.7rem .8rem .5rem;
}
.poster-title{font-weight:700;font-size:.9rem;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.poster-rating{color:var(--ql-primary);font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:500;}
.badge-corner{position:absolute;top:6px;left:6px;background:var(--ql-accent);color:#fff;font-size:.58rem;font-weight:700;padding:.2rem .5rem;border-radius:20px;letter-spacing:.5px;}
.hot-badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);color:var(--ql-primary);font-size:.6rem;padding:.2rem .5rem;border-radius:20px;border:1px solid var(--ql-primary);}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.faq-card{background:#1c1930;border-left:4px solid var(--ql-accent);padding:1rem 1.4rem;border-radius:8px;}
.news-card{background:var(--ql-card);border-radius:18px;padding:1.2rem;border:1px solid var(--ql-border);transition:.2s;}
.news-card h4{font-size:1.1rem;}
.timeline-item{display:flex;gap:1.2rem;margin:1.5rem 0;position:relative;}
.timeline-dot{width:12px;height:12px;background:var(--ql-primary);border-radius:50%;margin-top:.5rem;box-shadow:0 0 0 4px rgba(6,182,212,.2);}
footer.footer-mag{
  background:#0e0d1d;border-top:1px solid #2c2a4a;padding:2rem 2rem 1rem;margin-top:3rem;
}
.footer-inner{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:2rem;}
.footer-copy{color:#8b87a8;font-size:.8rem;}
#backTop{
  position:fixed;right:30px;bottom:40px;background:var(--ql-accent);color:#fff;border:none;border-radius:50%;
  width:48px;height:48px;font-size:1.4rem;display:none;z-index:999;box-shadow:0 8px 18px #00000070;
}
#backTop.show{display:block;}
/* 抽屉弹窗 */
.drawer{
  position:fixed;bottom:0;left:0;right:0;background:rgba(10,10,20,.5);backdrop-filter:blur(4px);
  z-index:1000;display:none;align-items:flex-end;
}
.drawer-panel{
  background:#16152b;border-radius:28px 28px 0 0;padding:1.8rem 2rem 2.5rem;width:100%;
  animation:slideUp .3s ease;
  border-top:2px solid var(--ql-primary);
}
@keyframes slideUp{from{transform:translateY(120%);}to{transform:translateY(0);}}
.btn-close-x{background:none;border:none;color:#fff;font-size:1.8rem;float:right;}

/* --- 子页面追加 --- */
/* 页面专属微调 — 不影响全局 */
        .guide-hero { padding-top: 3.5rem; padding-bottom: 2rem; }
.article-meta { color: var(--ql-ink); font-size: .85rem; letter-spacing: .02em; }
.article-meta i { color: var(--ql-primary); margin-right: .3rem; }
.tip-box { border-left: 3px solid var(--ql-accent); padding: .75rem 1rem; margin: 1.5rem 0; background: rgba(236,72,153,.05); border-radius: 0 8px 8px 0; }
.tip-box p { margin-bottom: .3rem; color: var(--ql-text); }
.inline-tag { display: inline-block; background: rgba(6,182,212,.15); color: var(--ql-primary); padding: .15rem .6rem; border-radius: 30px; font-size: .75rem; margin-right: .5rem; }
.section-spacer { height: 1px; background: linear-gradient(90deg, transparent, var(--ql-border), transparent); margin: 2.5rem 0; }
.guide-news-card { background: var(--ql-card); border: 1px solid var(--ql-border); border-radius: 12px; padding: 1.25rem; transition: border-color .2s; }
.guide-news-card:hover { border-color: var(--ql-primary); }
.badge-new { background: var(--ql-accent); color: #fff; font-size: .65rem; padding: .2rem .55rem; border-radius: 20px; font-weight: 600; letter-spacing: .03em; }
.watchlist-suggest { background: rgba(6,182,212,.06); border-radius: 12px; padding: 1.5rem; margin-top: 2rem; }

/* --- 子页面追加 --- */
/* 确保 Bootstrap 组件不出现白底黑字 */
        .about-content, .about-content p, .about-content h2, .about-content h3 {
            color: var(--ql-text);
        }
.about-hero {
            background: linear-gradient(135deg, rgba(6,182,212,.08) 0%, rgba(236,72,153,.06) 100%);
            border-bottom: 1px solid var(--ql-border);
        }
.philosophy-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }
.philosophy-card {
            background: var(--ql-card);
            border: 1px solid var(--ql-border);
            border-radius: 16px;
            padding: 1.8rem 1.5rem;
            transition: all .3s ease;
            position: relative;
            overflow: hidden;
        }
.philosophy-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 3px;
            background: linear-gradient(90deg, var(--ql-primary), var(--ql-accent));
            opacity: 0;
            transition: opacity .3s;
        }
.philosophy-card:hover::before { opacity: 1; }
.philosophy-card:hover {
            border-color: var(--ql-primary);
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0,0,0,.3);
        }
.philosophy-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
            display: inline-block;
        }
.timeline-about {
            position: relative;
            padding-left: 2rem;
            margin-top: 2rem;
        }
.timeline-about::before {
            content: '';
            position: absolute;
            left: 8px; top: 0;
            width: 2px; height: 100%;
            background: linear-gradient(180deg, var(--ql-primary), var(--ql-accent));
            opacity: .4;
        }
.timeline-about .timeline-item {
            position: relative;
            padding-bottom: 1.8rem;
        }
.timeline-about .timeline-item::before {
            content: '';
            position: absolute;
            left: -1.9rem; top: 6px;
            width: 14px; height: 14px;
            border-radius: 50%;
            background: var(--ql-primary);
            border: 2px solid var(--ql-bg);
            box-shadow: 0 0 0 2px var(--ql-primary);
        }
.about-list {
            list-style: none;
            padding: 0;
            margin: 1.2rem 0 0 0;
        }
.about-list li {
            padding: .5rem 0 .5rem 1.8rem;
            position: relative;
            color: var(--ql-ink);
            border-bottom: 1px dashed rgba(45,42,74,.5);
        }
.about-list li:last-child { border-bottom: none; }
.about-list li::before {
            content: '\f058';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            left: 0; top: .5rem;
            color: var(--ql-accent);
            font-size: .9rem;
        }
.stat-badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(6,182,212,.1);
            border: 1px solid rgba(6,182,212,.3);
            border-radius: 100px;
            padding: .4rem 1rem;
            font-size: .85rem;
            color: var(--ql-primary);
            font-weight: 500;
            margin: .2rem;
        }
.stat-badge i { font-size: .8rem; }
.about-quote {
            border-left: 3px solid var(--ql-accent);
            padding: 1.2rem 1.5rem;
            background: rgba(236,72,153,.06);
            border-radius: 0 12px 12px 0;
            margin: 2rem 0;
            font-style: italic;
        }