:root {
    --bg: #0d0b0f;
    --panel: #171219;
    --panel-2: #211823;
    --text: #f4ecec;
    --muted: #c7a8a8;
    --accent: #d9412d;
    --accent-2: #ff6948;
    --danger: #b72222;
    --ok: #1c8d54;
    --info: #b74a00;
    --border: #3f1f1b;
    --shadow: rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: radial-gradient(circle at top, #2d0f0c 0%, var(--bg) 60%);
    color: var(--text);
}

.container {
    max-width: 1060px;
    margin: 0 auto;
    padding: 28px;
}

h1,
h2,
h3,
h4 {
    margin-top: 0;
}

.card {
    background: linear-gradient(180deg, rgba(255, 105, 72, 0.08), rgba(0, 0, 0, 0.12)), var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 10px 22px var(--shadow);
}

.project-card {
    padding: 22px;
}

.project-description {
    color: #ffd9d1;
    margin-bottom: 18px;
}

a {
    color: #ffc7ba;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

form {
    display: grid;
    gap: 12px;
}

label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-weight: 600;
}

input,
textarea,
select,
button {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
}

button,
.btn {
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    border: none;
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    display: inline-block;
    width: auto;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 5px 14px rgba(217, 65, 45, 0.35);
}

button:hover,
.btn:hover {
    filter: brightness(1.08);
    text-decoration: none;
}

.btn-danger {
    background: linear-gradient(180deg, #cc3d3d, var(--danger));
}

.btn-muted {
    background: linear-gradient(180deg, #67463f, #4f332f);
}

.inline-form {
    display: inline;
}

.notice {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-weight: 600;
}

.notice-success {
    background: rgba(28, 141, 84, 0.2);
    border: 1px solid var(--ok);
}

.notice-error {
    background: rgba(183, 34, 34, 0.25);
    border: 1px solid var(--danger);
}

.notice-info {
    background: rgba(183, 74, 0, 0.22);
    border: 1px solid var(--info);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid var(--border);
    padding: 10px;
    text-align: left;
}

th {
    background: rgba(217, 65, 45, 0.22);
}

.badge {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.badge-ok {
    background: rgba(28, 141, 84, 0.25);
    color: #95f4c3;
}

.badge-warn {
    background: rgba(183, 74, 0, 0.28);
    color: #ffd3ae;
}

.badge-applied {
    background: rgba(217, 65, 45, 0.25);
    color: #ffc4b6;
}

.nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.role-item {
    border: 1px solid #5a2720;
    background: linear-gradient(180deg, rgba(217, 65, 45, 0.1), rgba(0, 0, 0, 0.18));
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
}

.role-head {
    margin-bottom: 8px;
    color: #ffd6ce;
}

.role-item p {
    margin: 0 0 14px;
    color: #f3d7d2;
    line-height: 1.4;
}

.role-actions {
    margin-top: auto;
}

.booked-by {
    color: #ffd9cc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}