:root {
    --bg-main: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --border-color: #30363d;
    --text-main: #c9d1d9;
    --text-muted: #8b949e;
    --accent-blue: #58a6ff;
    --accent-green: #3fb950;
    --accent-red: #f85149;
    --accent-yellow: #d29922;
}

* { box-sizing: border-box; }
body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; background:var(--bg-main); color:var(--text-main); display:flex; min-height:100vh; }

/* Layout */
.sidebar { width: 260px; background:var(--bg-secondary); padding:20px 0; border-right:1px solid var(--border-color); display:flex; flex-direction:column; flex-shrink: 0; }
.sidebar h2 { color:var(--accent-blue); text-align:center; margin-bottom:30px; font-size:20px; text-transform: uppercase; letter-spacing: 1px; }
.nav-item { padding:14px 24px; cursor:pointer; transition:all 0.2s; border-left:3px solid transparent; display: flex; align-items: center; gap: 10px; }
.nav-item:hover { background:var(--bg-tertiary); }
.nav-item.active { background:var(--bg-tertiary); border-left-color:var(--accent-blue); color:var(--accent-blue); }

.main { flex:1; padding:30px; overflow-y:auto; }
.header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; border-bottom:1px solid var(--border-color); padding-bottom:15px; }
.header h1 { margin:0; font-size: 24px; }
.header form { margin: 0; }
.header button { transition: color 0.2s; }

/* Cards & Stats */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; margin-bottom:30px; }
.stat-card { background:var(--bg-secondary); padding:24px; border-radius:12px; border:1px solid var(--border-color); transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.stat-card h3 { margin:0 0 12px 0; color:var(--text-muted); font-size:13px; text-transform:uppercase; letter-spacing: 0.5px; font-weight: 600; }
.stat-card .val { font-size:32px; font-weight:bold; color:var(--accent-green); }

/* Tables */
.table-wrapper { background:var(--bg-secondary); border-radius:12px; border:1px solid var(--border-color); overflow:hidden; margin-bottom: 20px; }
table { width:100%; border-collapse:collapse; }
th, td { padding:16px; text-align:left; border-bottom:1px solid var(--border-color); font-size:14px; }
th { background:var(--bg-tertiary); color:var(--text-muted); font-weight:600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }
tr:last-child td { border-bottom: none; }
tr:hover { background: rgba(255, 255, 255, 0.02); }
td img, td svg { vertical-align: middle; }

/* Buttons */
button { background:var(--accent-blue); color:white; border:none; padding:8px 16px; border-radius:6px; cursor:pointer; font-size:14px; font-weight: 500; transition: all 0.2s; }
button:hover { filter: brightness(1.1); }
.btn-secondary { background:var(--bg-tertiary); border:1px solid var(--border-color); color: var(--text-main); }
.btn-danger { background:var(--accent-red); }
.btn-success { background:var(--accent-green); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* Forms & Inputs */
input[type="text"], input[type="number"], input[type="password"], select, textarea {
    width: 100%; background: var(--bg-main); border: 1px solid var(--border-color); color: var(--text-main); 
    padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 16px; outline: none; transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent-blue); }
label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Modals */
.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index:9999; justify-content:center; align-items:center; }
.modal-content { background:var(--bg-secondary); padding:32px; border-radius:16px; width:100%; max-width:500px; border: 1px solid var(--border-color); box-shadow: 0 8px 24px rgba(0,0,0,0.4); max-height: 90vh; overflow-y: auto; }
.modal-content h3 { margin-top: 0; margin-bottom: 24px; color: var(--text-main); font-size: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

/* Misc */
.placeholder { color:var(--text-muted); text-align:center; padding:40px; font-size:16px; }
.hidden { display:none; }
.flex-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.comment-box { background: var(--bg-tertiary); padding: 10px; border-radius: 6px; font-size: 12px; color: var(--text-muted); margin-top: 5px; white-space: pre-wrap; }