*{margin:0;padding:0;box-sizing:border-box}
        :root{--gold:#d4a017;--dark:#1a1a2e;--dark2:#16213e;--light:#f8f9fa;--gray:#6c757d;--hover:#e6b800;--navy:#0f3460}
        body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:#f4f4f9;color:#222;line-height:1.75}
        a{color:var(--navy);text-decoration:none;transition:color .3s}
        a:hover{color:var(--gold)}
        .container{max-width:1200px;margin:0 auto;padding:0 20px}
        header{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);padding:0;position:sticky;top:0;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.5)}
        .header-top{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;flex-wrap:wrap;gap:10px}
        .my-logo{font-size:2.2em;font-weight:900;background:linear-gradient(45deg,#f7d774,#d4a017);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:2px;text-transform:uppercase;font-style:italic}
        .my-logo a{background:none;-webkit-text-fill-color:initial}
        .my-logo:hover{transform:scale(1.05)}
        .search-box{display:flex;gap:5px;max-width:300px;width:100%}
        .search-box input{flex:1;padding:8px 14px;border:none;border-radius:25px 0 0 25px;font-size:14px;background:#fff;outline:none}
        .search-box button{background:var(--gold);border:none;padding:0 15px;border-radius:0 25px 25px 0;color:#fff;cursor:pointer}
        .search-box button:hover{background:var(--hover)}
        nav.main-nav{background:rgba(0,0,0,.3);backdrop-filter:blur(10px)}
        .nav-links{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;padding:0 20px}
        .nav-links li{position:relative}
        .nav-links>li>a{display:block;padding:14px 22px;color:#e0e0e0;font-weight:600;text-transform:uppercase;font-size:.85em;letter-spacing:1px}
        .nav-links>li>a:hover,.nav-links>li.active>a{color:var(--gold);background:rgba(255,255,255,.05)}
        .dropdown-content{display:none;position:absolute;background:#22223b;min-width:220px;box-shadow:0 12px 30px rgba(0,0,0,.4);top:100%;left:0;z-index:50;border-radius:0 0 8px 8px}
        .nav-links li:hover .dropdown-content{display:block}
        .dropdown-content a{display:block;padding:10px 18px;color:#ccc;font-size:.9em;border-left:3px solid transparent}
        .dropdown-content a:hover{background:#333;color:var(--gold);border-left-color:var(--gold)}
        .hamburger{display:none;font-size:1.5em;color:#fff;background:none;border:none;cursor:pointer;padding:10px}
        .breadcrumb{background:linear-gradient(90deg,#e8d5b5,#f8f4ea);padding:12px 0;font-size:.85em;border-bottom:1px solid #e3d5c0}
        .breadcrumb ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
        .breadcrumb li::after{content:'›';margin:0 8px;color:var(--gray)}
        .breadcrumb li:last-child::after{content:''}
        .breadcrumb a{color:var(--navy)}
        .breadcrumb span{color:var(--gray)}
        .hero{background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="400" viewBox="0 0 1200 400"><rect width="100%" height="100%" fill="%2316203e"/><circle cx="200" cy="150" r="80" fill="%23d4a017" opacity="0.2"/><circle cx="600" cy="120" r="60" fill="%23f7d774" opacity="0.15"/><circle cx="900" cy="200" r="120" fill="%23e6b800" opacity="0.1"/><polygon points="80,200 120,160 160,200 120,240" fill="%23d4a017" opacity="0.4"/><polygon points="680,250 720,210 760,250 720,290" fill="%23f7d774" opacity="0.3"/><polygon points="1000,120 1040,80 1080,120 1040,160" fill="%23d4a017" opacity="0.3"/></svg>') center/cover no-repeat;background-color:var(--dark);color:#fff;padding:80px 0 60px;text-align:center}
        .hero h1{font-size:2.8em;font-weight:800;margin-bottom:15px;text-shadow:2px 4px 20px rgba(0,0,0,.5)}
        .hero p{font-size:1.1em;max-width:700px;margin:0 auto 25px;color:#ccc}
        .hero .btn{background:linear-gradient(135deg,var(--gold),#f7d774);color:#000;padding:14px 40px;border-radius:50px;font-weight:700;text-transform:uppercase;font-size:.9em;letter-spacing:1px;box-shadow:0 6px 20px rgba(212,160,23,.4);transition:all .3s}
        .hero .btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(212,160,23,.6)}
        .hero-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:40px}
        .stat i{font-size:2em;color:var(--gold)}
        .stat span{display:block;font-weight:800;font-size:1.3em}
        .stat small{color:#bbb;font-size:.8em}
        .content-wrap{display:grid;grid-template-columns:1fr 300px;gap:30px;margin:40px 0}
        .content main{background:#fff;border-radius:16px;padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
        .content aside{background:#fff;border-radius:16px;padding:25px;box-shadow:0 4px 20px rgba(0,0,0,.06);height:fit-content;position:sticky;top:100px}
        h2{font-size:1.8em;color:var(--dark);margin:35px 0 15px;padding-left:14px;border-left:5px solid var(--gold)}
        h2::before{content:'';display:block;width:60px;height:3px;background:var(--gold);margin-bottom:8px}
        h3{font-size:1.3em;color:var(--navy);margin:25px 0 12px}
        h4{font-size:1.1em;color:var(--dark2);margin:18px 0 8px}
        p{margin-bottom:1em;text-align:justify}
        ul,ol{margin:10px 0 20px 25px}
        li{margin-bottom:6px}
        .blockquote{background:#f8f4ea;border-left:5px solid var(--gold);padding:15px 20px;margin:20px 0;border-radius:0 8px 8px 0;font-style:italic}
        .blockquote strong{color:var(--navy)}
        .img-container{margin:25px 0;text-align:center;background:#fafafa;padding:15px;border-radius:12px}
        .img-container img{max-width:100%;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.1)}
        .img-container figcaption{font-size:.85em;color:var(--gray);margin-top:8px}
        .table-wrap{overflow-x:auto;margin:20px 0}
        table{width:100%;border-collapse:collapse;font-size:.9em}
        table th{background:var(--navy);color:#fff;padding:12px;text-align:left}
        table td{padding:12px;border-bottom:1px solid #e9ecef}
        table tr:hover td{background:#f8f9fa}
        .callout{background:linear-gradient(135deg,#eef4fb,#f0f7ff);border-radius:10px;padding:15px 20px;margin:20px 0;border-left:4px solid #4285f4}
        .callout i{color:#4285f4;margin-right:15px}
        .tip-box{background:#f0fff4;border-left:5px solid #38a169;padding:15px 20px;margin:20px 0;border-radius:0 8px 8px 0}
        .tip-box i{color:#38a169;margin-right:10px}
        .aside-widget{margin-bottom:30px}
        .aside-widget h3{font-size:1.1em;border-bottom:2px solid var(--gold);padding-bottom:8px;color:var(--dark)}
        .quick-links a{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #f0f0f0;color:#333}
        .quick-links a:hover{color:var(--gold);transform:translateX(4px)}
        .score-display{text-align:center;padding:10px}
        .stars{color:var(--gold);font-size:1.2em;letter-spacing:5px}
        .rating-num{font-size:2em;font-weight:800;color:var(--dark)}
        .comments-section{margin:30px 0}
        .comment{jdisplay:flex;gap:15px;padding:15px;border-bottom:1px solid #eee}
        .comment .avatar{width:50px;height:50px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
        .comment h4{color:var(--dark);font-size:1em}
        .comment .date{font-size:.75em;color:var(--gray)}
        .comment p{font-size:.9em;text-align:left}
        .comment-form textarea,.comment-form input{width:100%;padding:10px;border:2px solid #e9ecef;border-radius:8px;margin-bottom:12px;font-family:inherit}
        .comment-form textarea{min-height:100px;resize:vertical}
        .comment-form button{background:var(--navy);color:#fff;border:none;padding:10px 30px;border-radius:25px;cursor:pointer;font-size:.9em}
        .comment-form button:hover{background:var(--gold);color:#000}
        .search-full{background:#fff;border-radius:16px;padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.06);margin:30px 0;text-align:center}
        .search-full form{display:flex;max-width:500px;margin:15px auto;gap:8px}
        .search-full input{flex:1;padding:12px 20px;border:2px solid #e9ecef;border-radius:25px 0 0 25px;font-size:1em;outline:none}
        .search-full button{padding:12px 30px;background:var(--gold);border:none;border-radius:0 25px 25px 0;color:#fff;cursor:pointer;font-size:1em}
        .search-full button:hover{background:var(--hover)}
        footer{background:linear-gradient(135deg,#0f0c29,#1a1a2e);color:#aaa;padding:50px 0 20px}
        .footer-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:30px}
        .footer-top h4{color:#fff;margin-bottom:15px;font-size:1em;text-transform:uppercase;letter-spacing:1px}
        .footer-top ul{list-style:none;margin:0;padding:0}
        .footer-top ul li{margin-bottom:8px}
        .footer-top ul li a{color:#aaa;font-size:.9em}
        .footer-top ul li a:hover{color:var(--gold)}
        .footer-bottom{border-top:1px solid #333;padding-top:20px;text-align:center}
        .footer-bottom p{font-size:.8em;color:#777;text-align:center}
        friend-link{display:block;margin:20px 0;text-align:center;font-size:.85em;color:#888}
        friend-link a{color:#aaa;margin:0 10px}
        friend-link a:hover{color:var(--gold)}
        @media(max-width:900px){
            .content-wrap{grid-template-columns:1fr}
            .content aside{position:static;margin-top:30px}
            .hero h1{font-size:2em}
        }
        @media(max-width:768px){
            .nav-links{display:none;flex-direction:column;width:100%}
            .nav-links.show{display:flex}
            .nav-links>li>a{padding:12px 20px}
            .dropdown-content{position:static;display:none;background:#333;width:100%}
            .nav-links li:hover .dropdown-content{display:block}
            .hamburger{display:block;margin-left:auto}
            .header-top{flex-wrap:wrap}
            .search-box{order:3;max-width:100%}
        }
        @media(max-width:480px){
            .hero{background-position:60% center}
            .hero h1{font-size:1.5em}
            .hero .btn{font-size:.8em}
            .content main,.content aside{padding:15px}
            h2{font-size:1.4em}
            td,th{padding:6px}
            .footer-top{grid-template-columns:1fr}
        }