* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #1E1E2E; color: #e0e0e0; font-family: system-ui, sans-serif; }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: #16161e; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; }
.sidebar .logo { color: #C8E650; font-weight: 800; font-size: 1.3rem; margin-bottom: 1.5rem; padding: 0.5rem; }
.sidebar a { color: #bbb; text-decoration: none; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.9rem; transition: all 0.15s; }
.sidebar a:hover, .sidebar a.active { background: #2a2a3e; color: #C8E650; }
.sidebar .logout-btn { margin-top: auto; background: none; border: 1px solid #555; color: #aaa; padding: 0.5rem; border-radius: 8px; cursor: pointer; font-size: 0.85rem; }
.sidebar .logout-btn:hover { border-color: #ff6b6b; color: #ff6b6b; }
.content { margin-left: 220px; padding: 2rem; flex: 1; }
.content h1 { color: #C8E650; margin-bottom: 1.5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.card { background: #2a2a3e; border-radius: 12px; padding: 1.5rem; text-align: center; }
.card-count { font-size: 2.5rem; font-weight: 800; color: #C8E650; }
.card-label { color: #aaa; margin-top: 0.3rem; font-size: 0.9rem; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th { text-align: left; padding: 0.7rem; border-bottom: 2px solid #333; color: #C8E650; font-size: 0.8rem; text-transform: uppercase; }
td { padding: 0.6rem 0.7rem; border-bottom: 1px solid #2a2a3e; font-size: 0.9rem; }
tr:hover { background: #2a2a3e; }
.btn { padding: 0.4rem 0.8rem; border: none; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 600; }
.btn-edit { background: #3b82f6; color: #fff; }
.btn-del { background: #ef4444; color: #fff; }
.btn-create { background: #C8E650; color: #1E1E2E; padding: 0.6rem 1.2rem; font-size: 0.9rem; margin-bottom: 1rem; }
.btn-pwd { background: #a855f7; color: #fff; }
.btn:hover { opacity: 0.85; }
.error { color: #ff6b6b; margin: 1rem 0; }
/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: #2a2a3e; border-radius: 12px; padding: 2rem; width: 100%; max-width: 480px; }
.modal h2 { color: #C8E650; margin-bottom: 1rem; font-size: 1.2rem; }
.modal label { display: block; margin-bottom: 0.2rem; font-size: 0.85rem; color: #aaa; }
.modal input, .modal select { width: 100%; padding: 0.6rem; border-radius: 8px; border: 1px solid #444; background: #1E1E2E; color: #e0e0e0; margin-bottom: 0.8rem; font-size: 0.9rem; }
.modal input:focus, .modal select:focus { outline: none; border-color: #C8E650; }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.modal .btn-cancel { background: #555; color: #ddd; }
.modal .btn-save { background: #C8E650; color: #1E1E2E; }
/* Fix select/option text on light dropdown backgrounds */
select option { background: #2a2a3e; color: #e0e0e0; }
select { color: #e0e0e0; }
.user-link { color: #C8E650; text-decoration: none; font-size: 0.8rem; }
.user-link:hover { text-decoration: underline; }
/* Loading overlay */
.loading-overlay { display: none; position: fixed; top: 0; left: 220px; right: 0; bottom: 0; background: rgba(0,0,0,0.45); z-index: 50; align-items: center; justify-content: center; }
.loading-overlay.active { display: flex; }
.loading-spinner { width: 48px; height: 48px; border: 4px solid #333; border-top-color: #C8E650; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Checkbox alignment */
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.checkbox-row input[type="checkbox"] { width: auto; margin: 0; }
.checkbox-row label, .checkbox-row span { margin: 0; color: #aaa; font-size: 0.85rem; }
/* Password suggest */
.pwd-wrapper { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.8rem; }
.pwd-wrapper input { flex: 1; margin-bottom: 0; }
.btn-suggest { background: #C8E650; color: #1E1E2E; padding: 0.4rem 0.7rem; border: none; border-radius: 6px; cursor: pointer; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.btn-suggest:hover { opacity: 0.85; }
.pwd-suggested { font-family: monospace; font-size: 0.8rem; background: #1E1E2E; border: 1px solid #444; padding: 0.3rem 0.5rem; border-radius: 4px; color: #C8E650; cursor: pointer; display: none; white-space: nowrap; }
.pwd-suggested:hover { background: #333; }