:root{
  --bg-base:#12181D;
  --bg-surface:#1B2329;
  --bg-raised:#232C33;
  --bg-raised-hover:#2A343B;
  --border:#2B343B;
  --border-soft:#222A30;
  --gold:#D9A548;
  --gold-soft:#E8C27D;
  --gold-dim:rgba(217,165,72,0.14);
  --teal:#4C8C82;
  --teal-soft:#6FAFA4;
  --teal-dim:rgba(76,140,130,0.16);
  --danger:#C1524A;
  --danger-dim:rgba(193,82,74,0.15);
  --text-1:#F3EFE6;
  --text-2:#AFB6BB;
  --text-3:#727A80;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-card:0 8px 24px rgba(0,0,0,0.28);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg-base); color:var(--text-1); font-family:'Plus Jakarta Sans', sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; margin:0;}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.muted{color:var(--text-2);}
.faint{color:var(--text-3);}
.hidden{display:none !important;}
.row{display:flex; align-items:center;}
.between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}

svg.i{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:99px; font-size:12.5px; font-weight:600;}
.pill.gold{background:var(--gold-dim); color:var(--gold-soft);}
.pill.teal{background:var(--teal-dim); color:var(--teal-soft);}
.pill.danger{background:var(--danger-dim); color:#E39089;}
.pill.plain{background:var(--bg-raised); color:var(--text-2); border:1px solid var(--border);}

.btn{border:none; cursor:pointer; border-radius:12px; padding:11px 20px; font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:transform .12s ease, background .15s ease;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--gold); color:#1B140A;}
.btn-primary:hover{background:var(--gold-soft);}
.btn-ghost{background:transparent; color:var(--text-1); border:1px solid var(--border);}
.btn-ghost:hover{background:var(--bg-raised);}
.btn-teal{background:var(--teal); color:#0D211E;}
.btn-teal:hover{background:var(--teal-soft);}
.btn-danger-outline{background:transparent; border:1px solid var(--danger); color:#E39089;}
.btn-sm{padding:7px 14px; font-size:13px; border-radius:9px;}

.card{background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow-card);}

input, select, textarea{width:100%; background:var(--bg-raised); border:1px solid var(--border); color:var(--text-1); padding:11px 13px; border-radius:10px; font-size:14.5px; font-family:inherit; outline:none;}
input::placeholder, textarea::placeholder{color:var(--text-3);}
input:focus, select:focus, textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim);}
label.field-label{font-size:12.5px; color:var(--text-2); font-weight:600; margin-bottom:6px; display:block;}
.field{margin-bottom:16px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
input[type="file"]{padding:9px;}

button:focus-visible, input:focus-visible, a:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* ---- alerts ---- */
.alert{padding:13px 18px; border-radius:12px; margin-bottom:20px; font-size:14px; font-weight:600;}
.alert.success{background:var(--teal-dim); color:var(--teal-soft); border:1px solid var(--teal);}
.alert.error{background:var(--danger-dim); color:#E39089; border:1px solid var(--danger);}

/* ---- auth pages ---- */
.auth-page{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(circle at 18% 22%, rgba(217,165,72,0.10), transparent 40%),
             radial-gradient(circle at 82% 78%, rgba(76,140,130,0.10), transparent 42%), var(--bg-base);}
.auth-wrap{width:100%; max-width:920px; display:grid; grid-template-columns:1.1fr 1fr; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-soft); box-shadow:var(--shadow-card);}
.auth-visual{background:var(--bg-surface); padding:44px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;}
.auth-visual .brandmark{font-size:26px; display:flex; align-items:center; gap:10px;}
.auth-visual h1{font-size:32px; line-height:1.15; margin-top:28px; max-width:320px;}
.auth-visual p{color:var(--text-2); margin-top:14px; max-width:300px; font-size:14.5px; line-height:1.6;}
.ring-decor{position:absolute; right:-60px; bottom:-60px; opacity:0.9;}
.auth-form-side{background:var(--bg-base); padding:44px;}
.auth-form-side h2{font-size:22px; margin-bottom:22px;}
.auth-switch{font-size:13px; margin-top:16px; text-align:center; color:var(--text-3);}
.auth-switch a{color:var(--gold-soft); font-weight:600;}

/* ---- shell / sidebar ---- */
.shell{display:grid; grid-template-columns:248px 1fr; min-height:100vh;}
.sidebar{background:var(--bg-surface); border-right:1px solid var(--border-soft); padding:24px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;}
.brand{display:flex; align-items:center; gap:10px; padding:6px 10px 22px 10px;}
.brand .logo-ring{width:30px; height:30px;}
.brand .name{font-family:'Fraunces', serif; font-size:19px; font-weight:600;}
.navlink{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; color:var(--text-2); font-size:14.5px; font-weight:600; cursor:pointer; margin-bottom:2px;}
.navlink:hover{background:var(--bg-raised); color:var(--text-1);}
.navlink.active{background:var(--gold-dim); color:var(--gold-soft);}
.navlink.active svg{stroke:var(--gold-soft);}
.nav-section-label{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); padding:16px 12px 6px;}
.sidebar-footer{margin-top:auto; padding-top:16px; border-top:1px solid var(--border-soft);}
.pembina-chip{display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px;}
.pembina-chip-name{font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px;}
.avatar{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, var(--gold), var(--teal)); display:flex; align-items:center; justify-content:center; font-weight:700; color:#12181D; font-size:14px; flex-shrink:0;}

.main{padding:32px 40px; max-width:1180px;}
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px;}
.topbar h2{font-size:26px;}
.topbar .sub{color:var(--text-2); font-size:14px; margin-top:4px;}

/* ---- dashboard ---- */
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.stat-card{background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:20px;}
.stat-card .val{font-family:'IBM Plex Mono', monospace; font-size:30px; font-weight:500; margin-top:8px;}
.stat-card .lbl{font-size:13px; color:var(--text-2); font-weight:600;}
.dash-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; margin-top:20px;}
.ring-card{display:flex; flex-direction:column; align-items:center; text-align:center;}
.ring-card .caption{color:var(--text-2); font-size:13.5px; margin-top:14px; max-width:320px; line-height:1.6;}
.upa-list-card .upa-row{display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--border-soft);}
.upa-list-card .upa-row:last-child{border-bottom:none;}
.upa-list-card .upa-row:hover{background:var(--bg-raised); border-radius:10px;}
.mini-ring{width:44px; height:44px; flex-shrink:0;}
.section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.section-head h3{font-size:17px;}

/* ---- table ---- */
table{width:100%; border-collapse:collapse;}
th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-3); padding:10px 12px; border-bottom:1px solid var(--border);}
td{padding:13px 12px; border-bottom:1px solid var(--border-soft); font-size:14.5px; vertical-align:middle;}
tr:last-child td{border-bottom:none;}
td.mono{font-family:'IBM Plex Mono', monospace; font-size:13.5px; color:var(--text-2);}
.foto-thumb{width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--bg-raised);}

/* ---- upa cards ---- */
.upa-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px;}
.upa-card{cursor:pointer; transition:border-color .15s ease; display:block;}
.upa-card:hover{border-color:var(--gold);}
.upa-card .name{font-size:17px; margin-top:14px;}
.upa-card .meta{color:var(--text-2); font-size:13px; margin-top:4px;}

/* ---- forms page ---- */
.form-card{max-width:640px;}
.anggota-form-row{background:var(--bg-raised); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:14px;}
.remove-row-btn{width:34px; height:34px; border-radius:9px; background:var(--danger-dim); border:1px solid var(--danger); color:#E39089; cursor:pointer; display:flex; align-items:center; justify-content:center;}

/* ---- kehadiran ---- */
.att-controls{display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap;}
.att-controls select{width:auto; min-width:220px;}
.att-btn{padding:7px 16px; border-radius:9px; border:1px solid var(--border); background:var(--bg-raised); color:var(--text-2); cursor:pointer; font-weight:600; font-size:13.5px;}
.att-btn.on.hadir{background:var(--teal-dim); border-color:var(--teal); color:var(--teal-soft);}
.att-btn.on.absen{background:var(--danger-dim); border-color:var(--danger); color:#E39089;}
input.hidden-radio{position:absolute; opacity:0; width:0; height:0;}
input.hidden-radio:checked + label.att-btn.hadir{background:var(--teal-dim); border-color:var(--teal); color:var(--teal-soft);}
input.hidden-radio:checked + label.att-btn.absen{background:var(--danger-dim); border-color:var(--danger); color:#E39089;}
.att-toggle{display:inline-flex; gap:8px; position:relative;}

/* ---- target ---- */
.target-tabs{display:flex; gap:8px; margin-bottom:18px;}
.target-tab{padding:9px 18px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text-2); cursor:pointer; font-weight:600; font-size:13.5px;}
.target-tab.active{background:var(--gold-dim); color:var(--gold-soft); border-color:var(--gold);}
.target-item{display:flex; align-items:center; gap:16px; padding:16px 4px; border-bottom:1px solid var(--border-soft);}
.target-item:last-child{border-bottom:none;}
.target-item .info{flex:1;}
.target-item .prog-track{height:7px; background:var(--bg-raised); border-radius:99px; margin-top:8px; overflow:hidden;}
.target-item .prog-fill{height:100%; background:var(--gold); border-radius:99px;}

/* ---- materi ---- */
.materi-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px;}
.materi-card .file-icon{width:44px; height:44px; border-radius:10px; background:var(--danger-dim); color:#E39089; display:flex; align-items:center; justify-content:center;}
.materi-card .title{font-size:15px; font-weight:700; margin-top:12px;}
.materi-card .meta{font-size:12.5px; color:var(--text-3); margin-top:4px;}
.jadwal-tag{display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:12px;}

.empty-state{text-align:center; padding:50px 20px; color:var(--text-2);}
.empty-state svg{margin-bottom:14px; opacity:0.6;}

@media (max-width: 880px){
  .shell{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .main{padding:20px;}
  .dash-grid, .grid-3, .field-row{grid-template-columns:1fr;}
  .auth-wrap{grid-template-columns:1fr;}
  .auth-visual{display:none;}
}