/* ============ Base Theme ============ */
:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --accent:#2563eb;
  --brand:#22c55e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  background: radial-gradient(1200px 800px at 20% -10%, #1e293b 0%, #0b1220 55%) fixed, var(--bg);
  color:var(--text);
}
.container{width:min(1100px, 92%); margin:0 auto; padding:16px 0 48px}
.page-title{margin:24px 0 14px; font-size:28px; font-weight:800; letter-spacing:.3px}

/* Navbar */
.navbar{background:rgba(2,6,23,.5); border-bottom:1px solid rgba(255,255,255,.06); backdrop-filter: blur(8px); position:sticky; top:0; z-index:1000}
.navbar .inner{display:flex; align-items:center; gap:12px; padding:10px 0; width:min(1100px,92%); margin:0 auto}
.navbar a{color:#cbd5e1; text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:700}
.navbar a:hover{background:rgba(255,255,255,.08); color:#fff}

/* Cards */
.card{background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(15,23,42,.9)); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; margin:16px 0; box-shadow:0 10px 25px rgba(0,0,0,.35)}
.card-ghost{background:rgba(255,255,255,.02); border:1px dashed rgba(255,255,255,.07)}
.section-title{margin:0 0 10px; font-size:22px; font-weight:800}
.muted{color:var(--muted); font-size:12px}

/* Form */
.form-group{margin-bottom:14px}
label{display:block; font-weight:700; margin-bottom:6px}
input[type="text"], input[type="date"], input[type="number"], .textarea {
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:#0b1220; color:#e2e8f0; outline:none;
}
input:focus, .textarea:focus{border-color:#334155; box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.textarea{min-height:110px; resize:vertical}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 800px){ .grid-2{grid-template-columns:1fr} }

/* Radio tiles */
.passing-header{font-weight:800; margin-bottom:8px}
.radio-stack{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:10px}
.radio-tile{display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; background:#0b1220; border:1px solid rgba(255,255,255,.08); cursor:pointer}
.radio-tile:hover{border-color:#475569}
.radio-tile input{transform:scale(1.3)}
.radio-text{font-weight:700}

/* Profile */
.profile-grid{display:grid; grid-template-columns:160px 1fr; gap:16px; align-items:start}
@media (max-width: 720px){ .profile-grid{grid-template-columns:1fr} }
.profile-photo{width:100%; max-width:160px; aspect-ratio:3/4; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.12)}
.profile-info{display:grid; gap:8px}
.info-row{display:flex; justify-content:space-between; gap:14px; background:#0b1220; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px 12px}
.info-row span{color:var(--muted)}

/* Table */
.table-container{width:100%; overflow-x:auto}
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden}
.table thead th{position:sticky; top:0; background:#0b1220; color:#e2e8f0; text-align:left; padding:12px; border-bottom:1px solid rgba(255,255,255,.08)}
.table tbody td, .table tfoot th{padding:12px; border-bottom:1px solid rgba(255,255,255,.06)}
.table tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.text-right{text-align:right}

/* Badges & Buttons */
.badge{display:inline-block; padding:8px 14px; border-radius:9999px; font-weight:800; font-size:14px; line-height:1; border:1px solid rgba(255,255,255,.12); color:#fff}
.badge-good{background:#16a34a} .badge-medium{background:#f59e0b} .badge-poor{background:#ef4444} .badge-verypoor{background:#991b1b} .badge-neutral{background:#475569}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.06); background:#0b1220; color:#e2e8f0; text-decoration:none; font-weight:800; cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn-lg{padding:14px 22px; font-size:16px}
.btn-primary{background:linear-gradient(180deg, var(--accent), #1d4ed8); border-color:transparent}
.btn-success{background:linear-gradient(180deg, var(--brand), #16a34a); border-color:transparent; color:#04210f}
.btn-secondary{background:#374151}
.action-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

/* Big square buttons (steps) */
.steps-nav{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px; margin:10px 0 14px}
.step-btn{position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1/1; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:#0b1220; cursor:pointer; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.2)}
.step-btn:hover{transform:translateY(-2px)}
.step-btn.active{border-color:#93c5fd; box-shadow:0 12px 28px rgba(59,130,246,.35)}
.step-btn::before{content:""; position:absolute; inset:0; background-image:var(--bg, none); background-size:cover; background-position:center; background-repeat:no-repeat; opacity:.88}
.step-btn::after{content:""; position:absolute; inset:auto 0 0 0; height:42%; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%); opacity:0; transition:opacity .2s ease}
.step-btn.has-image::after{opacity:1}
.step-content{position:relative; z-index:2; display:grid; place-items:center; gap:10px; padding:10px; text-align:center}
.step-icon{font-size:42px; line-height:1}
.step-label{font-weight:900; letter-spacing:.3px; font-size:16px; color:#e2e8f0; text-shadow: 0 1px 2px rgba(0,0,0,.4)}
.step-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9}

/* Floating "to top" button */
#toTopBtn{
  position: fixed; right:20px; bottom:20px; z-index:999; display:none;
  padding:14px 18px; font-size:18px; border:none; border-radius:999px;
  background:#374151; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.25); cursor:pointer;
}
#toTopBtn:hover{ background:#4b5563; }

/* Canvas */
canvas{max-width:100%; height:auto; display:block; margin:auto}
/* ===== Bottom Navigation (mobile only) ===== */
.bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #0b1220;
  border-top: 1px solid rgba(255,255,255,.08);
  display: none;           /* default: nonaktif di layar besar */
  justify-content: space-around;
  padding: 6px 4px env(safe-area-inset-bottom);
  z-index: 999;
}
.bn-item{
  flex: 1;
  text-decoration: none;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}
.bn-item:hover{ background: rgba(255,255,255,.06); color:#fff; }
.bn-item.active{ background: rgba(37,99,235,.18); color:#fff; }

.bn-icon{
  width: 22px; height: 22px; fill: currentColor;
}
.bn-label{
  font-size: 11px; line-height: 1; letter-spacing: .2px;
}

/* Tampilkan bottom-nav di layar kecil, sembunyikan navbar atas */
@media (max-width: 768px){
  .navbar{ display: none; }
  .bottom-nav{ display: flex; }
  body{ padding-bottom: 64px; } /* ruang untuk nav bawah */
}
.bottom-nav{
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #0b1220;
  border-top: 1px solid rgba(255,255,255,.08);
  display: none;
  justify-content: space-around;
  padding: 6px 4px env(safe-area-inset-bottom);
  z-index: 999;
}
.bn-item{
  flex: 1;
  text-decoration: none;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 10px;
}
.bn-item:hover{ background: rgba(255,255,255,.08); color:#fff; }
.bn-item.active{ background: rgba(37,99,235,.18); color:#fff; }
.bn-icon{ font-size: 24px; }
.bn-label{ font-size: 11px; }

/* tampilkan di layar kecil */
@media (max-width: 768px){
  .navbar{ display: none; }
  .bottom-nav{ display: flex; }
  body{ padding-bottom: 64px; }
}