body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #0b111a;
            color: #d1d9e1;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 900px;
            margin: auto;
            background: #15202b;
            padding: 30px;
            border: 1px solid #2f3f4e;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        h1 {
            color: #5ec8ff;
            text-align: center;
            text-transform: uppercase;
            border-bottom: 2px solid #5ec8ff;
            padding-bottom: 10px;
        }
        h2 {
            color: #a3d8f4;
            border-left: 5px solid #5ec8ff;
            padding-left: 10px;
            margin-top: 30px;
        }
        .phase-box {
            background: #1c2d3d;
            padding: 15px;
            margin: 15px 0;
            border-radius: 5px;
            border-left: 3px solid #ffcc00;
        }
        .important {
            color: #ff4d4d;
            font-weight: bold;
        }
        .role-tank { color: #f2a154; font-weight: bold; }
        .role-heal { color: #87e487; font-weight: bold; }
        .role-dps { color: #f25454; font-weight: bold; }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            padding: 12px;
            border: 1px solid #2f3f4e;
            text-align: left;
        }
        th {
            background-color: #243447;
        }
        ul {
            padding-left: 20px;
        }
        .footer {
            text-align: center;
            font-size: 0.8em;
            margin-top: 40px;
            color: #556677;
        }