:root {
    --app-bg: linear-gradient(135deg, #040a18 0%, #0b2040 45%, #16345a 100%);
    --app-surface: rgba(7, 18, 36, 0.88);
    --app-border: rgba(79, 243, 255, 0.18);
    --app-text: #f2f7ff;
    --app-muted: rgba(210, 232, 255, 0.75);
}

html {
    background-color: #040a18;
}

body {
    background: var(--app-bg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--app-text);
    min-height: 100vh;
    font-family: "Inter", "Segoe UI", sans-serif;
}

a {
    color: #88e6ff;
}

a:hover {
    color: #b2f5ff;
}

.card,
.modal-content {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    box-shadow: 0 18px 40px rgba(3, 12, 28, 0.45);
}

.card-title,
.modal-title {
    color: #ffffff;
}

.form-label {
    color: var(--app-muted);
}

.form-control,
.form-select {
    background: rgba(6, 20, 42, 0.78);
    border: 1px solid rgba(79, 243, 255, 0.22);
    color: #ffffff !important;
    caret-color: #ffffff;
}

input,
select,
textarea {
    color: #ffffff !important;
}

.form-control::placeholder {
    color: rgba(203, 227, 255, 0.6);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(79, 243, 255, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(79, 243, 255, 0.15);
    background: rgba(6, 20, 42, 0.9);
    color: #ffffff;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-select:-webkit-autofill {
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
}

.form-select option {
    color: #0d192d;
}

.table {
    color: var(--app-text);
    background: rgba(6, 18, 38, 0.75);
}

.table thead {
    background: rgba(6, 18, 38, 0.9);
    color: var(--app-muted);
    border-color: transparent;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(79, 243, 255, 0.05);
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(6, 20, 42, 0.35);
}

.table-hover tbody tr:hover {
    background-color: rgba(79, 243, 255, 0.08);
    color: #ffffff;
}

.alert {
    background: rgba(10, 30, 58, 0.85);
    color: #d8ecff;
    border: 1px solid rgba(79, 243, 255, 0.18);
}

.hero-section {
    background: linear-gradient(45deg, #00aaff, #ff00ff);
    padding: 100px 0;
    border-radius: 15px;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.worker-column {
    display: none;
}

.avatar-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(79, 243, 255, 0.3);
    box-shadow: 0 6px 18px rgba(5, 18, 38, 0.55);
}