:root { font-family: Arial, sans-serif; color: #1f2933; background: #f4f7f7; }
* { box-sizing: border-box; }
body { margin: 0; }
header { background: #226264; color: white; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; }
header strong { display: block; font-size: 1.2rem; }
header span { display: block; opacity: .8; font-size: .9rem; margin-top: 3px; }
a { color: #226264; }
.logout { color: white; text-decoration: none; }
.container { max-width: 1050px; margin: 30px auto; padding: 0 18px; }
.card, .login-card { background: white; border-radius: 10px; padding: 24px; box-shadow: 0 4px 18px rgba(0,0,0,.08); margin-bottom: 24px; }
.login-card { max-width: 430px; margin: 70px auto; }
h1, h2 { margin-top: 0; }
label { display: block; margin: 15px 0; font-weight: bold; }
input[type=text], input[type=password] { width: 100%; padding: 12px; margin-top: 7px; border: 1px solid #bcc7c7; border-radius: 6px; }
button { background: #226264; color: white; border: 0; border-radius: 6px; padding: 11px 18px; cursor: pointer; font-weight: bold; }
.dropzone { border: 2px dashed #87a9a9; border-radius: 8px; padding: 30px; text-align: center; background: #f8fbfb; cursor: pointer; }
.dropzone input { display: block; margin: 15px auto 0; max-width: 100%; }
.alert { padding: 12px 15px; border-radius: 6px; margin-bottom: 18px; }
.success { background: #e8f7ef; color: #185c37; }
.error { background: #fdecec; color: #8a1c1c; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #e1e7e7; text-align: left; padding: 12px 8px; }
.actions { display: flex; gap: 14px; align-items: center; }
.actions form { margin: 0; }
.link-button { background: none; padding: 0; color: #226264; text-decoration: underline; font-weight: normal; }
.link-button.danger { color: #9b1c1c; }
@media (max-width: 650px) { .actions { flex-direction: column; align-items: flex-start; gap: 7px; } }