:root{
  --ink:#181633;
  --paper:#F6F1E6;
  --paper-dim:#ECE4D2;
  --c1:#3F51E0;
  --c2:#FF5A55;
  --c3:#00A88E;
  --c4:#FFB627;
  --c5:#8B5CF6;
  --line-w:2px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-anchor:none;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;margin:0;letter-spacing:-0.01em;}
button{font-family:inherit;}
::selection{background:var(--ink);color:var(--paper);}

#app{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;}

/* [hidden] versus komponen: pastikan atribut hidden selalu menang,
   supaya #cover/#survey benar-benar lenyap (bukan cuma ketutup)
   saat idnya dipakai bareng display:flex di bawah ini. */
#cover[hidden], #survey[hidden]{display:none !important;}

/* ---------- COVER ---------- */
#cover{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:28px 24px 32px;min-height:100vh;}
.cover-top{display:flex;justify-content:space-between;align-items:flex-start;}
.cover-tag{border:var(--line-w) solid var(--ink);border-radius:100px;padding:6px 14px;font-size:13px;font-weight:600;}
.cover-mid{margin-top:40px;}
.cover-mid h1{font-size:44px;line-height:1.05;}
.cover-mid p{font-size:16px;line-height:1.55;margin-top:18px;max-width:44ch;color:#3a3760;}
.cover-shapes{display:flex;gap:8px;margin-top:28px;}
.shape{width:34px;height:34px;border:var(--line-w) solid var(--ink);}
.shape:nth-child(1){background:var(--c2);border-radius:50%;}
.shape:nth-child(2){background:var(--c3);}
.shape:nth-child(3){background:var(--c4);border-radius:50% 0 50% 50%;}
.shape:nth-child(4){background:var(--c1);border-radius:100px;}
.cover-bottom{margin-top:40px;}
.meta-row{display:flex;justify-content:space-between;font-size:13px;color:#5a5680;margin-bottom:16px;border-top:1px solid #d9d0b8;padding-top:14px;}
.btn-primary{
  width:100%;padding:18px 22px;background:var(--ink);color:var(--paper);
  border:none;border-radius:14px;font-size:17px;font-weight:600;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  transition:transform .15s ease;
}
.btn-primary:active{transform:scale(0.98);}
.btn-primary .num{font-family:'Fraunces',serif;font-style:italic;}

.field-error{display:none;color:#C6423D;font-size:12.5px;margin-top:6px;}

/* ---------- SURVEY ---------- */
#survey{flex:1;display:flex;flex-direction:column;min-height:100vh;}
.topbar{padding:20px 24px 14px;position:sticky;top:0;background:var(--paper);z-index:5;}
.progress-track{display:flex;gap:4px;margin-bottom:10px;}
.progress-seg{flex:1;height:4px;background:var(--paper-dim);border-radius:2px;overflow:hidden;}
.progress-seg i{display:block;height:100%;width:0%;background:var(--ink);transition:width .25s ease;}
.topbar-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#5a5680;}
.dim-label{font-weight:600;color:var(--ink);}

.stepwrap{flex:1;padding:8px 24px 140px;overflow-anchor:none;}
.step-head{margin-bottom:22px;}
.step-head h2{font-size:26px;line-height:1.15;}
.step-head p{font-size:14.5px;color:#4a4670;margin-top:8px;line-height:1.5;}
.legend-row{display:flex;justify-content:space-between;font-size:12.5px;color:#6a6690;margin:6px 2px 18px;}

.field{margin-bottom:26px;}
.field-label{font-size:15.5px;font-weight:500;margin-bottom:12px;line-height:1.4;}

input[type=text],input[type=number],input[type=email],textarea{
  width:100%;border:var(--line-w) solid var(--ink);border-radius:12px;
  padding:14px 16px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink);
}
textarea{min-height:110px;resize:vertical;}
input:focus,textarea:focus{outline:3px solid var(--c1);outline-offset:1px;}

.opt-list{display:flex;flex-direction:column;gap:8px;}
.opt-btn{
  text-align:left;border:var(--line-w) solid var(--ink);background:#fff;border-radius:12px;
  padding:13px 16px;font-size:14.5px;cursor:pointer;display:flex;align-items:center;gap:10px;
  color:var(--ink);
}
.opt-btn .box{width:18px;height:18px;border:2px solid var(--ink);flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.opt-btn.radio-style .box{border-radius:50%;}
.opt-btn.check-style .box{border-radius:4px;}
.opt-btn.selected{background:var(--ink);color:var(--paper);}
.opt-btn.selected .box{border-color:var(--paper);background:var(--paper);color:var(--ink);}
.opt-btn.disabled{opacity:.4;cursor:not-allowed;}
.opt-btn .rank{font-family:'Fraunces',serif;font-style:italic;font-weight:600;margin-left:auto;font-size:14px;}

.counter{font-size:12.5px;color:#6a6690;margin-top:6px;}

.fc-list{display:flex;flex-direction:column;gap:12px;}
.fc-item{border:var(--line-w) solid var(--ink);border-radius:14px;padding:16px;background:#fff;}
.fc-text{font-size:15px;line-height:1.4;margin-bottom:12px;}
.fc-actions{display:flex;gap:8px;}
.fc-btn{flex:1;border:var(--line-w) solid var(--ink);border-radius:10px;padding:10px 8px;font-size:13px;font-weight:600;cursor:pointer;background:#fff;color:var(--ink);}
.fc-most.selected{background:#00A88E;color:#fff;}
.fc-least.selected{background:#FF5A55;color:#fff;}

.scale-row{display:flex;gap:6px;}
.scale-btn{
  flex:1;aspect-ratio:1/1;border:var(--line-w) solid var(--ink);border-radius:10px;background:#fff;
  font-family:'Fraunces',serif;font-weight:600;font-size:16px;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.scale-btn.selected{background:var(--accent,var(--ink));border-color:var(--ink);color:var(--ink);}

.navbar{
  position:fixed;bottom:0;left:0;right:0;
  background:linear-gradient(to top, var(--paper) 60%, rgba(246,241,230,0));
  padding:26px 24px 22px;
}
.navbar-inner{max-width:560px;margin:0 auto;display:flex;gap:10px;}
.nav-btn{flex:1;padding:16px;border-radius:12px;font-size:15.5px;font-weight:600;cursor:pointer;border:var(--line-w) solid var(--ink);}
.nav-btn:disabled{opacity:.35;cursor:not-allowed;}
.nav-back{background:var(--paper);color:var(--ink);flex:0 0 96px;}
.nav-next{background:var(--ink);color:var(--paper);}

/* ---------- THANKS ---------- */
#thanks{flex:1;display:none;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:28px 24px 60px;min-height:100vh;}
#thanks h1{font-size:32px;line-height:1.15;}
#thanks p{font-size:15px;color:#3a3760;margin-top:12px;line-height:1.55;max-width:42ch;}
.thanks-count{margin-top:22px;border:var(--line-w) solid var(--ink);border-radius:14px;padding:16px 20px;background:#fff;align-self:flex-start;}
.thanks-count .n{font-family:'Fraunces',serif;font-size:30px;font-style:italic;}
.thanks-count .lbl{font-size:13px;color:#5a5680;margin-top:2px;}

/* ---------- RESULT CARD ---------- */
.result-wrap{margin-top:30px;}
.result-wrap h3{font-size:20px;margin-bottom:6px;}
.result-hint{font-size:13.5px;color:#5a5680;margin-bottom:16px;}
.card-frame{border-radius:20px;overflow:hidden;box-shadow:none;border:var(--line-w) solid var(--ink);max-width:340px;margin:0 auto;}
.card-frame svg{display:block;width:100%;height:auto;}
.share-btn{margin-top:18px;}
.share-note{font-size:12px;color:#6a6690;margin-top:10px;text-align:center;}

@media (max-width:380px){
  .cover-mid h1{font-size:36px;}
  #thanks h1{font-size:30px;}
}