:root{
  --bg:#0a0d16; --bg2:#0e1320; --panel:rgba(18,24,40,.72);
  --line:rgba(120,150,200,.16); --line2:rgba(120,150,200,.30);
  --txt:#e8eefc; --dim:#93a3c4; --dim2:#6c7d9e;
  --mint:#60e6c0; --mint2:#a7f3e0; --biru:#59d0f0; --ungu:#a78bfa;
  --merah:#f87171; --kuning:#f5c451;
  --r:14px; --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
/* Atribut 'hidden' pelayar hanya kesan lalai, jadi apa-apa aturan pengarang dengan
   'display' (cth .gerbang{display:grid}, button{display:inline-flex}) akan
   mengalahkannya dan elemen itu tidak pernah hilang. Aturan ini memaksa ia patuh. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(96,230,192,.09), transparent 60%),
    radial-gradient(900px 560px at 4% 6%, rgba(89,208,240,.07), transparent 55%),
    linear-gradient(180deg,var(--bg2),var(--bg) 45%);
  color:var(--txt); font:15px/1.55 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;
}
h1,h2,h3{margin:0}

/* ---------------- gerbang masuk ---------------- */
.gerbang{min-height:100vh; display:grid; place-items:center; padding:20px}
.kotak-masuk{
  width:100%; max-width:380px; padding:30px 28px; text-align:center;
  border:1px solid var(--line); border-radius:18px; background:var(--panel);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.lencana{
  width:58px; height:58px; margin:0 auto 14px; display:grid; place-items:center;
  border-radius:16px; border:1px solid var(--line2);
  background:linear-gradient(150deg, rgba(96,230,192,.16), rgba(89,208,240,.10));
}
.kotak-masuk h1{font-size:19px; letter-spacing:.16em; font-weight:800}
.kotak-masuk .sari{margin:6px 0 22px; font-size:12.5px; color:var(--dim)}
.kotak-masuk label{display:block; text-align:left; font-size:12px; color:var(--dim2);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px}
.kotak-masuk input{
  width:100%; padding:12px 14px; border-radius:11px; font-size:15px;
  background:rgba(10,14,24,.6); border:1px solid var(--line2); color:var(--txt); outline:none;
}
.kotak-masuk input:focus{border-color:var(--mint); box-shadow:0 0 0 3px rgba(96,230,192,.14)}
.kotak-masuk button{margin-top:16px; width:100%; padding:13px}
.ralat{margin:12px 0 0; font-size:12.5px; color:var(--merah)}

/* ---------------- kepala ---------------- */
.aplikasi{display:block}
.top{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 18px; border-bottom:1px solid var(--line);
  background:rgba(10,13,22,.6); backdrop-filter:blur(10px); position:sticky; top:0; z-index:20;
}
.jenama{display:flex; align-items:center; gap:11px}
.jenama h1{font-size:16px; letter-spacing:.14em; font-weight:800}
.jenama p{margin:2px 0 0; font-size:11.5px; color:var(--dim)}
.top-kanan{display:flex; align-items:center; gap:10px}
.pilih{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--dim2)}
.pilih select{
  max-width:min(46vw,330px); padding:7px 10px; border-radius:9px; font-size:12px;
  background:rgba(10,14,24,.6); border:1px solid var(--line2); color:var(--txt);
  font-family:var(--mono);
}

/* ---------------- butang ---------------- */
button{
  font:600 12.5px system-ui,sans-serif; color:var(--txt); cursor:pointer;
  background:rgba(120,150,200,.10); border:1px solid var(--line2);
  border-radius:10px; padding:9px 13px; transition:.15s;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
button:hover{background:rgba(120,150,200,.18); border-color:rgba(120,150,200,.44)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45; cursor:not-allowed; transform:none}
button.utama{
  background:linear-gradient(140deg, rgba(96,230,192,.22), rgba(89,208,240,.14));
  border-color:rgba(96,230,192,.5); color:var(--mint2);
}
button.utama:hover{background:linear-gradient(140deg, rgba(96,230,192,.32), rgba(89,208,240,.2))}
button.besar{padding:13px 22px; font-size:14px; flex:1}
button.kecil{padding:7px 11px; font-size:11.5px}

/* ---------------- tab ---------------- */
.tab-nav{
  display:flex; gap:6px; padding:0 18px; border-bottom:1px solid var(--line);
  flex-wrap:wrap; background:rgba(10,13,22,.35);
}
.tab-nav button{
  border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent;
  color:var(--dim); padding:12px 15px; font-size:13px;
}
.tab-nav button:hover{color:var(--txt); background:rgba(120,150,200,.07)}
.tab-nav button.aktif{color:var(--mint); border-bottom-color:var(--mint)}

/* ---------------- susun atur ---------------- */
main{
  display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:14px;
  padding:14px 18px 22px; align-items:start;
}
@media (max-width:1020px){ main{grid-template-columns:1fr} }

.panel{
  border:1px solid var(--line); border-radius:var(--r); padding:15px;
  background:var(--panel); display:flex; flex-direction:column; gap:11px;
}
.kepala-panel{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.kepala-panel h2{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim2); font-weight:700}
.kira{font:700 11.5px var(--mono); color:var(--mint)}

.nota{margin:0; font-size:11.5px; color:var(--dim2); line-height:1.6}
.nota b{color:var(--mint2)}

textarea{
  width:100%; padding:12px 13px; border-radius:11px; resize:vertical;
  background:rgba(8,11,20,.66); border:1px solid var(--line2); color:var(--txt);
  font:13px/1.55 var(--mono); outline:none;
}
textarea:focus{border-color:rgba(96,230,192,.55); box-shadow:0 0 0 3px rgba(96,230,192,.10)}
textarea::placeholder{color:var(--dim2)}

.medan{display:flex; flex-direction:column; gap:6px}
.medan span{font-size:11px; color:var(--dim2); text-transform:uppercase; letter-spacing:.08em}
.medan input, .medan select{
  padding:10px 12px; border-radius:10px; font-size:13px;
  background:rgba(8,11,20,.6); border:1px solid var(--line2); color:var(--txt); outline:none;
  font-family:var(--mono);
}
.medan input:focus, .medan select:focus{border-color:rgba(96,230,192,.55)}

.semak{
  display:flex; align-items:flex-start; gap:9px; padding:9px 11px; cursor:pointer;
  border:1px solid var(--line2); border-radius:10px; background:rgba(8,11,20,.4);
}
.semak input{width:16px; height:16px; margin:2px 0 0; accent-color:#60e6c0; flex:none}
.semak span{font-size:12px; color:var(--dim); line-height:1.45}
.semak:hover{border-color:rgba(96,230,192,.4)}

.lajur-btn{display:flex; gap:8px; flex-wrap:wrap}
.lajur-btn.jana{margin-top:2px}
.lajur-btn.jana button.utama{flex:1}

/* ---------------- kemajuan ---------------- */
.kemajuan{
  border:1px solid var(--line); border-radius:11px; padding:12px;
  background:rgba(8,11,20,.42); display:flex; flex-direction:column; gap:9px;
}
.baris-kemajuan{display:flex; align-items:center; gap:10px}
.bar-kemajuan{flex:1; height:8px; border-radius:999px; background:rgba(120,150,200,.14); overflow:hidden}
.bar-kemajuan span{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--mint), var(--biru)); transition:width .3s;
}
.peratus{
  font:700 13px var(--mono); color:var(--mint); min-width:44px; text-align:right;
  font-variant-numeric:tabular-nums;
}
.status{margin:0; font:700 12px var(--mono); color:var(--mint2)}
.log{margin:0; padding-left:17px; max-height:170px; overflow:auto;
  font:11.5px/1.6 var(--mono); color:var(--dim)}
.log li{margin-bottom:2px}
.log li.ralat{color:var(--merah)}
.log li.nota{color:var(--kuning)}

/* ---------------- semakan ---------------- */
.semakan{border:1px solid var(--line); border-radius:11px; padding:12px; background:rgba(8,11,20,.42)}
.semakan h3{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim2); margin-bottom:8px}
.semakan ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px}
.semakan li{font:12px var(--mono); color:var(--dim); display:flex; gap:8px; align-items:baseline}
.semakan li b{color:var(--txt)}
.tanda-ok{color:var(--mint)}
.tanda-amaran{color:var(--kuning)}

/* ---------------- kaki ---------------- */
footer{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:14px 18px; border-top:1px solid var(--line); font-size:11.5px; color:var(--dim2);
}
footer .dot{color:var(--mint)}

@media (max-width:640px){
  main{padding:12px}
  .top{padding:11px 13px}
  .tab-nav{padding:0 12px}
  .tab-nav button{padding:11px 10px; font-size:12px}
  .pilih select{max-width:56vw}
}