*{margin:0;padding:0;box-sizing:border-box}
        html{scroll-behavior:smooth;font-size:16px}
        body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;background:#f8f9fc;color:#1a1a2e;line-height:1.7;-webkit-font-smoothing:antialiased}
        a{color:#d63031;text-decoration:none;transition:all .2s}
        a:hover{color:#b71c1c}
        img{max-width:100%;height:auto;display:block}
        .container{max-width:1240px;margin:0 auto;padding:0 20px}
        .site-header{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);padding:15px 0;position:sticky;top:0;z-index:1000;box-shadow:0 4px 20px rgba(0,0,0,.15)}
        .header-flex{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
        .my-logo{font-size:2rem;font-weight:900;letter-spacing:-1px;color:#ffe100;text-transform:uppercase;text-shadow:0 2px 10px rgba(255,225,0,.3)}
        .my-logo span{color:#fff}
        .my-logo:hover{color:#ffdd00;transform:scale(1.02)}
        .nav-menu{display:flex;list-style:none;gap:0}
        .nav-menu li a{display:block;padding:10px 14px;color:#fff;font-weight:600;font-size:.9rem;border-radius:6px;transition:background .2s}
        .nav-menu li a:hover{background:rgba(255,255,255,.12);color:#ffe100}
        .hamburger{display:none;cursor:pointer;font-size:1.6rem;color:#fff;border:none;background:none;padding:8px}
        .breadcrumb{background:#fff;border-bottom:1px solid #eee;padding:10px 0;font-size:.85rem}
        .breadcrumb ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
        .breadcrumb li+li::before{content:"›";margin-right:6px;color:#aaa}
        .breadcrumb a{color:#555}
        .breadcrumb a:hover{color:#d63031}
        .hero{background:linear-gradient(135deg,#f6d365,#fda085);padding:40px 0;text-align:center;position:relative;overflow:hidden}
        .hero h1{font-size:2.8rem;font-weight:900;color:#1a1a2e;margin-bottom:10px;line-height:1.2}
        .hero p{font-size:1.1rem;color:#2d2d2d;max-width:700px;margin:0 auto}
        .content-grid{display:grid;grid-template-columns:1fr 340px;gap:30px;padding:40px 0}
        .main-content{background:#fff;border-radius:16px;padding:35px;box-shadow:0 4px 24px rgba(0,0,0,.06)}
        .sidebar{display:flex;flex-direction:column;gap:20px}
        .card{background:#fff;border-radius:14px;padding:24px;box-shadow:0 2px 16px rgba(0,0,0,.05)}
        .card h3{font-size:1.1rem;margin-bottom:15px;color:#2d2d2d;border-left:4px solid #d63031;padding-left:10px}
        .card ul{list-style:none}
        .card ul li{margin-bottom:8px;font-size:.9rem}
        .card ul li a{color:#555}
        .card ul li a:hover{color:#d63031}
        h2{font-size:2rem;margin:50px 0 20px;color:#1a1a2e;font-weight:800;position:relative;padding-bottom:10px}
        h2::after{content:"";position:absolute;bottom:0;left:0;width:50px;height:4px;background:#d63031;border-radius:2px}
        h3{font-size:1.4rem;margin:35px 0 12px;color:#2d2d2d;font-weight:700}
        h4{font-size:1.15rem;margin:20px 0 8px;color:#555;font-weight:600}
        p{margin-bottom:15px}
        .last-updated{background:#fff5f5;display:inline-block;padding:6px 14px;border-radius:20px;font-size:.85rem;color:#d63031;font-weight:600;margin-bottom:20px}
        .table-wrap{overflow-x:auto;margin:20px 0}
        table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:600px}
        table th{background:#1a1a2e;color:#fff;padding:12px;text-align:left;font-weight:600}
        table td{padding:10px 12px;border-bottom:1px solid #eee}
        table tr:hover td{background:#f9f9ff}
        .yt-card{display:grid;grid-template-columns:80px 1fr auto;gap:20px;align-items:center;background:#f9f9ff;border-radius:12px;padding:20px;margin-bottom:20px;border-left:4px solid #d63031}
        .yt-rank{font-size:2rem;font-weight:900;color:#d63031;text-align:center}
        .yt-info h4{font-size:1.2rem;margin-bottom:5px}
        .yt-info .meta{font-size:.85rem;color:#777}
        .yt-stats{text-align:right;font-size:.85rem}
        .badge{background:#e1f5e1;color:#2e7d32;padding:4px 12px;border-radius:20px;font-weight:600;font-size:.75rem}
        .search-box{background:linear-gradient(135deg,#0f0c29,#302b63);padding:30px;border-radius:16px;color:#fff}
        .search-box h3{color:#fff}
        .search-form{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
        .search-form input[type="text"]{flex:1;min-width:200px;padding:14px 18px;border:none;border-radius:8px;font-size:1rem}
        .search-form button{padding:14px 24px;background:#ffe100;border:none;border-radius:8px;font-weight:700;color:#1a1a2e;cursor:pointer;transition:transform .2s}
        .search-form button:hover{transform:scale(1.05)}
        .rating-stars{font-size:1.6rem;cursor:pointer;display:inline-flex;gap:4px}
        .rating-stars i{color:#bbb;transition:color .2s}
        .rating-stars i.active,.rating-stars i:hover{color:#ffc107}
        .comment-form textarea,.comment-form input{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:.95rem;margin-bottom:12px;resize:vertical}
        .comment-form button,.rating-form button{padding:12px 28px;background:#d63031;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:background .2s}
        .comment-form button:hover{background:#b71c1c}
        .faq details{background:#f9f9ff;border-radius:10px;padding:16px 20px;margin-bottom:10px;border:1px solid #eee}
        .faq summary{cursor:pointer;font-weight:700;font-size:1rem;color:#1a1a2e}
        .faq p{margin-top:8px;font-size:.95rem}
        .site-footer{background:#111;color:#aaa;padding:40px 0 20px;margin-top:40px}
        .site-footer friend-link{display:block;border:1px solid #333;border-radius:10px;padding:20px;margin-bottom:20px;font-style:normal}
        .site-footer friend-link a{color:#ccc;margin-right:8px}
        .site-footer friend-link a:hover{color:#ffe100}
        .copyright{text-align:center;font-size:.85rem;color:#666;padding-top:20px;border-top:1px solid #222}
        @media(max-width:992px){
            .content-grid{grid-template-columns:1fr}
            .hero h1{font-size:2.2rem}
            .yt-card{grid-template-columns:1fr 1fr;gap:10px}
            .yt-stats{text-align:left}
        }
        @media(max-width:768px){
            .hamburger{display:block}
            .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#1a1a2e;flex-direction:column;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
            .nav-menu.active{display:flex}
            .nav-menu li a{padding:14px 16px;border-radius:0}
            .main-content{padding:20px}
            .hero{padding:30px 0}
            .hero h1{font-size:1.8rem}
            h2{font-size:1.6rem}
            .yt-card{grid-template-columns:1fr}
        }
        @media(max-width:480px){
            .my-logo{font-size:1.5rem}
            .search-form input[type="text"]{min-width:100%}
            .search-form button{width:100%}
        }