/* ============ DESIGN TOKENS ============ */
:root{
  --ink:#211F26;
  --bg:#F7F3EA;
  --panel:#FFFFFF;
  --panel-alt:#FBF7EE;
  --border:rgba(33,31,38,.12);
  --border-strong:rgba(33,31,38,.22);
  --muted:#726C63;
  --gold:#B4802C;
  --gold-ink:#7A551B;
  --teal:#2F7268;
  --teal-ink:#1F4E47;
  --rose:#B14A5E;
  --rose-ink:#7C3140;
  --success:#3F8F4F;
  --success-bg:#E4F3E4;
  --error:#C64B3C;
  --error-bg:#FBE7E3;
  --shadow: 0 1px 2px rgba(33,31,38,.06), 0 8px 20px -10px rgba(33,31,38,.18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDE7DA; --bg:#17161C; --panel:#211F29; --panel-alt:#26242F;
    --border:rgba(237,231,218,.12); --border-strong:rgba(237,231,218,.24);
    --muted:#A79F91; --gold:#D9A441; --gold-ink:#F0C570; --teal:#4FAA98; --teal-ink:#7CC7B8;
    --rose:#D97C8E; --rose-ink:#E7A3B0; --success:#6FC26D; --success-bg:#1E2E1E;
    --error:#E0645A; --error-bg:#332020;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -12px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:'Karla',system-ui,sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif;}
button{font-family:inherit;}
input,select{font-family:inherit;}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

.app-shell{max-width:640px; margin:0 auto; min-height:100vh; position:relative; padding-bottom:60px;}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20; max-width:640px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.logo{display:flex; align-items:baseline; gap:6px; font-weight:600; font-size:22px; letter-spacing:-.01em; cursor:pointer;}
.logo .dot{color:var(--gold);}
.stats{display:flex; align-items:center; gap:14px; font-weight:700; font-size:14px;}
.stat{display:flex; align-items:center; gap:5px;}
.stat.hearts{color:var(--rose-ink, var(--rose));}
.stat.streak{color:var(--gold-ink,var(--gold));}
.stat.xp{color:var(--teal-ink,var(--teal));}
.icon-btn{background:none; border:none; cursor:pointer; font-size:18px; padding:4px 2px; line-height:1; color:var(--ink);}
.avatar-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); background:var(--panel-alt);
  display:flex; align-items:center; justify-content:center; font-size:17px; cursor:pointer; color:var(--ink);
}
.back-btn{background:none; border:none; cursor:pointer; font-size:20px; color:var(--ink); padding:4px 6px;}

/* ---------- Generic page layout ---------- */
.page{max-width:640px; margin:0 auto; padding:6px 18px 50px;}
.page h1.page-title{font-size:24px; font-weight:600; margin:14px 0 6px;}
.page .page-sub{color:var(--muted); font-size:13.5px; margin:0 0 22px;}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border); border-radius:20px;
  padding:34px 28px; box-shadow:var(--shadow); text-align:center;
}
.auth-logo{font-family:'Fraunces',serif; font-size:30px; font-weight:600; margin-bottom:6px;}
.auth-logo .dot{color:var(--gold);}
.auth-tagline{color:var(--muted); font-size:13.5px; margin:0 0 26px; line-height:1.5;}
.field{text-align:left; margin-bottom:14px;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:6px;}
.type-input, .select-input{
  width:100%; padding:14px 15px; font-size:16px; border-radius:12px; border:2px solid var(--border-strong);
  background:var(--panel); color:var(--ink);
}
.type-input.correct{border-color:var(--success); background:var(--success-bg);}
.type-input.incorrect{border-color:var(--error); background:var(--error-bg);}
.form-note{min-height:18px; color:var(--error); font-size:12.5px; text-align:left; margin:2px 0 12px;}
.form-note.ok-note{color:var(--success);}
.auth-switch{margin-top:18px; font-size:13.5px; color:var(--muted);}
.auth-switch button{background:none; border:none; color:var(--teal-ink,var(--teal)); font-weight:700; cursor:pointer; text-decoration:underline; padding:0;}

.main-btn{
  width:100%; padding:15px; border-radius:14px; border:none; font-size:16px; font-weight:800;
  cursor:pointer; background:var(--border-strong); color:var(--muted);
}
.main-btn.ready{background:var(--teal); color:#fff;}
.main-btn:disabled{cursor:not-allowed;}
.main-btn.secondary{background:var(--panel-alt); color:var(--ink); border:1px solid var(--border-strong);}
.main-btn.danger{background:var(--error); color:#fff;}

/* ---------- Home (ala portal kampus) ---------- */
.profile-card{
  margin:20px 0 28px; border-radius:18px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow);
  background: linear-gradient(120deg, color-mix(in srgb, var(--teal) 16%, var(--panel)), color-mix(in srgb, var(--gold) 14%, var(--panel)));
}
.profile-card-inner{background:var(--panel); margin:3px; border-radius:15px; padding:20px 22px;}
.profile-row{display:flex; align-items:center; gap:12px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border);}
.profile-avatar{width:44px; height:44px; border-radius:50%; background:var(--panel-alt); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto;}
.profile-row .name{font-weight:700; font-size:16.5px;}
.identity-line{display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0;}
.identity-line .k{color:var(--muted);}
.identity-line .v{font-weight:700;}

.section-label{font-size:13px; font-weight:700; color:var(--muted); margin:22px 0 12px; text-transform:uppercase; letter-spacing:.03em;}
.app-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.app-card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:22px 16px; text-align:center;
  cursor:pointer; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.app-card .ic{font-size:34px;}
.app-card .t{font-weight:700; font-size:14.5px;}
.app-card .d{font-size:11.5px; color:var(--muted); line-height:1.4;}

/* ---------- Profil / Langganan ---------- */
.list-tile{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px;
  background:var(--panel); border:1px solid var(--border); border-radius:14px; margin-bottom:12px; cursor:pointer;
}
.list-tile .t{font-weight:700; font-size:15px;}
.list-tile .d{font-size:12.5px; color:var(--muted); margin-top:2px;}
.list-tile .chev{color:var(--muted); font-size:16px;}

.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700;}
.badge.active{background:var(--success-bg); color:var(--success);}
.badge.pending{background:color-mix(in srgb, var(--gold) 20%, transparent); color:var(--gold-ink,var(--gold));}
.badge.none{background:var(--border); color:var(--muted);}
.badge.rejected{background:var(--error-bg); color:var(--error);}

.plan-card{
  background:var(--panel); border:2px solid var(--border-strong); border-radius:16px; padding:18px 20px; margin-bottom:14px; cursor:pointer;
}
.plan-card:hover{border-color:var(--teal);}
.plan-card .name{font-weight:700; font-size:16px; margin-bottom:2px;}
.plan-card .price{font-family:'Fraunces',serif; font-size:22px; font-weight:600; color:var(--teal-ink,var(--teal));}
.plan-card .desc{font-size:12.5px; color:var(--muted); margin-top:4px;}

.qris-box{
  text-align:center; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:22px; margin:18px 0;
}
.qris-box img{max-width:220px; width:100%; border-radius:10px; margin:12px 0;}
.qris-box .amount{font-family:'Fraunces',serif; font-size:26px; font-weight:600; margin:4px 0;}

.status-box{
  background:var(--panel-alt); border:1px solid var(--border); border-radius:14px; padding:18px; text-align:center; margin:18px 0; font-size:13.5px; color:var(--muted);
}

/* ---------- Kelola pertemuan ---------- */
.schedule-item{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:15px 18px; margin-bottom:12px;
}
.schedule-item .row1{display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:14.5px;}
.schedule-item .row2{font-size:12.5px; color:var(--muted); margin-top:4px;}
.day-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px;}
.day-chip{
  padding:10px 4px; border-radius:10px; border:2px solid var(--border-strong); background:var(--panel);
  text-align:center; font-size:13px; font-weight:700; cursor:pointer;
}
.day-chip.selected{border-color:var(--teal); background:color-mix(in srgb, var(--teal) 14%, var(--panel)); color:var(--teal-ink,var(--teal));}
.mode-row{display:flex; gap:10px; margin-bottom:16px;}
.mode-row .day-chip{flex:1;}
.empty-note{text-align:center; color:var(--muted); font-size:13.5px; padding:30px 10px;}

/* ---------- Path latihan (reuse dari versi sebelumnya) ---------- */
.unit-banner{margin:26px 0 34px; border-radius:16px; padding:16px 20px; color:#fff; box-shadow:var(--shadow);}
.unit-banner.gold{background:linear-gradient(135deg,var(--gold),#8f651f);}
.unit-banner.teal{background:linear-gradient(135deg,var(--teal),#1b4740);}
.unit-banner.rose{background:linear-gradient(135deg,var(--rose),#7c3140);}
.unit-banner .eyebrow{font-size:12.5px; opacity:.85; margin:0 0 4px;}
.unit-banner h2{margin:0 0 4px; font-size:21px; font-weight:600;}
.unit-banner p{margin:0; font-size:13.5px; opacity:.9;}

#path-wrap{position:relative; padding:4px 0 40px;}
.level-row{position:relative; display:flex; justify-content:center; padding:6px 0; height:96px;}
.level-node-btn{
  position:relative; z-index:2; width:70px; height:70px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:22px; font-weight:600;
  box-shadow: 0 5px 0 0 rgba(0,0,0,.18), var(--shadow); transition:transform .12s ease;
}
.level-node-btn:active{transform:translateY(3px);}
.level-node-btn:disabled{cursor:not-allowed;}
.node-locked{background:var(--panel-alt); color:var(--muted); box-shadow:0 5px 0 0 var(--border), var(--shadow);}
.node-completed{background:var(--gold); color:#fff;}
.node-current{background:var(--teal); color:#fff; animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{
  0%,100%{box-shadow:0 5px 0 0 rgba(0,0,0,.18), 0 0 0 0 rgba(47,114,104,.35);}
  50%{box-shadow:0 5px 0 0 rgba(0,0,0,.18), 0 0 0 10px rgba(47,114,104,0);}
}
.node-label{position:absolute; top:76px; left:50%; transform:translateX(-50%); font-size:11.5px; color:var(--muted); white-space:nowrap; z-index:2; max-width:120px; overflow:hidden; text-overflow:ellipsis;}
.node-start-tag{
  position:absolute; top:-28px; left:50%; transform:translateX(-50%); background:var(--panel); border:1px solid var(--border-strong);
  color:var(--teal-ink,var(--teal)); font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; z-index:3; box-shadow:var(--shadow);
}
.empty-state{margin:60px 24px; text-align:center; color:var(--muted);}
.empty-state h3{color:var(--ink); margin-bottom:6px;}
.footer-link{display:block; text-align:center; margin:30px auto 10px; color:var(--muted); font-size:12.5px; background:none; border:none; cursor:pointer; text-decoration:underline;}

/* ---------- Overlay (lesson / results / scoreboard) ---------- */
.overlay{position:fixed; inset:0; background:var(--bg); z-index:100; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .18s ease;}
.overlay.active{opacity:1; pointer-events:auto;}
.lesson-head{display:flex; align-items:center; gap:14px; padding:16px 18px;}
.close-btn{background:none; border:none; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; padding:4px;}
.progress-track{flex:1; height:12px; background:var(--border); border-radius:999px; overflow:hidden;}
.progress-fill{height:100%; background:var(--teal); border-radius:999px; transition:width .3s ease;}
.hearts-inline{display:flex; gap:4px; font-size:15px; min-width:54px; justify-content:flex-end;}
.scoreboard-title{font-size:17px; font-weight:600; margin:0;}

.lesson-body{flex:1; overflow-y:auto; padding:10px 22px 140px; max-width:600px; margin:0 auto; width:100%;}
.q-kicker{font-size:12.5px; font-weight:700; color:var(--teal-ink,var(--teal)); margin:18px 0 6px;}
.q-prompt{font-size:23px; font-weight:600; line-height:1.35; margin:0 0 26px;}
.options{display:flex; flex-direction:column; gap:10px;}
.opt-btn{
  text-align:left; padding:15px 16px; border-radius:12px; border:2px solid var(--border-strong); background:var(--panel); color:var(--ink);
  font-size:16px; cursor:pointer; display:flex; align-items:center; gap:12px; transition:border-color .12s ease, background .12s ease;
}
.opt-btn .k{flex:0 0 auto; width:26px; height:26px; border-radius:7px; border:2px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; color:var(--muted);}
.opt-btn:hover{border-color:var(--teal);}
.opt-btn.selected{border-color:var(--teal); background:color-mix(in srgb, var(--teal) 12%, var(--panel));}
.opt-btn.selected .k{background:var(--teal); border-color:var(--teal); color:#fff;}
.opt-btn.correct{border-color:var(--success); background:var(--success-bg);}
.opt-btn.correct .k{background:var(--success); border-color:var(--success); color:#fff;}
.opt-btn.incorrect{border-color:var(--error); background:var(--error-bg);}
.opt-btn.incorrect .k{background:var(--error); border-color:var(--error); color:#fff;}
.opt-btn:disabled{cursor:default;}
.tf-row{display:flex; gap:12px;}
.tf-row .opt-btn{flex:1; justify-content:center; font-weight:700;}

.lesson-foot{position:fixed; left:0; right:0; bottom:0; z-index:101; display:flex; justify-content:center;}
.lesson-foot-inner{width:100%; max-width:640px; padding:16px 20px 22px; background:var(--bg); border-top:1px solid var(--border);}
.feedback-banner{position:fixed; left:0; right:0; bottom:0; z-index:102; display:flex; justify-content:center; transform:translateY(110%); transition:transform .22s ease;}
.feedback-banner.show{transform:translateY(0);}
.feedback-inner{width:100%; max-width:640px; padding:16px 20px 22px;}
.feedback-banner.ok .feedback-inner{background:var(--success-bg);}
.feedback-banner.bad .feedback-inner{background:var(--error-bg);}
.fb-title{font-weight:800; font-size:16px; display:flex; align-items:center; gap:8px; margin-bottom:2px;}
.feedback-banner.ok .fb-title{color:var(--success);}
.feedback-banner.bad .fb-title{color:var(--error);}
.fb-explain{font-size:13.5px; color:var(--muted); margin-bottom:12px;}
.feedback-banner .main-btn{background:var(--ink); color:var(--bg);}
.feedback-banner.ok .main-btn{background:var(--success);color:#fff;}
.feedback-banner.bad .main-btn{background:var(--error); color:#fff;}

.center-panel{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px;}
.center-panel .big-emoji{font-size:56px; margin-bottom:6px;}
.center-panel h2{font-size:26px; margin:6px 0 4px;}
.center-panel p{color:var(--muted); margin:0 0 26px; font-size:14.5px;}
.result-stats{display:flex; gap:14px; margin-bottom:30px;}
.result-stat{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px 22px; min-width:96px;}
.result-stat .v{font-family:'Fraunces',serif; font-size:24px; font-weight:600;}
.result-stat .l{font-size:11.5px; color:var(--muted); margin-top:2px;}
.center-panel .main-btn{max-width:280px;}

.board-row{display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--border);}
.board-row.me{background:color-mix(in srgb, var(--teal) 10%, transparent); border-radius:12px; padding-left:10px; padding-right:10px;}
.board-rank{width:26px; text-align:center; font-family:'Fraunces',serif; font-weight:600; color:var(--muted); flex:0 0 auto;}
.board-rank.top1{color:var(--gold-ink,var(--gold));}
.board-rank.top2{color:var(--muted);}
.board-rank.top3{color:var(--rose-ink,var(--rose));}
.board-name{flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.board-name .you-tag{font-weight:600; font-size:11px; color:var(--teal-ink,var(--teal)); margin-left:6px;}
.board-meta{display:flex; gap:14px; font-size:12.5px; color:var(--muted); flex:0 0 auto;}
.board-meta b{color:var(--ink);}
.board-empty{text-align:center; color:var(--muted); padding:60px 20px; font-size:13.5px;}

/* ---------- Toast ---------- */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); background:var(--ink); color:var(--bg);
  padding:12px 20px; border-radius:12px; font-size:13.5px; font-weight:600; z-index:300; opacity:0; pointer-events:none;
  transition:transform .2s ease, opacity .2s ease; max-width:90%; text-align:center; box-shadow:var(--shadow);
}
#toast.show{opacity:1; transform:translate(-50%,0);}