:root {
    --dodgerblue: #1e90ff;
    --lightbg: #f4f4f4;
    --white: #ffffff;
    --text: #333333;
}

html, body { height: 100%; margin: 0; }
body { background-color: white; color: var(--text); font-family: sans-serif; display: flex; justify-content: center; padding-top: 2vh; padding-bottom: 20px; box-sizing: border-box; }

.container { width: 95%; max-width: 100%; min-height: 93vh; background-color: var(--lightbg); padding: 20px 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border: 1px solid #ddd; box-sizing: border-box; display: flex; flex-direction: column; }

h2 { color: var(--dodgerblue); margin-bottom: 15px; font-size: 22px; }
header { border-bottom: 2px solid var(--dodgerblue); padding-top: 15px; padding-bottom: 20px; margin-bottom: 20px; width: 100%; }

.btn, .btn-danger, .btn-primary { padding: 8px 15px; cursor: pointer; border-radius: 4px; font-weight: bold; font-size: 13px; border: 1px solid #bbb; background-color: #d3d3d3; color: black; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 120px; }
.btn-primary { background-color: var(--dodgerblue); color: white; border: none; }
.btn:hover { background-color: #c0c0c0; }

input, textarea, select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; background: white; }
th { text-align: left; padding: 10px; color: var(--dodgerblue); border-bottom: 3px solid var(--dodgerblue); }
td { padding: 8px; border-bottom: 1px solid #ddd; }
footer { margin-top: auto; border-top: 1px solid #ddd; padding-top: 15px; width: 100%; }
.footer-info { text-align: right; font-size: 0.75em; color: #777; }