:root{
      --main:#6d5dfc;
      --accent:#22d3ee;
      --bg:#0f1020;
      --text:#e8eaf6;
      --text-dim:#9fa3b8;
      --border-thick:3px solid #1d1f33;
      --shadow-hard:6px 6px 0px 0px #1d1f33;
    }
    *{font-family:'Inter',sans-serif;}
    body{
      background-color: var(--bg);
      color: var(--text);
      font-weight: 400;
      letter-spacing: 0.2px;
      overflow-x: hidden;
    }
    h1,h2,h3,h4,.display-title{
      font-weight: 900;
      color: var(--text);
    }
    .navbar{
      background: rgba(15,16,32,0.85);
      backdrop-filter: blur(10px);
      border-bottom: 3px solid #1d1f33;
      border-radius: 0 !important;
      margin-bottom: 0;
      padding: .8rem 1rem;
      z-index: 2000;
    }
    .navbar-brand{
      font-weight: 900;
      font-size: 1.8rem;
      color: var(--text) !important;
      letter-spacing: -0.5px;
      border: 2px solid var(--main);
      padding: 0.2rem 0.8rem;
      background: rgba(109,93,252,0.2);
      box-shadow: var(--shadow-hard);
    }
    .navbar-brand i{
      color: var(--accent);
      margin-right: 8px;
    }
    .nav-link{
      color: var(--text) !important;
      font-weight: 600;
      margin-left: 1rem;
      border-bottom: 2px solid transparent;
    }
    .nav-link:hover{
      border-bottom-color: var(--accent);
      color: var(--accent) !important;
    }
    .navbar-toggler{
      border: 2px solid var(--accent);
      background: transparent;
    }
    .navbar-toggler-icon{
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(34, 211, 238, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .hero{
      position: relative;
      min-height: 75vh;
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, #12142b 0%, #0b0c18 100%);
      border-bottom: 4px solid #1d1f33;
      overflow: hidden;
      background-attachment: fixed;
      background-position: center;
      background-size: cover;
    }
    .hero::before{
      content: '';
      position: absolute;
      top:0; left:0; right:0; bottom:0;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%230f1020" opacity="0.9"/><path d="M10 10 L 30 10 M 50 20 L 70 20 M 20 50 L 40 50 M 60 80 L 80 80" stroke="%236d5dfc" stroke-width="2" opacity="0.2"/></svg>');
      background-size: 80px 80px;
      opacity: 0.3;
    }
    .hero-content{
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
      padding: 4rem 1.5rem;
    }
    .hero h1{
      font-size: clamp(3rem, 10vw, 5rem);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.1;
      background: linear-gradient(90deg, var(--accent), var(--main));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 1.2rem;
    }
    .hero .subhead{
      font-size: 1.5rem;
      color: var(--text-dim);
      border-left: 6px solid var(--main);
      padding-left: 1rem;
      max-width: 640px;
    }
    .hero-buttons .btn{
      border-radius: 0;
      font-weight: 700;
      border: 2px solid var(--accent);
      padding: 0.7rem 2rem;
      margin-right: 1rem;
      box-shadow: 4px 4px 0 0 #1d1f33;
    }
    .btn-primary-custom{
      background: var(--main);
      color: #fff;
    }
    .btn-outline-accent{
      background: transparent;
      color: var(--accent);
      border-color: var(--accent);
    }
    .section-title{
      font-size: 2.6rem;
      font-weight: 900;
      border-bottom: 4px solid var(--main);
      display: inline-block;
      padding-bottom: 0.3rem;
      margin-bottom: 2rem;
    }
    .section-title i{
      color: var(--accent);
      margin-right: 12px;
    }
    .category-grid{
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
    }
    .cat-item{
      border: 2px solid #1d1f33;
      background: #1a1c33;
      padding: 0.7rem 1.8rem;
      font-weight: 700;
      color: var(--text);
      box-shadow: var(--shadow-hard);
      transition: 0.2s;
      border-radius: 0;
      font-size: 1.1rem;
    }
    .cat-item:hover{
      background: var(--main);
      color: #fff;
      transform: scale(1.02);
    }
    .movie-card{
      background: #181a2e;
      border: 2px solid #1d1f33;
      border-radius: 0;
      box-shadow: 4px 4px 0 #1d1f33;
      transition: all 0.25s cubic-bezier(.2,.7,.3,1);
      cursor: pointer;
      height: 100%;
      overflow: hidden;
      position: relative;
    }
    .movie-card:hover{
      transform: scale(1.03) translateY(-5px);
      box-shadow: 8px 8px 0 var(--main);
      border-color: var(--accent);
    }
    .poster-wrapper{
      position: relative;
      background: #12142b;
      overflow: hidden;
      aspect-ratio: 2/3;
      border-bottom: 2px solid #1d1f33;
    }
    .poster-wrapper img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .badge-quality{
      position: absolute;
      top: 8px;
      right: 8px;
      background: #0f1020cc;
      border: 1px solid var(--accent);
      color: var(--accent);
      font-weight: 700;
      padding: 2px 8px;
      font-size: 0.75rem;
      z-index: 5;
    }
    .card-body{
      padding: 0.8rem 1rem;
    }
    .movie-title{
      font-weight: 800;
      font-size: 1.1rem;
      margin-bottom: 4px;
      color: #fff;
    }
    .movie-meta{
      color: var(--text-dim);
      font-size: 0.85rem;
      font-family: 'Courier New', monospace;
    }
    .rating{
      color: var(--accent);
      font-weight: 700;
    }
    .flip-container{
      perspective: 1200px;
    }
    .flip-inner{
      transition: transform 0.6s;
      transform-style: preserve-3d;
      position: relative;
      width: 100%;
      height: 100%;
    }
    .movie-card.flipped .flip-inner{
      transform: rotateY(180deg);
    }
    .flip-front, .flip-back{
      backface-visibility: hidden;
      border-radius: 0;
    }
    .flip-back{
      position: absolute;
      top:0;left:0;
      width: 100%;
      height: 100%;
      transform: rotateY(180deg);
      background: #191b30;
      border: 2px solid var(--accent);
      padding: 1rem;
      overflow-y: auto;
      font-size: 0.9rem;
      box-shadow: inset 0 0 20px #00000055;
    }
    .flip-back h6{color: var(--accent); font-weight: 800; margin-bottom: 6px;}
    .flip-back p{color: var(--text-dim); font-size: 0.8rem;}
    .close-detail{
      position: absolute;
      top: 5px;
      right: 10px;
      font-size: 1.4rem;
      color: var(--accent);
      background: none;
      border: none;
      z-index: 10;
    }
    .rank-number{
      font-family: 'Courier New', monospace;
      font-size: 1.8rem;
      font-weight: 900;
      color: var(--main);
      text-shadow: 2px 2px 0 var(--accent);
    }
    .timeline{
      border-left: 4px solid var(--main);
      padding-left: 2rem;
      margin: 1.5rem 0;
    }
    .timeline-item{
      margin-bottom: 1.5rem;
      position: relative;
    }
    .timeline-item::before{
      content: '';
      position: absolute;
      left: -2.4rem;
      top: 0.2rem;
      width: 14px;
      height: 14px;
      background: var(--accent);
      border: 2px solid #1d1f33;
    }
    .faq-section .accordion-item{
      background: #181a2e;
      border: 2px solid #1d1f33;
      margin-bottom: 1rem;
    }
    .accordion-button{
      background: #1d1f33;
      color: var(--text);
      font-weight: 700;
    }
    .accordion-button:not(.collapsed){
      background: var(--main);
      color: white;
    }
    .footer{
      background: #0b0c18;
      border-top: 4px solid #1d1f33;
      padding: 2.5rem 0 1rem;
      margin-top: 3rem;
    }
    .footer a{
      color: var(--text-dim);
      text-decoration: none;
      font-weight: 500;
    }
    .footer a:hover{color: var(--accent);}
    .friend-links{
      border: 2px solid #1d1f33;
      padding: 1.5rem;
      background: #14162b;
      margin: 2rem 0;
    }
    #backToTop{
      position: fixed;
      bottom: 30px;
      right: 30px;
      background: var(--main);
      color: #fff;
      border: 2px solid var(--accent);
      box-shadow: 4px 4px 0 #1d1f33;
      padding: 8px 14px;
      font-size: 1.5rem;
      z-index: 3000;
      display: none;
      cursor: pointer;
    }
    #backToTop.show{display: block;}
    .tab-pane { background: transparent; }
    .nav-tabs .nav-link{
      border-radius: 0;
      border: 2px solid #1d1f33;
      background: #181a2e;
      color: var(--text);
      font-weight: 600;
      margin-right: 8px;
    }
    .nav-tabs .nav-link.active{
      background: var(--main);
      color: white;
      border-color: var(--accent);
    }
    .text-accent{color: var(--accent);}
    .bg-hard{background: #181a2e;}

/* --- 子页面追加 --- */
/* 关于页特有微调 */
        .about-hero {
            padding: 3.5rem 0 2.5rem;
            border-bottom: var(--border-thick);
        }
.about-hero .section-title {
            margin-bottom: 1.2rem;
        }
.about-content h2 {
            font-weight: 700;
            color: var(--main);
            letter-spacing: -0.02em;
            margin: 2.5rem 0 1.2rem;
            font-size: 1.8rem;
        }
.about-content h3 {
            color: var(--accent);
            font-weight: 600;
            margin: 2rem 0 1rem;
            font-size: 1.4rem;
        }
.about-content p {
            line-height: 1.8;
            color: var(--text);
            margin-bottom: 1.2rem;
            font-weight: 300;
        }
.about-content strong {
            color: var(--accent);
            font-weight: 600;
        }
.highlight-box {
            background: rgba(109, 93, 252, 0.08);
            border-left: 5px solid var(--main);
            padding: 1.5rem 2rem;
            margin: 2rem 0;
            border-radius: 0 12px 12px 0;
        }
.highlight-box p {
            margin-bottom: 0.5rem;
        }
.highlight-box p:last-child {
            margin-bottom: 0;
        }
.feature-list {
            list-style: none;
            padding-left: 0;
            margin: 1.5rem 0;
        }
.feature-list li {
            padding: 0.6rem 0 0.6rem 2.2rem;
            position: relative;
            font-weight: 300;
            border-bottom: 1px dashed rgba(157, 163, 184, 0.2);
        }
.feature-list li::before {
            content: "🥒";
            position: absolute;
            left: 0;
            top: 0.4rem;
            font-size: 1.2rem;
        }
.about-footer-note {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border-thick);
            color: var(--text-dim);
            font-style: italic;
        }
/* 覆盖 bootstrap 可能带来的白底问题 (栅格无组件, 但仍保险) */
        .container, .container-fluid, .row, .col-*, [class*="col-"] {
            background: transparent;
        }
.about-content {
            background: transparent;
        }

/* --- 子页面追加 --- */
.disclaimer-hero {
      padding: 80px 0 40px;
      background: var(--bg);
    }
.disclaimer-card {
      background: rgba(255,255,255,0.03);
      border: var(--border-thick);
      border-radius: 16px;
      padding: 30px;
      margin-bottom: 30px;
      box-shadow: var(--shadow-hard);
    }
.disclaimer-card h2 {
      color: var(--main);
      font-weight: 800;
      font-size: 1.5rem;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
.disclaimer-card h2 i {
      color: var(--accent);
    }
.disclaimer-card p {
      color: var(--text-dim);
      line-height: 1.8;
      margin-bottom: 14px;
    }
.disclaimer-card ul {
      color: var(--text-dim);
      padding-left: 20px;
      margin-bottom: 14px;
    }
.disclaimer-card ul li {
      margin-bottom: 8px;
      line-height: 1.7;
    }
.disclaimer-card strong {
      color: var(--text);
    }
.disclaimer-highlight {
      background: rgba(109,93,252,0.1);
      border-left: 4px solid var(--main);
      padding: 14px 18px;
      border-radius: 0 10px 10px 0;
      margin: 20px 0;
    }
.disclaimer-highlight p {
      margin-bottom: 0;
      color: var(--text);
    }
.update-date {
      color: var(--accent);
      font-size: 0.9rem;
      font-weight: 600;
      margin-top: 20px;
    }

/* --- 子页面追加 --- */
/* 页面专属小样式——观影指南排版 */
        .guide-hero { padding: 80px 0 40px; border-bottom: var(--border-thick); }
.guide-hero h1 { font-size: 2.8rem; font-weight: 900; color: var(--text); }
.guide-hero h1 span { color: var(--main); }
.guide-section { padding: 50px 0; border-bottom: 2px solid #1d1f33; }
.guide-section h2 { font-size: 1.9rem; font-weight: 800; color: var(--text); margin-bottom: 25px; position: relative; padding-left: 20px; }
.guide-section h2::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 5px; background: var(--accent); border-radius: 3px; }
.guide-card { background: rgba(255,255,255,0.03); border: 2px solid #1d1f33; border-radius: 12px; padding: 25px; margin-bottom: 20px; transition: all 0.3s ease; height: 100%; }
.guide-card:hover { border-color: var(--main); transform: translateY(-3px); box-shadow: var(--shadow-hard); }
.guide-card i { font-size: 2.2rem; color: var(--accent); margin-bottom: 15px; display: block; }
.guide-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.guide-card p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.7; margin-bottom: 0; }
.guide-card ul { color: var(--text-dim); font-size: 0.95rem; line-height: 1.9; padding-left: 18px; margin-bottom: 0; }
.guide-tip { background: rgba(109, 93, 252, 0.1); border-left: 4px solid var(--main); padding: 18px 22px; border-radius: 0 10px 10px 0; margin: 25px 0; }
.guide-tip i { color: var(--main); margin-right: 8px; }
.guide-tip strong { color: var(--text); }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: var(--main); color: #fff; font-weight: 800; border-radius: 50%; margin-right: 10px; font-size: 1rem; }
.table-guide { width: 100%; border-collapse: collapse; margin-top: 15px; }
.table-guide th { background: var(--main); color: #fff; padding: 12px 15px; text-align: left; font-weight: 600; font-size: 0.95rem; }
.table-guide td { padding: 12px 15px; border-bottom: 2px solid #1d1f33; color: var(--text-dim); font-size: 0.92rem; }
.table-guide tr:hover td { background: rgba(255,255,255,0.03); }
.faq-item { margin-bottom: 18px; }
.faq-item h4 { font-size: 1.1rem; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.faq-item h4 i { margin-right: 8px; font-size: 0.9rem; }
.faq-item p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.7; padding-left: 28px; margin-bottom: 0; }
.guide-hero h1 { font-size: 2rem; }
.guide-section h2 { font-size: 1.5rem; }

/* --- Bootstrap 组件配色适配(程序自动补,避免白底黑字) --- */
.accordion-body { background:transparent !important; color:#e8eaf6 !important; }
.accordion-header { background:transparent !important; }