:root{
  --bg:#0f1115;
  --card:#171a21;
  --card2:#1f232c;
  --border:#2a2f3a;
  --text:#e8eaed;
  --muted:#9aa0ab;
  --accent:#4f8cff;
  --success:#2ecc71;
  --warning:#f5a623;
  --danger:#ff5b5b;
  --radius:12px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--text);
}
a{color:var(--accent); text-decoration:none;}

.topbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:14px 24px; background:var(--card); border-bottom:1px solid var(--border);
}
.brand{font-weight:700; font-size:16px;}
.nav{display:flex; gap:6px; flex-wrap:wrap;}
.nav a{padding:8px 14px; border-radius:8px; color:var(--muted); font-size:14px;}
.nav a.active, .nav a:hover{background:var(--card2); color:var(--text);}
.user-info{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted);}
.btn-logout{background:var(--card2); border:1px solid var(--border); padding:6px 12px; border-radius:8px; color:var(--text)!important;}

.container{max-width:1100px; margin:0 auto; padding:24px;}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; margin-bottom:16px;
}
.section-title{font-size:14px; font-weight:600; margin-bottom:12px;}
.subtitle{color:var(--muted); font-size:13px; margin-bottom:20px;}

.row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;}
.field{flex:1; min-width:160px;}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px;}

input[type=text], input[type=password], input[type=date], select, textarea{
  background:var(--card2); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:9px 10px; font-size:14px; width:100%;
}
textarea{min-height:110px; font-family:inherit; resize:vertical;}

button, .btn{
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:10px 16px; font-size:14px; cursor:pointer; font-weight:600; display:inline-block;
}
button.secondary, .btn.secondary{background:var(--card2); border:1px solid var(--border); color:var(--text); font-weight:500;}
button.danger{background:var(--danger); color:#2b0000;}
button.small{padding:6px 10px; font-size:12px;}
button:hover, .btn:hover{opacity:0.9;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th, td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--border);}
th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.3px;}

.task-row{display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.task-row:last-child{border-bottom:none;}
.task-text{flex:1; min-width:180px; font-size:14px;}
.status-btns{display:flex; gap:4px;}
.status-btn{padding:5px 10px; border-radius:6px; border:1px solid var(--border); background:var(--card2); color:var(--muted); font-size:12px; cursor:pointer;}
.status-btn.selesai.active{background:var(--success); color:#04210f; border-color:var(--success);}
.status-btn.belum.active{background:var(--danger); color:#2b0000; border-color:var(--danger);}
.status-btn.sebagian.active{background:var(--warning); color:#2b1900; border-color:var(--warning);}
.note-input{width:180px;}

.badge{padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700;}
.badge.selesai{background:rgba(46,204,113,0.15); color:var(--success);}
.badge.belum{background:rgba(255,91,91,0.15); color:var(--danger);}
.badge.sebagian{background:rgba(245,166,35,0.15); color:var(--warning);}

.pct-bar{background:var(--card2); border-radius:6px; overflow:hidden; height:8px; width:100px;}
.pct-fill{height:8px;}
.flag-low{color:var(--danger); font-weight:700;}

.chip{display:inline-flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--border); border-radius:20px; padding:5px 10px; font-size:13px; margin:3px 6px 3px 0;}
.chip form{margin:0;}
.chip button{background:none; border:none; color:var(--muted); padding:0; font-size:14px; cursor:pointer;}

.empty{color:var(--muted); font-size:13px; padding:20px 0; text-align:center;}
.note-text{color:var(--muted); font-size:12px; font-style:italic; margin:2px 0 8px 0;}

.alert{padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:14px;}
.alert.error{background:rgba(255,91,91,0.12); color:var(--danger); border:1px solid rgba(255,91,91,0.3);}
.alert.success{background:rgba(46,204,113,0.12); color:var(--success); border:1px solid rgba(46,204,113,0.3);}

.login-wrap{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;}
.login-card{width:100%; max-width:360px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:28px;}
.login-card h1{font-size:18px; margin:0 0 4px 0;}
.login-card p{color:var(--muted); font-size:13px; margin:0 0 20px 0;}
.login-card label{margin-top:12px;}
.login-card button{width:100%; margin-top:18px;}