:root {
    --blurple: #5865F2;
    --blurple-hover: #4752C4;
    --success: #4ade80;
    --error: #f87171;
    --warning: #fbbf24;
    --bg-color: #121212;
    --surface-color: #1E1E1E;
    --text-color: #ffffff;
    --text-muted: #a1a1aa;
    --border-color: #3f3f46;
    --input-bg: #27272a;
}

[data-theme="light"] {
    --bg-color: #f4f4f5;
    --surface-color: #ffffff;
    --text-color: #18181b;
    --text-muted: #71717a;
    --border-color: #e4e4e7;
    --input-bg: #f4f4f5;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

body, .card, h1, h2, p, input, select, .btn, .toast, table, th, td, .table-container, .modal-content, .slider, .action-btn, .icon-btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body {
    background-color: var(--bg-color); color: var(--text-color); display: flex;
    justify-content: center; align-items: center; min-height: 100vh; padding: 20px;
}

#toast-container { position: fixed; top: 20px; left: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }

.toast {
    background-color: var(--surface-color); color: var(--text-color); padding: 12px 20px;
    border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 12px;
    font-weight: 500; animation: slideInLeft 0.3s ease forwards; border-left: 4px solid var(--blurple);
}

.toast-success { border-color: var(--success); }
.toast-error { border-color: var(--error); }
.toast-warning { border-color: var(--warning); }

@keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }

.icon-btn { background: none; border: none; color: var(--text-color); font-size: 1.5rem; cursor: pointer; }
.icon-btn:hover { color: var(--blurple); }
.theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 100; }

.view { display: none; width: 100%; max-width: 350px; animation: fadeIn 0.3s ease; }
.view.active { display: block; }
.view-large { max-width: 800px; }
.view-xl { max-width: 1000px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.card { background-color: var(--surface-color); padding: 2.5rem 2rem; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); width: 100%; }

h1 { color: var(--blurple); text-align: center; margin-bottom: 2rem; }
h2 { color: var(--text-color); margin-bottom: 1.5rem; text-align: center; }
p.subtitle { text-align: center; color: var(--text-muted); margin-bottom: 2rem; }

.form-group { margin-bottom: 1.2rem; }
.input-icon { position: relative; }
.input-icon i { position: absolute; left: 15px; top: 14px; color: var(--text-muted); }

input, select {
    width: 100%; padding: 12px 12px 12px 40px; border-radius: 8px; border: 1px solid var(--border-color);
    background-color: var(--input-bg); color: var(--text-color); font-size: 1rem; appearance: none;
}
input:not(.input-icon input), select:not(.input-icon select) { padding-left: 12px; }
select { padding-left: 15px; cursor: pointer; }
input:focus, select:focus { outline: none; border-color: var(--blurple); }
input[type="file"] { padding: 12px; }

.btn {
    width: 100%; padding: 12px; background-color: var(--blurple); color: white; border: none; border-radius: 8px;
    font-size: 1.2rem; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px;
}
.btn:hover { background-color: var(--blurple-hover); }
.btn-danger { background-color: var(--error); }
.btn-danger:hover { background-color: #dc2626; }
.btn-success { background-color: var(--success); }
.btn-success:hover { background-color: #22c55e; }
.btn-warning { background-color: var(--warning); color: #000; }
.btn-warning:hover { background-color: #d97706; }
.btn-secondary { background-color: var(--border-color); color: var(--text-color); }
.btn-secondary:hover { background-color: var(--text-muted); color: #fff;}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.link-text { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; font-weight: 500;}
.link-text:hover { color: var(--blurple); text-decoration: underline; }

.req-list { list-style: none; font-size: 0.8rem; margin-top: 0.8rem; }
.req-item { color: var(--error); margin-bottom: 3px;}
.req-item.valid { color: var(--success); }
.req-item.valid i::before { content: "\f00c"; }

.table-container { overflow-x: auto; margin-bottom: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color); }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); }
th { background-color: var(--input-bg); color: var(--text-muted); font-weight: 600; }
tr:last-child td { border-bottom: none; }
.action-cell { text-align: right; display: flex; justify-content: flex-end; gap: 10px; }
.action-btn { background: none; border: none; color: var(--blurple); cursor: pointer; font-size: 1.2rem; }
.action-btn:hover { color: var(--blurple-hover); }
.action-btn-danger { color: var(--error); }
.action-btn-danger:hover { color: #dc2626; }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 1000;
}
.modal-overlay.active { display: flex; animation: fadeIn 0.2s ease; }
.modal-content { background: var(--surface-color); padding: 2rem; border-radius: 12px; width: 90%; max-width: 400px; text-align: center; }

.toggle-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding: 10px; background: var(--input-bg); border-radius: 8px; }
.toggle-label { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-color); border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: var(--success); }
input:checked + .slider:before { transform: translateX(22px); }

.flex-row { display: flex; gap: 10px; margin-top: 1.5rem; }
.flex-between { justify-content: space-between; align-items: center; }
#uploadLog { margin-top: 15px; font-family: monospace; white-space: pre-wrap; font-size: 0.8rem; color: var(--success); text-align: left;}
.status-badge { padding: 4px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: bold; }
.status-pending { background: var(--blurple); color: white; }
.status-withdrawn { background: var(--error); color: white; }

.autocomplete-wrapper { position: relative; }
.autocomplete-items {
    position: absolute; border: 1px solid var(--border-color); border-top: none; z-index: 99;
    top: 100%; left: 0; right: 0; background-color: var(--surface-color); max-height: 250px; overflow-y: auto;
    border-radius: 0 0 8px 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); text-align: left;
}
.autocomplete-item { padding: 10px; cursor: pointer; border-bottom: 1px solid var(--border-color); }
.autocomplete-item:hover { background-color: var(--input-bg); }
.autocomplete-item strong { color: var(--blurple); font-size: 1.1rem;}
.autocomplete-item small { display: block; color: var(--text-muted); font-size: 0.8rem; margin-top: 3px;}

.action-log { margin-top: 20px; max-height: 300px; overflow-y: auto; text-align: left;}
.action-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px; border-radius: 8px; background: var(--input-bg); margin-bottom: 8px;
    border-left: 4px solid var(--blurple);
}
.action-item.status-error { border-left-color: var(--error); }
.action-item.status-warning { border-left-color: var(--warning); }
.action-item.status-success { border-left-color: var(--success); }
.action-item.undone { opacity: 0.5; text-decoration: line-through; border-left-color: var(--text-muted); }

.role-btn-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
.role-btn { flex: 1; padding: 15px 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-muted); cursor: pointer; transition: 0.2s; text-align: center; }
.role-btn.active { background: var(--blurple); color: white; border-color: var(--blurple); }
.role-btn i { font-size: 1.5rem; }