*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:#f5f5f0;color:#2c2c2c;line-height:1.75}
        a{color:#1a5f7a;text-decoration:none}a:hover{color:#c9a227}
        .container{max-width:1200px;margin:0 auto;padding:0 16px}
        .my-logo{font-size:2rem;font-weight:800;color:#fff;letter-spacing:-0.5px;text-decoration:none}.my-logo span{color:#c9a227}
        .top-header{background:linear-gradient(135deg,#0f1c2e 0%,#1a2a3a 100%);padding:16px 0;border-bottom:3px solid #c9a227;position:sticky;top:0;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,.15)}
        .header-flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
        .nav-links{display:flex;gap:24px;list-style:none}
        .nav-links a{color:#c0c8d0;font-size:.9rem;font-weight:600;transition:color .3s}.nav-links a:hover{color:#c9a227}
        .hamburger{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}
        @media(max-width:768px){.hamburger{display:block}.nav-links{display:none;width:100%;flex-direction:column;padding:16px 0;gap:12px}.nav-links.open{display:flex}.nav-links a{font-size:1.1rem}}
        .breadcrumb{background:#e8e6df;padding:10px 0;font-size:.85rem;color:#555}
        .breadcrumb a{color:#1a5f7a}.breadcrumb span{margin:0 6px;color:#999}
        .banner{position:relative;background:linear-gradient(135deg,#0f1c2e,#20304a);color:#fff;padding:48px 0;text-align:center;overflow:hidden}
        .banner::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(201,162,39,.15) 0%,transparent 60%);animation:glow 8s ease-in-out infinite}
        @keyframes glow{0%,100%{opacity:.5}50%{opacity:1}}
        .banner h1{font-size:3rem;position:relative;z-index:1}.banner p{font-size:1.2rem;margin-top:12px;position:relative;z-index:1}
        .last-updated{display:inline-block;background:rgba(201,162,39,.2);padding:4px 12px;border-radius:20px;font-size:.8rem;margin-top:12px}
        @media(max-width:768px){.banner h1{font-size:2rem}.banner p{font-size:1rem}}
        main{padding:40px 0}
        .content-grid{display:grid;grid-template-columns:1fr 300px;gap:40px}
        @media(max-width:992px){.content-grid{grid-template-columns:1fr}}
        .sidebar{position:sticky;top:100px;height:fit-content}
        .sidebar-card{background:#fff;border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
        .sidebar-card h3{font-size:1rem;margin-bottom:12px;color:#1a2a3a}
        .sidebar-card a{display:block;padding:6px 0;font-size:.9rem;border-bottom:1px solid #f0eee8}
        .sidebar-card a:hover{color:#c9a227}
        .article{background:#fff;border-radius:16px;padding:36px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
        .article h2{font-size:1.8rem;color:#1a2a3a;margin-top:36px;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid #c9a227}
        .article h3{font-size:1.3rem;color:#1a2a3a;margin-top:28px;margin-bottom:12px}
        .article h4{font-size:1.1rem;color:#555;margin-top:20px;margin-bottom:8px}
        .article p{margin-bottom:16px}
        .article ul,.article ol{margin:16px 0;padding-left:24px}
        .article li{margin-bottom:8px}
        .feature-image{width:100%;height:auto;border-radius:12px;margin:24px 0;box-shadow:0 4px 16px rgba(0,0,0,.1)}
        .highlight-box{background:#f0eee8;border-left:4px solid #c9a227;padding:16px 20px;border-radius:0 8px 8px 0;margin:24px 0}
        .stat-table{width:100%;border-collapse:collapse;margin:20px 0}
        .stat-table th,.stat-table td{padding:10px 16px;border-bottom:1px solid #e8e6df;text-align:left}
        .stat-table th{background:#1a2a3a;color:#fff}
        .stat-table tr:hover{background:#f9f8f4}
        .quote-block{border-left:4px solid #c9a227;background:#f9f8f4;padding:20px;margin:24px 0;font-style:italic}
        .rating-section,.comment-section,.search-section{background:#fff;border-radius:16px;padding:28px;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
        .rating-stars{display:flex;gap:8px;font-size:1.5rem;color:#c9a227;cursor:pointer;margin:16px 0}
        .rating-stars i:hover{transform:scale(1.2);transition:transform .2s}
        .btn{display:inline-block;background:#1a5f7a;color:#fff;padding:12px 24px;border-radius:8px;border:none;font-size:.95rem;cursor:pointer;transition:background .3s}
        .btn:hover{background:#c9a227}
        .form-group{margin-bottom:16px}
        .form-group label{display:block;font-weight:600;margin-bottom:6px}
        .form-group input,.form-group textarea{width:100%;padding:10px 14px;border:1px solid #d0cec6;border-radius:8px;font-size:.95rem}
        .form-group input:focus,.form-group textarea:focus{border-color:#c9a227;outline:none}
        .friend-links{background:#1a2a3a;color:#fff;padding:48px 0 20px}
        .friend-links a{color:#c9a227;margin-right:16px}
        .copyright{background:#0f1c2e;color:#88a;padding:16px 0;text-align:center;font-size:.85rem}
        .toc{background:#f9f8f4;border-radius:8px;padding:20px;margin:24px 0}
        .toc h3{margin-bottom:8px}.toc ul{list-style:none;padding:0}
        .toc li{padding:4px 0}.toc a{color:#1a5f7a}
        .two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
        @media(max-width:600px){.two-col{grid-template-columns:1fr}}
        .faq-item{margin-bottom:16px}
        .faq-item h4{font-weight:700}
        .author-box{background:#f9f8f4;border-radius:8px;padding:16px;margin:24px 0;display:flex;gap:16px;align-items:center}
        .avatar{width:48px;height:48px;border-radius:50%;background:#1a5f7a;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
        .tag{display:inline-block;background:#e8e6df;padding:4px 12px;border-radius:20px;font-size:.75rem;margin-right:6px}
        .pro-tip{background:#d4edda;border-radius:8px;padding:12px 16px;margin:16px 0}
        .warning{background:#fff3cd;border-radius:8px;padding:12px 16px;margin:16px 0}