*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; font-size: 16px; }
        body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: #f5f7fb;
            color: #1b2430;
            line-height: 1.7;
            overflow-x: hidden;
        }
        a { color: #4a4de7; text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.2s ease; }
        a:hover { color: #0a0f2c; border-bottom-color: #4a4de7; }
        img { max-width: 100%; height: auto; display: block; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .main-header {
            background: #0f1420;
            border-bottom: 4px solid #5865f2;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 3px 18px rgba(0,0,0,0.5);
        }
        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 14px 20px;
            max-width: 1300px;
            margin: 0 auto;
        }
        .my-logo {
            font-size: 1.9rem;
            font-weight: 800;
            background: linear-gradient(120deg, #a3b6ff, #7c8cff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: -0.5px;
            text-decoration: none;
            border: none;
        }
        .my-logo:hover { background: linear-gradient(120deg, #ffd7e8, #ffe08a); -webkit-background-clip: text; background-clip: text; color: transparent; border: none; }
        .main-nav ul {
            display: flex;
            gap: 8px;
            list-style: none;
            flex-wrap: wrap;
        }
        .main-nav a {
            color: #dfe6ff;
            padding: 8px 14px;
            border-radius: 24px;
            font-weight: 500;
            border: 1px solid transparent;
            text-decoration: none;
            display: inline-block;
        }
        .main-nav a:hover { background: #262f4d; border-color: #5e6ce2; color: #fff; }
        .menu-toggle {
            display: none;
            background: transparent;
            border: 2px solid #ffffff55;
            color: #fff;
            font-size: 1.8rem;
            width: 50px;
            height: 42px;
            line-height: 40px;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
        }
        .menu-toggle:hover { background: #1f2940; }
        @media (max-width: 768px) {
            .main-nav {
                display: none;
                width: 100%;
                order: 3;
                padding-top: 12px;
            }
            .main-nav.open { display: block; }
            .main-nav ul { flex-direction: column; align-items: stretch; gap: 12px; }
            .menu-toggle { display: block; }
            .header-inner { padding: 10px 16px; }
        }
        .breadcrumb {
            padding: 12px 0 6px;
            font-size: 0.85rem;
            background: transparent;
        }
        .breadcrumb ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            color: #40506b;
        }
        .breadcrumb li + li::before { content: "›"; margin-right: 8px; color: #8b9bb4; }
        .breadcrumb a { color: #5966f0; border: none; }
        .breadcrumb a:hover { color: #202542; text-decoration: underline; }
        .page-wrap {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 40px;
            margin: 30px auto 60px;
        }
        @media (max-width: 1024px) {
            .page-wrap { grid-template-columns: 1fr; }
            .sidebar { order: -1; }
        }
        .article-body {
            background: #ffffff;
            border-radius: 24px;
            padding: 44px 40px;
            box-shadow: 0 10px 40px rgba(16, 25, 40, 0.06);
        }
        @media (max-width: 600px) {
            .article-body { padding: 28px 20px; }
        }
        h1, h2, h3, h4 {
            line-height: 1.2;
            color: #0a1428;
            font-weight: 700;
            margin: 1.4em 0 0.5em;
        }
        h1 {
            font-size: 2.4rem;
            margin-top: 0.4em;
            margin-bottom: 0.3em;
            background: linear-gradient(150deg, #0a0f2e, #3a49a5);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        h2 { font-size: 2rem; margin-top: 1.8em; padding-bottom: 0.3em; border-bottom: 2px solid #e1e6f0; }
        h3 { font-size: 1.4rem; margin-top: 1.4em; color: #1d2c52; }
        h4 { font-size: 1.15rem; color: #364a74; }
        p { margin-bottom: 1.25em; }
        ul, ol { margin: 0 0 1.4em 1.2em; }
        li { margin-bottom: 0.5em; }
        .lead {
            font-size: 1.25rem;
            background: #eef2ff;
            padding: 22px 24px;
            border-left: 6px solid #5865f2;
            border-radius: 0 18px 18px 0;
            margin: 24px 0;
            color: #202b4a;
        }
        .callout {
            background: #fafad2;
            border: 1px solid #e6d98a;
            border-radius: 16px;
            padding: 18px 24px;
            margin: 20px 0;
            display: flex;
            gap: 15px;
            align-items: flex-start;
        }
        .callout i { font-size: 1.7rem; color: #ad8835; margin-top: 2px; }
        .grid-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 14px;
            margin: 24px 0;
        }
        .grid-cards .card {
            background: #f0f4ff;
            border-radius: 18px;
            padding: 18px 14px;
            text-align: center;
            border: 1px solid #dbe0ec;
            transition: 0.25s ease;
        }
        .grid-cards .card:hover { transform: translateY(-4px); box-shadow: 0 12px 22px rgba(80, 90, 200, 0.12); }
        .rss-list { list-style: none; margin-left: 0; }
        .rss-list li {
            background: #f1f4ff;
            border-radius: 12px;
            padding: 12px 18px;
            margin-bottom: 8px;
            border-left: 4px solid #5d79ff;
        }
        .sidebar {
            background: #fff;
            padding: 24px;
            border-radius: 20px;
            box-shadow: 0 8px 26px rgba(0,0,0,0.04);
            align-self: start;
        }
        .sidebar h2 {
            font-size: 1.4rem;
            margin-top: 0;
            border: none;
        }
        .sidebar ul { list-style: none; margin-left: 0; }
        .sidebar li { border-bottom: 1px solid #ebedf2; padding: 10px 0; }
        .sidebar i { margin-right: 8px; color: #5865f2; }
        .search-form {
            display: flex;
            gap: 5px;
            margin: 20px 0 25px;
        }
        .search-form input {
            flex: 1;
            padding: 14px 18px;
            border: 1px solid #d0d7e5;
            border-radius: 50px;
            font-size: 1rem;
            background: #fbfcff;
        }
        .search-form button {
            background: #5865f2;
            border: none;
            color: white;
            width: 48px;
            border-radius: 50%;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .search-form button:hover { background: #3b45c4; }
        .comment-box, .score-box {
            background: #f8faff;
            border: 1px solid #e1e8f5;
            border-radius: 16px;
            padding: 22px;
            margin: 32px 0 10px;
        }
        .comment-box h3, .score-box h3 { margin-top: 0; }
        .comment-box form, .score-box form { display: flex; flex-direction: column; gap: 10px; }
        .comment-box textarea, .comment-box input, .score-box select, .score-box input {
            border-radius: 12px;
            border: 1px solid #c7d2e2;
            padding: 12px 14px;
            font-size: 1rem;
            font-family: inherit;
            background: white;
        }
        .comment-box button, .score-box button {
            align-self: flex-start;
            background: #2244aa;
            color: #fff;
            border: none;
            padding: 12px 24px;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
        }
        .comment-box button:hover, .score-box button:hover { background: #0a1d68; }
        .image-caption {
            background: #f3f5fa;
            padding: 14px 16px;
            border-radius: 0 0 16px 16px;
            color: #40516b;
            font-size: 0.9rem;
        }
        .img-rad { border-radius: 16px; }
        .toc {
            background: #f3f6fd;
            padding: 24px 28px;
            border-radius: 22px;
            margin: 30px 0;
            border: 1px solid #d3dcf0;
        }
        .toc a { color: #283ab0; }
        .toc ol { margin-left: 1.4rem; }
        .accordion details {
            background: #ffffff;
            border: 1px solid #dfe5f0;
            border-radius: 14px;
            margin: 10px 0;
            padding: 10px 20px;
        }
        .accordion summary { font-weight: 600; cursor: pointer; color: #162b4a; }
        .friendlinks {
            margin-top: 28px;
            border-top: 1px dashed #99a6bd;
            padding-top: 20px;
        }
        .site-footer {
            background: #0c1122;
            color: #bfd0e8;
            padding: 50px 20px 30px;
            margin-top: 40px;
            border-top: 4px solid #5865f2;
        }
        .site-footer a { color: #8f9cef; border: none; }
        .site-footer a:hover { color: #fff; }
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .copyright {
            max-width: 1200px;
            margin: 40px auto 0;
            padding-top: 22px;
            border-top: 1px solid #263150;
            text-align: center;
            font-size: 0.88rem;
        }
        .btn-up { display: inline-block; background: #5865f2; color: white; border-radius: 30px; padding: 12px 24px; margin: 8px 0; border: none; cursor: pointer; }
        .btn-up:hover { background: #343ec2; }
        .back-to-top { position: fixed; bottom: 30px; right: 30px; background: #5865f2; color: white; width: 46px; height: 46px; border-radius: 50%; border: none; font-size: 1.3rem; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.25); z-index: 999; }
        @media (max-width: 600px) { .back-to-top { right: 16px; bottom: 16px; } }