body{padding:0;font-family:Arial,sans-serif;background-color:#f4f4f4;}
header,nav{display:flex}
.container{width:1100px; margin:0 auto;}
.menu-toggle,.tabs,button{cursor:pointer}
.footer a,.footer p{text-decoration:none;font-size:16px;color:#fff;padding-bottom:15px}
.footer a{display:inline-block;padding:15px}
.footer{list-style:none;text-align:center;background-color:#07598f}
.footer li{display:inline}
.result{font-size:25px;color:#07598f}
header{background:var(--nav-bg);padding:1rem;position:relative;align-items:center;justify-content:space-between;flex-wrap:wrap}
nav{gap:1rem;flex-grow:1;justify-content:center;order:2}
nav a{text-decoration:none;color:var(--text);padding:.5rem 1rem}
nav a:hover{background:var(--accent);border-radius:5px}
.menu-toggle{font-size:1.8rem;background:0 0;border:none;color:var(--accent);position:absolute;top:1rem;right:1rem;z-index:10;order:3}
p{line-height:1.6}
.menu-toggle{position:absolute;top:1rem;right:1rem}
button {padding: 10px 20px;background: #4a6cf7;color: white;border: none;border-radius: 6px;font-size: 16px;cursor: pointer;transition: 0.25s;}
button:hover {background: #3a59d4;}
input[type="text"] {padding: 10px 15px;border: 1px solid #ccc;border-radius: 6px;font-size: 16px;transition: 0.25s;}
input[type="text"]:focus {border-color: #4a6cf7;outline: none;box-shadow: 0 0 5px rgba(74, 108, 247, 0.4);}
button{padding:5px 20px;border:2px solid #3498db;border-radius:5px;background-color:#3498db;color:#fff}
button:hover{background-color:#2980b9}
input[type=text],input[type=number],select{padding:8px;border:2px solid #ccc;border-radius:5px;width:150px;box-sizing:border-box}
input[type=text]:focus,input[type=number]:focus{border-color:#3498db}
.form-container{
margin:20px auto;background:#fff;border:1px solid #ddd;border-radius:6px;padding:20px;box-sizing:border-box}
.form-row, .row{
display:flex;justify-content:flex-start;align-items:center;gap: 50px; 
padding:10px 0;border-bottom:1px solid #eee
}
.form-field,.form-label{width:200px}
.error{color:#c92005;}
.table {display: flex;flex-direction: column;width: 100%;border: 1px solid #ccc;}
.header {font-weight: bold;background: #f5f5f5;}
.cell {flex: 1;padding: 5px;}

@media (max-width:768px){.table,h1,h2,p{line-height:35px;width:100%;margin:20px auto;border-collapse:collapse}
.container{width:100%; margin:0 auto;}
nav{flex-direction:column;display:none;width:100%;margin-top:3rem;padding:1rem;order:3}
nav.show{display:flex;background:var(--nav-bg);border-top:1px solid #ccc}
.form-container{
width:100%;margin:10px 0;padding:10px}
.form-row,.row{flex-direction:row;align-items:flex-start;gap: 0px; }
.form-label{margin-bottom:4px}
}