*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "Segoe UI", "Liberation Sans", sans-serif; font-size: 15px; line-height: 1.6; color: #222; background: #f6f6f6; }
a { color: #0645ad; text-decoration: none; }
a:visited { color: #0b0080; }
a:hover { color: #002bb8; text-decoration: underline; }
.container { max-width: 720px; margin: 0 auto; padding: 30px 20px; }
.title { font-size: 28px; font-weight: normal; color: #000; border-bottom: 1px solid #a2a9b1; padding-bottom: 6px; margin-bottom: 8px; }
.subtitle, .welcome { font-size: 14px; color: #555; margin-bottom: 20px; }
.section-title { font-size: 20px; font-weight: normal; color: #000; border-bottom: 1px solid #c8ccd1; padding-bottom: 4px; margin: 28px 0 12px; }
.description { font-size: 14px; color: #555; margin-bottom: 10px; }
.flash-messages { margin-bottom: 16px; }
.flash { padding: 10px 14px; border: 1px solid #c8ccd1; border-left: 4px solid #a2a9b1; background: #fff; margin-bottom: 8px; font-size: 14px; }
.flash-success { border-left-color: #14866d; background: #f0faf6; }
.flash-danger { border-left-color: #d33; background: #fef6f6; }
.flash-warning { border-left-color: #edab00; background: #fef8e7; }
.flash-info { border-left-color: #3366cc; background: #f0f4fc; }
.page-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.container-login { background: #fff; border: 1px solid #c8ccd1; padding: 32px 36px; width: 380px; }
.header-login { text-align: center; margin-bottom: 20px; }
.title-login { font-size: 24px; border-bottom: none; padding-bottom: 0; margin-bottom: 6px; }
.subtitle-login { font-size: 13px; color: #72777d; }
.field { margin-bottom: 14px; }
.label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }
.input { width: 100%; padding: 8px 10px; font-size: 14px; border: 1px solid #a2a9b1; background: #fff; color: #222; outline: none; }
.input:focus { border-color: #3366cc; box-shadow: inset 0 0 0 1px #3366cc; }
.field-submit { margin-top: 18px; }
.btn { display: inline-block; padding: 8px 16px; font-size: 14px; border: 1px solid #a2a9b1; background: #f8f9fa; color: #222; cursor: pointer; text-decoration: none; line-height: 1.4; }
.btn:hover { background: #eaecf0; border-color: #72777d; text-decoration: none; color: #222; }
.btn-login { width: 100%; background: #3366cc; color: #fff; border-color: #2a4b8d; font-weight: 600; text-align: center; }
.btn-login:hover { background: #2a4b8d; color: #fff; }
.container-dashboard { background: #fff; border: 1px solid #c8ccd1; padding: 24px 28px; margin-top: 30px; margin-bottom: 30px; }
.status-indicator { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #c8ccd1; background: #f8f9fa; font-size: 14px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot-running { background: #14866d; }
.dot-stopped { background: #d33; }
.dot-unknown { background: #a2a9b1; }
.controls-buttons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-start { background: #f0faf6; border-color: #14866d; color: #14866d; font-weight: 600; }
.btn-start:hover { background: #14866d; color: #fff; }
.btn-stop { background: #fef6f6; border-color: #d33; color: #d33; font-weight: 600; }
.btn-stop:hover { background: #d33; color: #fff; }
.btn-open-lab { background: #eaf3ff; border-color: #3366cc; color: #0645ad; font-weight: 600; }
.btn-open-lab:hover { background: #3366cc; color: #fff; text-decoration: none; }
.completed-banner { background: #f0faf6; border: 2px solid #14866d; padding: 16px 20px; text-align: center; margin-bottom: 8px; }
.completed-text { font-size: 18px; font-weight: 600; color: #14866d; display: block; }
.completed-desc { font-size: 13px; color: #555; margin-top: 4px; }
.lab-url-box { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #c8ccd1; background: #f8f9fa; flex-wrap: wrap; }
.lab-url-value { font-family: monospace; font-size: 15px; color: #222; font-weight: 600; }
.form-flag { display: flex; gap: 10px; align-items: stretch; }
.field-flag-input { flex: 1; margin-bottom: 0; }
.input-flag { font-family: monospace; font-size: 14px; letter-spacing: 0.5px; }
.btn-verify { background: #f0faf6; border-color: #14866d; color: #14866d; font-weight: 600; white-space: nowrap; }
.btn-verify:hover { background: #14866d; color: #fff; }
.inactive { color: #999; font-style: italic; }
.solved { color: #14866d; font-weight: 600; }
.guides-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-guide { color: #0645ad; border-color: #c8ccd1; }
.btn-guide:hover { color: #002bb8; background: #eaf3ff; border-color: #3366cc; }
.tools-list { list-style: disc; padding-left: 24px; font-size: 14px; color: #333; }
.tool-item { margin-bottom: 4px; }
.footer-dashboard { margin-top: 28px; padding-top: 14px; border-top: 1px solid #c8ccd1; display: flex; gap: 16px; align-items: center; }
.btn-logout { font-size: 13px; color: #d33; border: none; background: none; padding: 0; }
.btn-logout:hover { color: #a00; text-decoration: underline; background: none; border: none; }
.btn-admin { font-size: 13px; color: #3366cc; border: none; background: none; padding: 0; }
.btn-admin:hover { color: #002bb8; text-decoration: underline; background: none; border: none; }
.badge-admin { font-size: 11px; background: #3366cc; color: #fff; padding: 2px 8px; margin-left: 8px; font-weight: 600; }
/* Admin panel */
.form-add-user { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.form-add-user .field { margin-bottom: 0; flex: 1; min-width: 120px; }
.users-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.users-table th, .users-table td { padding: 8px 10px; border-bottom: 1px solid #c8ccd1; text-align: left; }
.users-table th { background: #f8f9fa; font-weight: 600; font-size: 13px; color: #555; }
.btn-small { padding: 4px 10px; font-size: 12px; }
.btn-delete { background: #fef6f6; border-color: #d33; color: #d33; }
.btn-delete:hover { background: #d33; color: #fff; }
@media (max-width: 500px) { .container-login { width: 100%; margin: 20px; } .controls-buttons, .guides-buttons, .form-flag, .lab-url-box, .form-add-user { flex-direction: column; } }