body { font-family: Arial, sans-serif; padding: 20px; background: #fafafa; }
.container { display: flex; gap: 20px; flex-wrap: wrap; }
.input-col { flex: 1; min-width: 300px; background: white; padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
.result-col { flex: 2; min-width: 400px; background: white; padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
input[type="text"] { width: 100%; box-sizing: border-box; padding: 8px; margin-bottom: 10px; }
.row { margin-bottom: 5px; display: flex; gap: 5px; align-items: center; }
select { flex: 1; padding: 5px; }
button { cursor: pointer; padding: 8px; border: none; border-radius: 3px; }
.btn-add { background: #e0e0e0; width: 100%; }
.btn-solve { background: #007bff; color: white; width: 100%; font-size: 16px; font-weight: bold; margin-top: 20px; padding: 12px; }
.btn-solve:hover { background: #0056b3; }
.btn-del { background: #dc3545; color: white; width: 30px; }
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
th, td { border: 1px solid #999; padding: 8px; text-align: center; }
th { background: #eee; }
td.error { background: #ffcccc; color: red; font-weight: bold; }
td.ok { background: #ccffcc; }
td.diag { background: #f0f0f0; color: #aaa; }
#mynetwork { width: 100%; height: 400px; border: 1px solid #ddd; background: #fff; margin-bottom: 20px; }
.alert-ok { background: #d4edda; color: #155724; padding: 15px; border-left: 5px solid #28a745; margin-bottom: 20px; }
.alert-err { background: #f8d7da; color: #721c24; padding: 15px; border-left: 5px solid #dc3545; margin-bottom: 20px; }
.critical { font-size: 1.2em; font-weight: bold; }
.m-top-10{ margin-top: 25px;}
.btn, button { color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;}
a.btn { text-decoration: none;}