@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ================================================================
   EDIT DATA SISWA DI FILE INI ADA DI BAWAH, CARI TULISAN:
   "EDIT DATA DI SINI" di bagian JavaScript paling bawah.
   ================================================================ */

:root{
  --bg:#f5f6f1;
  --paper:#ffffff;
  --ink:#1e2a24;
  --muted:#6c766e;
  --line:#dde3d8;
  --primary:#1f6f5c;
  --primary-soft:#e4efe9;
  --gold:#d9a441;
  --gold-soft:#faf1de;
  --high:#2f8f5b;
  --mid:#d9a441;
  --low:#c96a3f;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:760px;margin:0 auto;padding:36px 20px 60px;}

/* ---------- header ---------- */
.masthead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:28px;
}
.brand{
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--primary);
  letter-spacing:.02em;
}
.brand span{color:var(--gold);}
.masthead .date{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--muted);
  text-align:right;
}

.hero{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 26px;
  margin-bottom:22px;
}
.hero .eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.hero h1{
  font-family:'Sora',sans-serif;
  font-size:26px;
  font-weight:800;
  margin:0 0 4px;
  line-height:1.25;
}
.hero h1 .name{color:var(--primary);}
.hero .program{
  font-size:14px;
  color:var(--muted);
  margin:0 0 20px;
}

.stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.stat{
  background:var(--primary-soft);
  border-radius:12px;
  padding:14px 14px;
}
.stat .num{
  font-family:'Sora',sans-serif;
  font-size:24px;
  font-weight:800;
  color:var(--primary);
}
.stat .num.trend-up::after{content:" ↑";color:var(--high);}
.stat .num.trend-down::after{content:" ↓";color:var(--low);}
.stat .lbl{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* ---------- chart ---------- */
.chart-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 22px 12px;
  margin-bottom:26px;
}
.chart-card h2{
  font-family:'Sora',sans-serif;
  font-size:15px;
  font-weight:700;
  margin:0 0 14px;
}
.chart-box{height:220px;position:relative;}
.chart-box svg{overflow:visible;}
.chart-tip{
  position:absolute;
  transform:translate(-50%,-115%);
  background:#1e2a24;
  color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  padding:6px 9px;
  border-radius:6px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s ease;
  z-index:5;
}
.chart-tip.show{opacity:1;}
.chart-tip .t1{color:var(--gold);font-weight:600;}
.dot-hit{cursor:pointer;}

.insight{
  margin-top:16px;
  padding:14px 16px;
  background:var(--gold-soft);
  border-left:3px solid var(--gold);
  border-radius:0 10px 10px 0;
  font-size:13.5px;
  line-height:1.6;
  color:#4a3c1e;
}
.insight b{color:#8a5a12;}

/* ---------- journey / trail ---------- */
.journey-title{
  font-family:'Sora',sans-serif;
  font-size:15px;
  font-weight:700;
  margin:0 0 18px;
  padding-left:4px;
}

.trail{
  position:relative;
  padding-left:44px;
}
.trail::before{
  content:"";
  position:absolute;
  left:17px;
  top:8px;
  bottom:8px;
  width:2px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px);
}

.stop{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 18px;
  margin-bottom:14px;
}
.pin{
  position:absolute;
  left:-44px;
  top:16px;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Sora',sans-serif;
  font-weight:800;
  font-size:13px;
  color:#fff;
  border:3px solid var(--bg);
}
.pin.high{background:var(--high);}
.pin.mid{background:var(--mid);}
.pin.low{background:var(--low);}
.pin.pending{background:#b7bfb4;}

.stop-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
}
.stop-top .topik{
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:15px;
}
.stop-top .tanggal{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:var(--muted);
}
.stop-meta{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:8px;
}
.nilai-badge{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  font-weight:600;
  padding:2px 9px;
  border-radius:6px;
}
.nilai-badge.high{background:#e6f4ec;color:var(--high);}
.nilai-badge.mid{background:var(--gold-soft);color:#8a5a12;}
.nilai-badge.low{background:#fbe9e1;color:var(--low);}
.nilai-badge.pending{background:#eef0ec;color:var(--muted);}
.stop.pending{
  background:#fbfbf9;
  border-style:dashed;
}
.stop.pending .topik{color:var(--muted);}
.stars{font-size:12.5px;letter-spacing:1px;color:var(--gold);}
.stars .off{color:var(--line);}
.catatan{
  font-size:13.5px;
  color:#3b4640;
  line-height:1.55;
}

/* ---------- review murid ---------- */
.review-title{
  font-family:'Sora',sans-serif;
  font-size:15px;
  font-weight:700;
  margin:30px 0 14px;
  padding-left:4px;
}
.review-summary{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 24px 20px;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.review-summary .score-block{text-align:center;}
.review-summary .score-num{
  font-family:'Sora',sans-serif;
  font-weight:800;
  font-size:38px;
  color:var(--primary);
}
.review-summary .score-num small{font-size:16px;color:var(--muted);font-weight:600;}
.review-summary .stars{color:var(--gold);font-size:16px;letter-spacing:1px;margin-top:2px;}
.review-summary .stars .off{color:var(--line);}
.review-summary .score-cap{font-size:11.5px;color:var(--muted);margin-top:2px;}
.review-bars{flex:1 1 220px;min-width:0;width:100%;}
.rb-row{margin-bottom:9px;}
.rb-row:last-child{margin-bottom:0;}
.rb-label{
  display:flex;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
  margin-bottom:3px;
}
.rb-label b{font-family:'IBM Plex Mono',monospace;color:var(--primary);font-weight:600;white-space:nowrap;}
.rb-track{width:100%;height:6px;background:var(--primary-soft);border-radius:4px;overflow:hidden;}
.rb-fill{height:100%;background:var(--primary);border-radius:4px;}

.review-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.review-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 18px;
}
.review-card .rc-name{
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:13.5px;
  margin-bottom:2px;
}
.review-card .rc-stars{color:var(--gold);font-size:12px;letter-spacing:1px;margin-bottom:10px;}
.review-card .rc-stars .off{color:var(--line);}
.review-card .rc-block{margin-bottom:8px;}
.review-card .rc-block:last-child{margin-bottom:0;}
.review-card .rc-lbl{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:2px;
}
.review-card .rc-txt{font-size:13px;line-height:1.55;color:#3b4640;}

@media (max-width:560px){
  .review-cards{grid-template-columns:1fr;}
  .review-summary{flex-direction:column;}
  .review-summary .score-block{width:100%;}
}

/* ---------- footer ---------- */
.footer{
  margin-top:30px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
}
.footer .fname{color:var(--primary);font-weight:600;}

@media (max-width:480px){
  .stat-row{grid-template-columns:1fr;}
  .hero h1{font-size:22px;}
  .trail{padding-left:38px;}
  .pin{left:-38px;width:30px;height:30px;font-size:12px;}
}