* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Roboto, Arial, sans-serif; background: #f5f2e8; color: #2c2a2e; line-height: 1.75; }
        .wrapper { max-width: 1200px; margin: 0 auto; background: #fffdf8; box-shadow: 0 0 30px rgba(0,0,0,.05); }
        a { color: #9a7b2f; text-decoration: none; transition: .2s; }
        a:hover { color: #c39a45; text-decoration: underline; }
        header { background: linear-gradient(135deg, #101430 0%, #1d2145 100%); padding: 0; box-shadow: 0 4px 15px rgba(0,0,0,.4); }
        .header-top { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; flex-wrap: wrap; }
        .my-logo { font-size: 1.9rem; font-weight: 800; letter-spacing: 1px; color: #f0c75e !important; text-shadow: 2px 2px 0 #1a1a3e; }
        .my-logo i { margin-right: 5px; color: #f0c75e; }
        .search-box { display: flex; }
        .search-box input { padding: 7px 12px; border: 1px solid #ccc; border-radius: 30px 0 0 30px; outline: none; width: 180px; }
        .search-box button { background: #f0c75e; border: none; padding: 7px 14px; border-radius: 0 30px 30px 0; color: #101430; cursor: pointer; }
        .search-box button:hover { background: #ffd977; }
        .nav-toggle { display: none; background: transparent; border: none; color: #f0c75e; font-size: 1.8rem; cursor: pointer; }
        nav { background: #171a38; padding: 0 20px; }
        nav .menu { display: flex; list-style: none; flex-wrap: wrap; }
        nav .menu li a { display: block; padding: 12px 18px; color: #ddd; font-weight: 500; font-size: .95rem; }
        nav .menu li a:hover { color: #f0c75e; background: #22264a; text-decoration: none; border-radius: 6px; }
        .breadcrumb { background: #eee7d0; padding: 9px 30px; font-size: .85rem; color: #666; }
        .breadcrumb a { color: #7a623d; }
        main { padding: 30px; display: grid; grid-template-columns: 1fr 260px; gap: 30px; }
        article { font-size: 1.02rem; }
        article h1 { font-size: 2.2rem; color: #101430; border-left: 5px solid #f0c75e; padding-left: 20px; margin-bottom: 10px; line-height: 1.3; }
        .updated { background: #faf5e5; display: inline-block; padding: 5px 15px; border-radius: 30px; font-size: .8rem; color: #6b5a2a; }
        .meta-line { color: #888; font-size: .9rem; margin: 10px 0 20px; }
        article h2 { font-size: 1.6rem; color: #1a1a3e; border-bottom: 2px dashed #f0c75e; padding-bottom: 8px; margin: 35px 0 15px; }
        article h3 { font-size: 1.2rem; color: #2e2e58; margin: 25px 0 10px; }
        article h4 { font-size: 1.05rem; color: #6b5a2a; margin: 18px 0 8px; font-style: italic; }
        article p { margin-bottom: 15px; }
        article ul, article ol { margin: 0 0 18px 25px; }
        article li { margin-bottom: 6px; }
        .featured-img { width: 100%; height: auto; border-radius: 12px; margin: 20px 0; box-shadow: 0 5px 20px rgba(0,0,0,.12); }
        .img-caption { font-size: .8rem; color: #888; text-align: center; margin-top: -12px; margin-bottom: 20px; }
        .info-box { background: #eef0ff; border-left: 5px solid #3a3f8a; padding: 15px 20px; border-radius: 8px; margin: 20px 0; }
        .info-box i { color: #3a3f8a; margin-right: 6px; }
        table { width: 100%; border-collapse: collapse; margin: 20px 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.03); }
        th { background: #101430; color: #f0c75e; padding: 10px 15px; text-align: left; }
        td { padding: 10px 15px; border-bottom: 1px solid #eee; }
        tr:hover td { background: #faf6ec; }
        .review-box { background: #f8f4ea; border-radius: 12px; padding: 20px; margin: 20px 0; border: 1px solid #e4dcc3; }
        blockquote { background: #f6f0e0; border-left: 4px solid #f0c75e; padding: 15px 20px; margin: 15px 0; border-radius: 0 10px 10px 0; font-style: italic; }
        .star { color: #f0b800; }
        .aside-panel { display: flex; flex-direction: column; gap: 20px; }
        .widget { background: #faf7f0; border-radius: 12px; padding: 20px; margin-bottom: 25px; border: 1px solid #e6e0d0; }
        .widget h3 { font-size: 1rem; color: #101430; border-bottom: 2px solid #f0c75e; padding-bottom: 8px; margin-bottom: 10px; }
        .widget ul { list-style: none; margin: 0; }
        .widget li { margin-bottom: 8px; border-bottom: 1px dashed #e0dac0; padding-bottom: 6px; }
        .widget li a { display: flex; align-items: center; gap: 6px; }
        .widget li i { font-size: .7rem; color: #f0c75e; }
        .comment-form, .score-form { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.04); margin: 20px 0; }
        .comment-form input, .comment-form textarea, .score-form input, .score-form textarea { width: 100%; padding: 10px; margin: 8px 0 14px; border: 1px solid #ddd; border-radius: 6px; font-family: inherit; }
        .comment-form button, .score-form button { background: #1a1a3e; color: #f0c75e; border: none; padding: 10px 30px; border-radius: 30px; cursor: pointer; font-size: .9rem; transition: .2s; }
        .comment-form button:hover, .score-form button:hover { background: #f0c75e; color: #101430; }
        .rate-btn { background: #f0c75e !important; color: #101430 !important; }
        footer { background: #101430; color: #b0b0cc; text-align: center; padding: 20px; font-size: .85rem; }
        .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 10px; }
        .footer-links a { color: #ddd; }
        .footer-links a:hover { color: #f0c75e; }
        friend-link { display: block; background: #1d2145; border-radius: 10px; color: #cfcfdf; margin: 15px 0; padding: 15px; }
        friend-link a { color: #f0c75e; margin: 0 12px; }
        @media (max-width: 860px) {
            main { grid-template-columns: 1fr; }
            .aside-panel { order: 2; }
            .nav-toggle { display: block; }
            nav .menu { display: none; flex-direction: column; width: 100%; }
            nav .menu.open { display: flex; }
            header-top { flex-direction: column; gap: 10px; }
            .search-box input { width: 130px; }
            h1 { font-size: 1.7rem !important; }
            main { padding: 15px; }
            .wrapper { box-shadow: none; }
        }
        @media (min-width: 861px) {
            nav .menu { display: flex !important; }
        }