:root{
  --bg:#070b12;
  --panel:#0b101a;
  --panel2:#0f1624;
  --border: rgba(255,255,255,0.08);
  --text:#e8edf7;
  --muted:#a5afc2;

  --accent: rgba(58,140,255,0.22);
  --accentBorder: rgba(58,140,255,0.55);

  --danger: rgba(255,80,90,0.20);
  --dangerBorder: rgba(255,80,90,0.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1000px 600px at 50% 0%, rgba(30,60,120,0.28), transparent 60%),
              var(--bg);
  color:var(--text);
}

/* ===== BUTTONS ===== */
.btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color:var(--text);
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
}
.btn:hover{ background: rgba(255,255,255,0.06); }
.btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

.btn.primary{
  background: var(--accent);
  border-color: var(--accentBorder);
}
.btn.primary:hover{ filter: brightness(1.05); }

.btn.ghost{
  background: rgba(255,255,255,0.02);
}

/* ===== APP ===== */
.app{
  min-height:100vh;
  padding:16px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(255,255,255,0.02);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

.brand-title{
  font-size:18px;
  font-weight:900;
}
.brand-subtitle{
  margin-top:3px;
  font-size:12px;
  color:var(--muted);
}

.topbar-right{
  display:flex;
  gap:12px;
  align-items:center;
}
.me{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.me-user{ font-weight:900; font-size:13px; }
.me-role{ font-size:12px; color:var(--muted); }

.layout{
  margin-top:14px;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:14px;
}

/* ===== SIDEBAR ===== */
.sidebar{
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(255,255,255,0.02);
  padding:14px;
  height: calc(100vh - 16px - 16px - 14px - 74px);
  position: sticky;
  top:16px;
  overflow:auto;
}

.nav-title{
  font-weight:900;
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.nav-item{
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  margin-bottom:8px;
  font-weight:800;
  font-size:13px;
}
.nav-item:hover{
  background: rgba(255,255,255,0.05);
}
.nav-item.active{
  background: var(--accent);
  border-color: var(--accentBorder);
}

.nav-divider{
  height:1px;
  background: var(--border);
  margin:12px 0;
}

.sidebar-status-title{
  font-weight:900;
  margin-bottom:6px;
}
.status-box{
  margin:0;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(0,0,0,0.25);
  font-size:12px;
  color:var(--muted);
  white-space:pre-wrap;
  min-height:120px;
}

/* ===== MAIN ===== */
.main{
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(255,255,255,0.02);
  padding:14px;
  min-height: calc(100vh - 16px - 16px - 14px - 74px);
  overflow:auto;
}

.view{ display:none; }
.view.active{ display:block; }

.page-title{
  font-weight:950;
  font-size:16px;
}
.page-subtitle{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}

.card{
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(0,0,0,0.20);
  padding:14px;
}

.card-title{
  font-weight:900;
  margin-bottom:8px;
}

.card-actions{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.muted{ color:var(--muted); }
.small{ font-size:12px; }

.mono{
  margin:0;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(0,0,0,0.25);
  white-space:pre-wrap;
}

/* ===== CATEGORY ===== */
.category-box{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.radio{
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  background: rgba(255,255,255,0.02);
}
.radio:hover{ background: rgba(255,255,255,0.05); }
.radio input{ cursor:pointer; }

/* ===== FILE ===== */
.file-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.file-name{
  flex:1;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(255,255,255,0.02);
  color:var(--muted);
  font-size:13px;
}

/* ===== DETAILS ===== */
.details{
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background: rgba(255,255,255,0.01);
}
.details summary{
  cursor:pointer;
  font-weight:800;
  color:var(--muted);
}

/* Header chips */
.header-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.header-chip{
  font-size:12px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background: rgba(255,255,255,0.02);
  color:var(--muted);
}

/* ===== SEND ===== */
.send-row{
  display:flex;
  align-items:center;
  gap:12px;
}

/* ===== TABS ===== */
.tabs{
  display:flex;
  gap:8px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(255,255,255,0.02);
  margin-top:10px;
}

.tab-btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color:var(--text);
  padding:8px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  font-size:13px;
}
.tab-btn.active{
  background: var(--accent);
  border-color: var(--accentBorder);
}

.tab-panel{ display:none; margin-top:10px; }
.tab-panel.active{ display:block; }

/* ===== GRADE HEAD ===== */
.grade-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.grade-title{
  font-weight:950;
  font-size:14px;
}
.pill{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  background: rgba(255,255,255,0.02);
}

/* ===== TABLE ===== */
.table-wrap{
  margin-top:10px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(0,0,0,0.20);
  max-height: 420px;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width: 900px;
}

.table thead th{
  position:sticky;
  top:0;
  background: rgba(10,16,26,0.92);
  border-bottom:1px solid var(--border);
  padding:10px 10px;
  font-size:12px;
  text-align:left;
  white-space:nowrap;
}
.table tbody td{
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding:10px 10px;
  font-size:12px;
  color:var(--text);
  white-space:nowrap;
}

/* ===== LEADERBOARD ===== */
.leaderboard{
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background: rgba(0,0,0,0.22);
}
.lb-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 6px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.lb-item:last-child{ border-bottom:none; }
.lb-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.lb-rank{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--muted);
  font-weight:900;
}
.lb-user{ font-weight:800; font-size:13px; }
.lb-total{ color:var(--muted); font-size:12px; }

/* ===== STATS DETAIL ===== */
.stats-detail{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.stats-cat{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background: rgba(0,0,0,0.20);
}

.stats-cat summary{
  cursor:pointer;
  font-weight:900;
}

.stats-mini{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.stats-mini-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background: rgba(0,0,0,0.18);
  min-width: 180px;
}

.stats-row{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px;
  margin-top:6px;
}

.grade-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.grade-badge{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color:var(--muted);
  background: rgba(255,255,255,0.02);
}

/* ===== ADMIN ===== */
.admin-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

.admin-row-sort {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr auto;
  gap: 10px;
  align-items: center;
}
@media (max-width: 900px) {
  .admin-row-sort {
    grid-template-columns: 1fr;
  }
}

.admin-row-user {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr auto;
  gap: 10px;
}

.input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);

  color: #fff;
  font-size: 14px;
  outline: none;
}

.input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.input:focus {
  border-color: rgba(100, 160, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
}

.audit-controls {
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.select{
  flex:1;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
}

/* ===== LOGIN OVERLAY ===== */
.login-overlay{
  position:fixed;
  inset:0;
  display:none; /* ✅ default disembunyikan */
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  z-index:9999;
}
.login-overlay.show{ display:flex; } /* ✅ tampil kalau JS add("show") */

.login-card{
  width: 420px;
  border:1px solid var(--border);
  border-radius:22px;
  background: rgba(10,14,22,0.92);
  padding:18px;
  box-shadow: 0 30px 120px rgba(0,0,0,0.65);
}
.login-title{
  font-size:18px;
  font-weight:950;
}
.login-subtitle{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.login-form{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.login-form input{
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color:var(--text);
  padding:12px 14px;
  border-radius:16px;
  outline:none;
  font-weight:800;
}
.login-form input:focus{
  border-color: var(--accentBorder);
  box-shadow: 0 0 0 3px rgba(58,140,255,0.15);
}

.admin-only{ display:none; }

/* responsive */
@media (max-width: 1000px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position:relative; height:auto; }
  .grid-2{ grid-template-columns:1fr; }
}
select {
  color: #e5e7eb;
  background-color: #0b1220;
}

select option {
  color: #111;
  background-color: #fff;
}