* ,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
        :root{
            --batman-black:#0a0a0f;
            --batman-dark:#14141d;
            --batman-gray:#1e1e2d;
            --batman-yellow:#ffd700;
            --batman-white:#f5f5fa;
            --batman-muted:#a0a0b8;
            --batman-accent:#252537;
        }
        html{scroll-behavior:smooth}
        body{
            font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
            background:var(--batman-black);
            color:var(--batman-white);
            line-height:1.75;
            font-size:16px;
            overflow-x:hidden;
        }
        a{color:var(--batman-yellow);text-decoration:none;transition:all .3s ease}
        a:hover{color:#fff;text-decoration:underline}
        img{max-width:100%;height:auto;display:block}
        .container{max-width:1240px;margin:0 auto;padding:0 20px;width:100%}
        .site-header{
            background:linear-gradient(180deg,var(--batman-dark),var(--batman-black));
            border-bottom:1px solid var(--batman-accent);
            position:sticky;top:0;z-index:1000;
            box-shadow:0 2px 20px rgba(0,0,0,0.6);
        }
        .header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;flex-wrap:wrap}
        .my-logo{
            font-size:2rem;font-weight:900;letter-spacing:2px;
            color:var(--batman-yellow);
            text-shadow:0 0 20px rgba(255,215,0,0.3);
            display:flex;align-items:center;gap:10px;
            text-decoration: none !important;
        }
        .my-logo i{font-size:1.8rem}
        .my-logo:hover{color:var(--batman-yellow);text-decoration:none;transform:scale(1.02)}
        .nav-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--batman-white);cursor:pointer;padding:8px}
        .main-nav ul{display:flex;list-style:none;gap:24px}
        .main-nav a{color:var(--batman-white);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;padding:6px 4px;border-bottom:2px solid transparent}
        .main-nav a:hover{border-bottom-color:var(--batman-yellow);color:var(--batman-yellow);text-decoration:none}
        .nav-search{display:flex;align-items:center;gap:8px}
        .nav-search input{background:var(--batman-black);border:1px solid var(--batman-accent);color:var(--batman-white);padding:6px 14px;border-radius:20px;font-size:.9rem;outline:none;width:140px;transition:width .3s}
        .nav-search input:focus{width:200px;border-color:var(--batman-yellow)}
        .nav-search button{background:var(--batman-yellow);border:none;color:var(--batman-black);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}
        .nav-search button:hover{transform:scale(1.1)}
        .breadcrumb{background:var(--batman-dark);padding:12px 0;border-bottom:1px solid var(--batman-accent);font-size:.85rem}
        .breadcrumb-list{display:flex;list-style:none;flex-wrap:wrap;gap:8px}
        .breadcrumb-list li:not(:last-child)::after{content:"›";margin-left:8px;color:var(--batman-muted)}
        .breadcrumb-list a{color:var(--batman-muted)}
        .breadcrumb-list a:hover{color:var(--batman-yellow)}
        .breadcrumb-list .current{color:var(--batman-yellow)}
        .hero{
            position:relative;padding:60px 0;overflow:hidden;
            background:radial-gradient(ellipse at center,var(--batman-gray),var(--batman-black));
        }
        .hero::before{
            content:"BATMAN";position:absolute;font-size:18vw;font-weight:900;
            color:rgba(255,255,255,0.03);top:50%;left:50%;transform:translate(-50%,-50%);
            white-space:nowrap;letter-spacing:10px;pointer-events:none;
        }
        .hero-content{position:relative;text-align:center;padding:20px}
        .hero h1{
            font-size:3.2rem;font-weight:900;color:var(--batman-yellow);
            text-transform:uppercase;letter-spacing:4px;line-height:1.2;
            text-shadow:0 0 30px rgba(255,215,0,0.5);
            margin-bottom:10px;
        }
        .hero p{font-size:1.2rem;color:var(--batman-muted);max-width:700px;margin:0 auto}
        .hero-tagline{font-size:1rem;color:var(--batman-muted);margin-top:20px;font-style:italic}
        .hero-badge{
            display:inline-block;background:var(--batman-yellow);color:var(--batman-black);
            padding:6px 20px;border-radius:30px;font-weight:700;font-size:.9rem;margin-top:16px;
            letter-spacing:1px;
        }
        .article-wrapper{padding:40px 0}
        .article-layout{display:grid;grid-template-columns:1fr 300px;gap:40px}
        .article-main{min-width:0}
        .article-sidebar{position:sticky;top:100px;align-self:start}
        .content-section{margin-bottom:50px}
        .content-section h2{
            font-size:2rem;color:var(--batman-yellow);
            border-left:4px solid var(--batman-yellow);
            padding-left:16px;margin-bottom:20px;line-height:1.3;
            font-weight:800;
        }
        .content-section h3{
            font-size:1.4rem;color:var(--batman-white);
            margin:25px 0 12px;font-weight:700;
        }
        .content-section h4{
            font-size:1.1rem;color:var(--batman-muted);
            margin:18px 0 10px;font-weight:600;font-style:italic;
        }
        .content-section p{margin-bottom:16px;line-height:1.8;color:#d0d0e0}
        .content-section ul,.content-section ol{margin:0 0 20px 20px;color:#d0d0e0}
        .content-section li{margin-bottom:8px}
        .highlight-box{
            background:var(--batman-dark);
            border-left:4px solid var(--batman-yellow);
            padding:20px;margin:24px 0;border-radius:0 8px 8px 0;
            font-size:1rem;
        }
        .highlight-box strong{color:var(--batman-yellow)}
        .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:24px 0}
        .stat-card{
            background:var(--batman-dark);padding:20px;border-radius:12px;
            text-align:center;border:1px solid var(--batman-accent);
            transition:transform .3s;
        }
        .stat-card:hover{transform:translateY(-4px);border-color:var(--batman-yellow)}
        .stat-card .stat-num{font-size:2rem;font-weight:900;color:var(--batman-yellow)}
        .stat-card .stat-label{font-size:.85rem;color:var(--batman-muted);margin-top:4px}
        .featured-image{margin:20px 0;border-radius:12px;overflow:hidden;border:1px solid var(--batman-accent)}
        .featured-image img{width:100%;object-fit:cover}
        .featured-image figcaption{background:var(--batman-dark);padding:10px 16px;font-size:.85rem;color:var(--batman-muted);font-style:italic}
        .sidebar-card{
            background:var(--batman-dark);border-radius:12px;padding:20px;
            margin-bottom:20px;border:1px solid var(--batman-accent);
        }
        .sidebar-card h3{color:var(--batman-yellow);font-size:1.1rem;margin-bottom:12px;border-bottom:1px solid var(--batman-accent);padding-bottom:8px}
        .sidebar-list{list-style:none}
        .sidebar-list li{margin-bottom:10px;font-size:.9rem}
        .sidebar-list a{color:var(--batman-white)}
        .sidebar-list a:hover{color:var(--batman-yellow)}
        .data-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.9rem}
        .data-table thead th{background:var(--batman-yellow);color:var(--batman-black);padding:12px;text-align:left;font-weight:700}
        .data-table tbody td{padding:12px;border-bottom:1px solid var(--batman-accent)}
        .data-table tbody tr:nth-child(even){background:var(--batman-dark)}
        .data-table tbody tr:hover{background:var(--batman-accent)}
        .comment-section{margin-top:40px}
        .comment-form{background:var(--batman-dark);padding:24px;border-radius:12px;margin-bottom:30px}
        .comment-form h3{color:var(--batman-yellow);margin-bottom:16px}
        .form-group{margin-bottom:16px}
        .form-group label{display:block;font-size:.9rem;color:var(--batman-muted);margin-bottom:4px}
        .form-group input,.form-group textarea{
            width:100%;background:var(--batman-black);border:1px solid var(--batman-accent);
            padding:10px 14px;border-radius:8px;color:var(--batman-white);font-size:.95rem;outline:none;
            transition:border-color .3s;
        }
        .form-group input:focus,.form-group textarea:focus{border-color:var(--batman-yellow)}
        .form-group textarea{min-height:100px;resize:vertical}
        .btn-submit{
            background:var(--batman-yellow);color:var(--batman-black);
            border:none;padding:12px 28px;border-radius:8px;font-weight:700;
            cursor:pointer;transition:transform .2s,box-shadow .2s;
            display:inline-flex;align-items:center;gap:8px;
        }
        .btn-submit:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(255,215,0,0.3)}
        .comment-list{list-style:none}
        .comment-item{background:var(--batman-dark);padding:16px;border-radius:10px;margin-bottom:12px}
        .comment-item .comment-author{font-weight:700;color:var(--batman-yellow);font-size:.9rem}
        .comment-item .comment-date{font-size:.8rem;color:var(--batman-muted);margin-left:10px}
        .comment-item .comment-body{margin-top:8px;font-size:.95rem;color:#d0d0e0}
        .rating-section{background:var(--batman-dark);padding:24px;border-radius:12px;margin:30px 0}
        .rating-section h3{color:var(--batman-yellow);margin-bottom:12px}
        .star-rating{display:flex;gap:6px;font-size:1.6rem;cursor:pointer;margin:12px 0}
        .star-rating i{color:var(--batman-accent);transition:color .2s}
        .star-rating i.active,.star-rating i:hover{color:var(--batman-yellow)}
        .rating-stats{display:flex;align-items:center;gap:16px;margin-top:12px;font-size:.9rem}
        .rating-bar{width:30%;height:6px;background:var(--batman-accent);border-radius:3px;overflow:hidden}
        .rating-bar-fill{height:100%;background:var(--batman-yellow);border-radius:3px}
        .search-section{background:var(--batman-dark);padding:24px;border-radius:12px;margin:30px 0}
        .search-section form{display:flex;gap:10px}
        .search-section input{
            flex:1;background:var(--batman-black);border:1px solid var(--batman-accent);
            padding:12px 16px;border-radius:30px;color:var(--batman-white);font-size:1rem;outline:none;
        }
        .search-section input:focus{border-color:var(--batman-yellow)}
        .search-section button{
            background:var(--batman-yellow);border:none;color:var(--batman-black);
            width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1rem;
            display:flex;align-items:center;justify-content:center;transition:transform .2s;
        }
        .search-section button:hover{transform:scale(1.1)}
        .site-footer{
            background:var(--batman-dark);
            border-top:2px solid var(--batman-yellow);
            padding:40px 0 20px;
            margin-top:40px;
        }
        .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:20px}
        .footer-grid h4{color:var(--batman-yellow);font-size:1.1rem;margin-bottom:12px}
        .footer-links{list-style:none}
        .footer-links li{margin-bottom:8px;font-size:.85rem}
        .footer-links a{color:var(--batman-muted)}
        .footer-links a:hover{color:var(--batman-yellow)}
        .copyright{
            text-align:center;padding-top:20px;border-top:1px solid var(--batman-accent);
            font-size:.8rem;color:var(--batman-muted);
        }
        friend-link{display:block;margin:10px 0;font-size:.9rem}
        friend-link a{color:var(--batman-muted)}
        friend-link a:hover{color:var(--batman-yellow)}
        @media(max-width:920px){
            .article-layout{grid-template-columns:1fr}
            .article-sidebar{position:static;margin-top:30px}
            .nav-toggle{display:block}
            .main-nav{
                display:none;width:100%;
                order:3;background:var(--batman-dark);
                padding:16px;border-radius:0 0 12px 12px;
            }
            .main-nav.open{display:block}
            .main-nav ul{flex-direction:column;gap:12px}
            .nav-search{width:100%;margin-top:12px}
            .nav-search input,.nav-search input:focus{width:100%}
            .hero h1{font-size:2rem}
            .header-inner{gap:10px}
        }
        @media(max-width:480px){
            .hero h1{font-size:1.6rem;letter-spacing:2px}
            .hero p{font-size:1rem}
            .content-section h2{font-size:1.5rem}
            .stat-grid{grid-template-columns:repeat(2,1fr)}
        }