*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;background:#0d1117;color:#c9d1d9;min-height:100vh;display:flex}
.sidebar{width:220px;background:#161b22;border-right:1px solid #21262d;padding:20px 0;display:flex;flex-direction:column;min-height:100vh}
.sidebar h1{font-size:16px;font-weight:600;color:#e8eaed;padding:0 20px 20px;border-bottom:1px solid #21262d;margin-bottom:16px}
.sidebar a{display:block;padding:10px 20px;color:#8b949e;text-decoration:none;font-size:14px;cursor:pointer;border-left:3px solid transparent}
.sidebar a:hover,.sidebar a.active{color:#e8eaed;background:#1c2129;border-left-color:#58a6ff}
.sidebar-spacer{flex:1}
.sidebar-logout{padding:16px 20px;border-top:1px solid #21262d}
.sidebar-logout a{color:#8b949e;font-size:13px;cursor:pointer;text-decoration:none}
.main{flex:1;padding:30px;overflow-y:auto}
.card{background:#161b22;border:1px solid #21262d;border-radius:8px;padding:20px;margin-bottom:20px}
.card h2{font-size:15px;font-weight:600;color:#e8eaed;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #21262d}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 12px;color:#8b949e;font-weight:500;border-bottom:1px solid #21262d}
td{padding:10px 12px;border-bottom:1px solid #1c2129}
.btn{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;border:none}
.btn-primary{background:#238636;color:#fff}
.btn-primary:hover{background:#2ea043}
.btn-danger{background:#da3633;color:#fff}
.btn-outline{background:transparent;color:#c9d1d9;border:1px solid #30363d}
.btn-sm{padding:4px 10px;font-size:12px}
input,select{background:#0d1117;border:1px solid #30363d;border-radius:6px;padding:8px 12px;color:#c9d1d9;font-size:13px;width:100%}
input:focus,select:focus{outline:none;border-color:#58a6ff}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;color:#8b949e;margin-bottom:6px}
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:100;align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-content{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:24px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto}
.toast{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:8px;font-size:13px;z-index:200;animation:slideIn .3s}
.toast.success{background:#238636;color:#fff}
.toast.error{background:#da3633;color:#fff}
.empty{text-align:center;padding:40px;color:#484f58}
.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}
.badge-green{background:#238636;color:#fff}
.badge-red{background:#da3633;color:#fff}
.badge-gray{background:#30363d;color:#8b949e}
.badge-blue{background:#1f6feb;color:#c9d1d9}
.progress-bar{background:#21262d;border-radius:4px;height:8px;overflow:hidden;margin:8px 0}
.progress-fill{background:#238636;height:100%;width:0;animation:progress 3s infinite}
@keyframes progress{0%{width:0}50%{width:70%}100%{width:95%}}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.spinner{width:32px;height:32px;border:3px solid #30363d;border-top-color:#58a6ff;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
@media (max-width:900px){
  body{flex-direction:column}
  .sidebar{width:100%;min-height:auto;flex-direction:row;align-items:center;padding:10px 16px}
  .sidebar > div:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
  .sidebar h1{padding:0;border:none;margin:0 12px 0 0;font-size:14px}
  .sidebar a{display:inline-block;padding:8px 10px;border-left:none;border-bottom:2px solid transparent;font-size:13px;white-space:nowrap}
  .sidebar a:hover,.sidebar a.active{border-left:none;border-bottom-color:#58a6ff;background:transparent}
  .sidebar-spacer{display:none}
  .sidebar-logout{padding:0;border:none;margin-left:auto}
  .main{padding:16px}
  table{display:block;overflow-x:auto}
}
@media (max-width:520px){
  .main{padding:12px}
  .card{padding:14px}
  .modal-content{width:95%}
}