*{margin:0;padding:0;box-sizing:border-box}
        :root{
            --navy:#0a1a2b;
            --navy-light:#132b42;
            --gold:#c89b3c;
            --gold-light:#e8c976;
            --bg:#f0f2f5;
            --card:#ffffff;
            --text:#2c3e50;
            --muted:#7f8c8d;
            --border:#e1e8ed;
            --success:#27ae60;
            --warning:#f39c12;
            --danger:#e74c3c;
        }
        html{scroll-behavior:smooth}
        body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;font-size:16px}
        .container{max-width:1200px;margin:0 auto;padding:0 20px}
        .site-header{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);padding:15px 0;position:sticky;top:0;z-index:1000;box-shadow:0 2px 20px rgba(0,0,0,.3)}
        .header-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
        .my-logo{font-size:1.6rem;font-weight:900;color:var(--gold);text-decoration:none;letter-spacing:1px;text-transform:uppercase;transition:color .3s}
        .my-logo:hover{color:var(--gold-light)}
        .my-logo i{margin-right:8px}
        .hamburger{display:none;background:none;border:2px solid var(--gold);color:var(--gold);font-size:1.3rem;padding:6px 12px;border-radius:6px;cursor:pointer;transition:all .3s}
        .hamburger:hover{background:var(--gold);color:var(--navy)}
        .main-nav ul{display:flex;list-style:none;gap:5px;flex-wrap:wrap}
        .main-nav a{display:block;color:#dfe6ee;text-decoration:none;padding:8px 14px;border-radius:20px;font-size:.9rem;font-weight:500;transition:all .3s;border:1px solid transparent}
        .main-nav a:hover,.main-nav a.active{background:var(--gold);color:var(--navy);border-color:var(--gold)}
        .breadcrumb{padding:10px 0 0;font-size:.82rem;color:var(--muted)}
        .breadcrumb a{color:var(--gold);text-decoration:none}
        .breadcrumb a:hover{text-decoration:underline}
        .breadcrumb .sep{margin:0 6px;color:#5a6a7a}
        .hero{background:linear-gradient(135deg,var(--navy) 0%,#1a3a5c 60%,var(--navy-light) 100%);color:#fff;padding:50px 0 40px;text-align:center;border-bottom:4px solid var(--gold)}
        .hero h1{font-size:2.6rem;font-weight:900;color:var(--gold);margin-bottom:10px;letter-spacing:2px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
        .hero p{font-size:1.1rem;max-width:700px;margin:15px auto;color:#c8d6e5}
        .hero .badge{display:inline-block;background:rgba(200,155,60,.2);border:1px solid var(--gold);color:var(--gold-light);padding:8px 22px;border-radius:30px;font-size:.85rem;margin-top:10px}
        .hero .badge i{margin-right:6px}
        .status-summary{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-top:25px}
        .status-chip{background:rgba(255,255,255,.1);padding:10px 20px;border-radius:30px;font-size:.9rem;display:flex;align-items:center;gap:8px}
        .status-chip .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
        .dot-green{background:var(--success)}
        .dot-yellow{background:var(--warning)}
        .dot-red{background:var(--danger)}
        .content{display:grid;grid-template-columns:1fr 320px;gap:30px;padding:30px 0 50px}
        .content-main{background:var(--card);border-radius:12px;padding:35px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
        .sidebar{display:flex;flex-direction:column;gap:20px}
        .widget{background:var(--card);border-radius:12px;padding:22px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
        .widget h3{font-size:1.1rem;color:var(--navy);margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid var(--gold)}
        .widget ul{list-style:none}
        .widget ul li{margin-bottom:8px}
        .widget ul a{color:var(--navy-light);text-decoration:none;font-size:.9rem;transition:color .3s,margin-left .3s}
        .widget ul a:hover{color:var(--gold);margin-left:5px}
        .widget ul a i{width:20px;color:var(--gold);margin-right:6px}
        h2{font-size:1.85rem;color:var(--navy);margin:35px 0 15px;padding-bottom:10px;border-bottom:2px solid var(--gold);font-weight:700}
        h2::before{content:"◤ ";color:var(--gold)}
        h3{font-size:1.35rem;color:var(--navy-light);margin:25px 0 10px;font-weight:600}
        h4{font-size:1.1rem;color:var(--text);margin:18px 0 8px;font-weight:600}
        p{margin:12px 0}
        ul,ol{margin:10px 0 10px 25px}
        li{margin-bottom:6px}
        strong{color:var(--navy)}
        .content-main img{max-width:100%;border-radius:8px;margin:20px 0;box-shadow:0 4px 15px rgba(0,0,0,.1)}
        .updated-badge{display:inline-block;background:#f0f2f5;padding:5px 15px;border-radius:20px;font-size:.8rem;color:var(--muted);margin-bottom:20px;border:1px solid var(--border)}
        .updated-badge i{margin-right:5px;color:var(--gold)}
        table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.9rem}
        th{background:var(--navy);color:#fff;padding:10px 12px;text-align:left;font-weight:600}
        td{padding:10px 12px;border-bottom:1px solid var(--border)}
        tr:hover td{background:#f8f9fa}
        .status-online{color:var(--success);font-weight:600}
        .status-warning{color:var(--warning);font-weight:600}
        .status-offline{color:var(--danger);font-weight:600}
        .search-box{display:flex;margin:20px 0}
        .search-box input{flex:1;padding:12px 15px;border:2px solid var(--border);border-radius:30px 0 0 30px;font-size:1rem;outline:none;transition:border-color .3s}
        .search-box input:focus{border-color:var(--gold)}
        .search-box button{background:var(--gold);border:none;color:var(--navy);padding:0 20px;border-radius:0 30px 30px 0;cursor:pointer;font-size:1.1rem;transition:background .3s}
        .search-box button:hover{background:var(--gold-light)}
        .comment-form,.score-form{background:var(--bg);border-radius:10px;padding:20px;margin:25px 0;border:1px solid var(--border)}
        .comment-form h3,.score-form h3{margin-top:0}
        .form-group{margin-bottom:15px}
        .form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin-bottom:5px}
        .form-group input,.form-group textarea,.form-group select{width:100%;padding:10px;border:2px solid var(--border);border-radius:6px;font-size:.9rem;transition:border-color .3s}
        .form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--gold);outline:none}
        .btn{background:var(--gold);color:var(--navy);border:none;padding:10px 25px;border-radius:6px;font-weight:600;cursor:pointer;transition:background .3s,transform .2s}
        .btn:hover{background:var(--gold-light);transform:translateY(-2px)}
        .site-footer{background:var(--navy);color:#a0b0c0;padding:40px 0 20px;margin-top:40px}
        .footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-bottom:25px}
        .footer-grid h4{color:var(--gold);margin-bottom:15px}
        .footer-grid a{color:#a0b0c0;text-decoration:none;display:block;margin-bottom:6px;font-size:.85rem;transition:color .3s}
        .footer-grid a:hover{color:var(--gold)}
        .copyright{text-align:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;color:#6a7a8a}
        friend-link{display:block;background:var(--navy-light);padding:20px;border-radius:10px;margin-top:20px;color:#a0b0c0;font-size:.85rem}
        friend-link a{color:var(--gold);text-decoration:none;margin:0 10px}
        friend-link a:hover{text-decoration:underline}
        .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:20px 0}
        .card{background:var(--bg);border-radius:10px;padding:20px;border:1px solid var(--border);transition:transform .3s,box-shadow .3s}
        .card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.1)}
        .card .icon{font-size:2rem;color:var(--gold);margin-bottom:10px}
        .card h4{font-size:1rem;margin-bottom:8px}
        .share-box{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap}
        .share-box a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#e0e0e0;color:#333;text-decoration:none;transition:all .3s}
        .share-box a:hover{transform:scale(1.15)}
        .share-box .fb:hover{background:#3b5998;color:#fff}
        .share-box .tw:hover{background:#1da1f2;color:#fff}
        .share-box .rd:hover{background:#ff4500;color:#fff}
        .share-box .wa:hover{background:#25d366;color:#fff}
        blockquote{background:var(--bg);border-left:4px solid var(--gold);padding:15px 20px;margin:20px 0;font-style:italic;border-radius:0 8px 8px 0}
        blockquote p{margin:0}
        @media(max-width:900px){
            .content{grid-template-columns:1fr}
            .sidebar{order:2}
            .hero h1{font-size:2rem}
            .hamburger{display:block}
            .main-nav{flex-basis:100%;display:none;margin-top:12px}
            .main-nav.open{display:block}
            .main-nav ul{flex-direction:column;gap:0}
            .main-nav a{padding:12px 15px;border-radius:8px}
            .footer-grid{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:600px){
            .content-main{padding:18px}
            .hero h1{font-size:1.6rem}
            .footer-grid{grid-template-columns:1fr}
            .card-grid{grid-template-columns:1fr}
        }