:root { --black:#080808; --red:#d70d0d; --red-dark:#a90000; --white:#fff; --paper:#f7f4f1; --line:#e7dfdc; --muted:#6b6260; --radius:16px; }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background:var(--paper); color:var(--black); font-size:15px; line-height:1.45; }
a { color:var(--black); font-weight:500; text-decoration:none; } a:hover { color:var(--red); }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:16px; padding:9px 18px; background:var(--black); color:var(--white); box-shadow:0 6px 18px rgba(0,0,0,.2); }
.brand { display:flex; align-items:center; gap:10px; color:var(--white); font-size:16px; font-weight:500; } .brand img { width:42px; height:42px; object-fit:contain; border-radius:50%; background:#fff; }
nav { display:flex; gap:8px; flex:1; flex-wrap:wrap; } nav a { color:var(--white); padding:6px 9px; border-radius:999px; font-size:14px; } nav a:hover { background:var(--red); color:#fff; }
.logout button { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.65); border-radius:999px; padding:7px 12px; }
.page { max-width:1180px; margin:0 auto; padding:24px 18px 70px; } h1 { font-size:30px; line-height:1.15; margin:0 0 18px; font-weight:650; } h2 { margin:0 0 14px; font-size:20px; font-weight:600; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background: radial-gradient(circle at 50% 10%, #fff 0, #fff 25%, #f2ece8 26%, #f2ece8 100%); }
.login-card { width:min(410px, 100%); background:#fff; padding:28px; border-radius:24px; box-shadow:0 18px 50px rgba(0,0,0,.13); text-align:center; border:1px solid var(--line); }
.login-logo { width:150px; height:150px; object-fit:contain; } .login-card p { color:var(--muted); }
.panel, .card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 22px rgba(0,0,0,.045); }
.panel { padding:18px; margin:14px 0; overflow:auto; } .warning { border-color:#f2b8b8; background:#fffafa; }
.cards { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:18px; } .cards.three { grid-template-columns:repeat(3, minmax(0,1fr)); }
.card { padding:18px; min-height:92px; display:flex; flex-direction:column; justify-content:center; } .card strong { font-size:28px; font-weight:650; } .card span { color:var(--muted); } .card-action { background:var(--red); color:#fff; align-items:center; text-align:center; font-size:18px; } .card-action:hover { color:#fff; background:var(--red-dark); }
table { width:100%; border-collapse:collapse; font-size:14px; } th, td { padding:9px 8px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; } th { font-size:12px; text-transform:uppercase; letter-spacing:.035em; color:var(--muted); font-weight:650; } tfoot th { color:var(--black); font-size:14px; }
label { display:flex; flex-direction:column; gap:6px; font-weight:500; color:#241f1d; } input, select, textarea { width:100%; border:1px solid #d9cfca; border-radius:11px; padding:9px 11px; font:inherit; background:#fff; } textarea { resize:vertical; }
.checkbox { flex-direction:row; align-items:center; align-self:end; } .checkbox input { width:auto; }
.grid { display:grid; gap:13px; margin-bottom:13px; } .grid.two { grid-template-columns:repeat(2, minmax(0,1fr)); }
.free-fields[hidden] { display:none; }
button, .button { display:inline-flex; justify-content:center; align-items:center; border:0; border-radius:999px; padding:9px 15px; background:#eee5e2; color:var(--black); font-weight:600; cursor:pointer; font:inherit; } .primary { background:var(--red); color:#fff; } .danger { background:#1d1d1d; color:#fff; } .small { padding:6px 9px; font-size:13px; }
.actions, .head-row, .filter, .section-head { display:flex; gap:10px; align-items:end; flex-wrap:wrap; } .head-row, .section-head { justify-content:space-between; } .filter { margin:8px 0 16px; }
.flash { padding:12px 15px; border-radius:14px; margin-bottom:16px; background:#e7ffe9; border:1px solid #b6e5bd; font-weight:500; } .flash.error { background:#ffe8e8; border-color:#f0b5b5; }
@media (max-width:850px) { body { font-size:14px; } .topbar { align-items:flex-start; flex-direction:column; gap:10px; padding:10px 14px; } .brand img { width:38px; height:38px; } nav { width:100%; gap:6px; } nav a { padding:6px 8px; font-size:13px; } .page { padding:18px 12px 60px; } .panel { padding:14px; border-radius:14px; } .cards, .cards.three, .grid.two { grid-template-columns:1fr; } .card { min-height:auto; padding:15px; } h1 { font-size:24px; } h2 { font-size:18px; } table { font-size:13px; } th, td { padding:8px 6px; } input, select, textarea { padding:8px 10px; } }

fieldset { border:0; margin:0 0 13px; padding:0; }
legend { font-weight:500; margin-bottom:6px; color:#241f1d; }
.radio-group.compact { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px; margin-bottom:0; }
.slot-options { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px; }
.radio-card { display:flex; flex-direction:row; align-items:flex-start; gap:9px; border:1px solid #d9cfca; border-radius:13px; padding:10px 11px; background:#fff; cursor:pointer; font-weight:500; }
.radio-card:hover { border-color:#c8b9b2; background:#fbfaf9; }
.radio-card input { width:auto; margin-top:3px; accent-color:var(--black); }
.radio-card span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.radio-card strong { font-weight:600; }
.radio-card small { color:var(--muted); font-size:12px; line-height:1.35; }
.radio-card:has(input:checked) { border-color:#2f2a27; background:#f4f1ee; box-shadow:0 0 0 2px rgba(8,8,8,.055); }
.small-note { margin:8px 0 0; font-size:13px; }
.muted { color:var(--muted); }
.slot-option[hidden] { display:none; }
@media (max-width:850px) { .slot-options, .radio-group.compact { grid-template-columns:1fr; } .radio-card { padding:9px 10px; } }

.table-actions { display:flex; gap:6px; align-items:center; }
.table-actions form { margin:0; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:31px; height:31px; min-width:31px; padding:0; border-radius:999px; border:1px solid #d9cfca; background:#fff; color:var(--black); font-weight:600; line-height:1; cursor:pointer; }
.icon-button:hover { border-color:#2f2a27; background:#f4f1ee; color:var(--black); }
.danger-icon:hover { border-color:#7b1d1d; background:#fff2f2; }
.compact-list { margin:0; padding-left:16px; }
.assignment-box { margin-top:4px; }
.assignment-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px; margin-bottom:14px; }
.assignment-row { display:grid; grid-template-columns:auto minmax(0,1fr) 120px; align-items:center; gap:9px; border:1px solid #d9cfca; border-radius:13px; padding:9px 10px; background:#fff; font-weight:500; }
.assignment-row input[type="checkbox"] { width:auto; }
.assignment-title { display:flex; flex-direction:column; gap:2px; min-width:0; }
.assignment-title strong { font-weight:600; }
.assignment-title small { color:var(--muted); font-size:12px; line-height:1.35; }
.assignment-row select { padding:7px 9px; border-radius:10px; }
.role-card { margin-bottom:8px; }
@media (max-width:850px) { .assignment-list { grid-template-columns:1fr; } .assignment-row { grid-template-columns:auto minmax(0,1fr); } .assignment-row select { grid-column:2; width:100%; } .table-actions { gap:5px; } .icon-button { width:29px; height:29px; min-width:29px; } }