body { 
        font-family: sans-serif; 
        background-color: #f9fafb; 
        color: #333; 
        margin: 0; 
        padding: 20px; 
        transition: background-color 0.3s, color 0.3s;
    }
    .container { 
        max-width: 900px; 
        margin: auto; 
        background: #ffffff; 
        padding: 20px 30px; 
        border-radius: 12px; 
        box-shadow: 0 4px 20px rgba(0,0,0,0.1); 
        transition: background-color 0.3s, color 0.3s; 
    }
    h1 { font-size: 2.5em; color: #333; margin-bottom: 0.5em; text-align: center; }
    p { color: #555; margin-bottom: 1em; }
    a { color: #007bff; text-decoration: none; }
    footer { text-align: center; margin-top: 20px; }

    .info { 
        margin-top: 20px; 
        padding: 10px 15px; 
        border-radius: 8px; 
        font-size: 0.9em; 
        max-width: 400px; 
        margin-left: auto; 
        margin-right: auto; 
        text-align: center; 
        border: 2px solid #ddd; 
        background-color: inherit; 
        transition: color 0.3s, border-color 0.3s;
    }

    .connected { color: #28a745; border-color: #28a745; }
    .not-connected { color: #dc3545; border-color: #dc3545; }

    .details { 
        margin-top: 15px; 
        padding: 15px 20px; 
        border-radius: 8px; 
        background-color: #f4f4f4; 
        font-size: 0.85em; 
        border: 1px solid #ddd; 
        max-width: 400px; 
        margin-left: auto; 
        margin-right: auto; 
        transition: background-color 0.3s, border-color 0.3s;
    }

    .table-wrap {
        width: 100%;
	max-width: 450px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 24px 0;
    }

    .peering-table {
        border-collapse: collapse;
        width: 100%;
        max-width: 100%;
        background-color: #f4f4f4;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        font-size: 0.95em;
    }

    .peering-table th,
    .peering-table td {
        padding: 12px 18px;
        text-align: left;
        border-bottom: 1px solid #ddd;
        word-break: break-word;
    }

    .peering-table th {
        background-color: #eeeeee;
        color: #333;
        font-weight: 600;
    }

    .peering-table td {
        color: #333;
    }

    .peering-table tr:last-child td {
        border-bottom: none;
    }

    @media (max-width: 600px) {
        .peering-table {
            font-size: 0.85em;
        }

        .peering-table th,
        .peering-table td {
            padding: 10px 12px;
        }
    }

    @media (prefers-color-scheme: dark) {
        body { background-color: #121212; color: #f0f0f0; }
        .container { background-color: #1e1e1e; color: #f0f0f0; }
        h1 { color: #ffffff; }
        p { color: #cccccc; }
        a { color: #66aaff; }
        .connected { color: #36c48d; border-color: #36c48d; }
        .not-connected { color: #c43e3e; border-color: #c43e3e; }
        .details { background-color: #2a2a2a; border-color: #444; color: #f0f0f0; }

        .peering-table {
            background-color: #2a2a2a;
            border-color: #444;
        }

        .peering-table th {
            background-color: #242424;
            color: #f0f0f0;
        }

        .peering-table td {
            color: #f0f0f0;
            border-bottom-color: #444;
        }
    }