print('<style>');

/* ====== GLOBAL ====== */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #0A1A2F;
    color: #6E8CA0;
}

/* ====== CONTAINER ====== */
.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

/* ====== HEADER ====== */
.header_bar {
    background-color: #0A1A2F;
    color: #6E8CA0;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #1C2A3A;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ====== CONTENT PANEL ====== */
.content {
    flex: 1;
    padding: 20px;
    border-radius: 10px;
    background-color: #1C2A3A;
    border: 1px solid #243445;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

/* ====== INPUTS ====== */
input, select {
    padding: 10px;
    width: 100%;
    border-radius: 6px;
    background-color: #0A1A2F;
    border: 1px solid #3FA9F5;
    color: #6E8CA0;
    margin-bottom: 12px;
}

input::placeholder {
    color: #6E8CA0;
}

/* ====== BUTTONS ====== */
.btn {
    background-color: #3FA9F5;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    color: #6E8CA0;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(63,169,245,0.4);
    transition: 0.2s;
}

.btn:hover {
    background-color: #6EC2FF;
    box-shadow: 0 3px 10px rgba(63,169,245,0.6);
}

/* ====== FOOTER ====== */
.footer_bar {
    background-color: #0A1A2F;
    color: #6E8CA0;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    border-top: 1px solid #1C2A3A;
}

/* ====== OUTPUT WINDOW ====== */
.output {
    background-color: #0A1A2F;
    color: #3FA9F5;
    padding: 20px;
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid #243445;
    font-family: monospace;
    white-space: pre-wrap;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
}

/* ====== TABLE (e.g., traceroute/hping result) ====== */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #1C2A3A;
    color: #6E8CA0;
}

table th {
    background-color: #0A1A2F;
    color: #3FA9F5;
    padding: 10px;
    border-bottom: 2px solid #243445;
}

table td {
    padding: 8px;
    border-bottom: 1px solid #243445;
    color: #D9E6EF;
}

table tr:hover {
    background-color: #162534;
}

/* ====== LABEL TEXT ====== */
label {
    font-weight: bold;
    color: #6E8CA0;
}

print('</style>');