@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --forest-950:#0B2C22;
  --forest-900:#0F3B2C;
  --forest-700:#1F5C43;
  --forest-600:#2D6A4F;
  --forest-400:#52B788;
  --forest-300:#95D5B2;
  --forest-100:#DCF2E4;
  --gold-500:#D9A441;
  --gold-300:#E9C46A;
  --gold-100:#FBE9C6;
  --paper:#FBF7EE;
  --paper-dim:#F1ECDF;
  --ink:#16241D;
  --ink-soft:#4A5C51;
  --danger:#C1502E;
  --radius:18px;
  --shadow-soft: 0 10px 30px -12px rgba(11,44,34,0.25);
  --shadow-card: 0 4px 16px -6px rgba(11,44,34,0.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* --- tekstur latar: garis kontur topografi, kanopi --- */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(45,106,79,0.09), transparent 40%),
    radial-gradient(circle at 92% 85%, rgba(217,164,65,0.10), transparent 45%);
  pointer-events:none; z-index:0;
}

h1,h2,h3,.serif{ font-family:'Fraunces',serif; letter-spacing:-0.01em; }

.app-shell{ max-width:820px; margin:0 auto; padding:24px 18px 64px; position:relative; z-index:1; }

/* ================= HEADER / TRAIL PROGRESS ================= */
.app-header{ text-align:center; margin-bottom:28px; }
.app-header .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--forest-700); font-weight:600; margin-bottom:6px;
}
.app-header h1{ font-size:28px; margin:0 0 4px; color:var(--forest-950); }
.app-header p{ margin:0; color:var(--ink-soft); font-size:14.5px; }

.trail{
  display:flex; align-items:center; justify-content:center; gap:4px;
  margin:22px auto 0; max-width:640px; flex-wrap:wrap;
}
.trail .pos{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  flex:1; min-width:44px; position:relative;
}
.trail .dot{
  width:34px; height:34px; border-radius:50%;
  background:var(--paper-dim); border:2px solid var(--forest-300);
  display:flex; align-items:center; justify-content:center;
  color:var(--forest-700); transition:all .35s ease; z-index:2;
  font-size:14px;
}
.trail .pos.active .dot{ background:var(--forest-600); border-color:var(--forest-600); color:#fff; box-shadow:0 0 0 6px rgba(45,106,79,0.15); }
.trail .pos.done .dot{ background:var(--gold-500); border-color:var(--gold-500); color:#fff; }
.trail .label{ font-size:10.5px; color:var(--ink-soft); font-weight:600; text-align:center; }
.trail .line{
  position:absolute; top:17px; left:-50%; width:100%; height:2px;
  background:var(--forest-300); z-index:1;
}
.trail .pos:first-child .line{ display:none; }
.trail .pos.done .line, .trail .pos.active .line{ background:var(--gold-500); }

/* ================= CARDS / SCREENS ================= */
.screen{ display:none; }
.screen.visible{ display:block; animation:fadeUp .45s ease; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.card{
  background:#fff; border-radius:var(--radius); padding:30px 28px;
  box-shadow:var(--shadow-card); border:1px solid rgba(11,44,34,0.06);
}

.envelope-banner{
  display:flex; gap:14px; align-items:flex-start;
  background:linear-gradient(135deg, var(--forest-950), var(--forest-700));
  color:var(--forest-100); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:22px; box-shadow:var(--shadow-soft);
}
.envelope-banner svg{ flex-shrink:0; width:34px; height:34px; color:var(--gold-300); }
.envelope-banner .t{ font-weight:600; color:#fff; margin-bottom:2px; font-family:'Fraunces',serif; font-size:15.5px;}
.envelope-banner .d{ font-size:13px; opacity:0.85; line-height:1.5; }

/* Intro screen */
.hero-icon{ width:64px; height:64px; margin:0 auto 14px; color:var(--forest-600); display:block; }
.intro-list{ list-style:none; padding:0; margin:18px 0; display:grid; gap:10px; }
.intro-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); }
.intro-list li svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--forest-500); }

.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:600; font-size:13.5px; margin-bottom:6px; color:var(--forest-950); }
.field input, .field select{
  width:100%; padding:11px 14px; border:1.5px solid var(--forest-300); border-radius:10px;
  font-size:14.5px; font-family:inherit; background:var(--paper-dim); color:var(--ink);
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--forest-600); background:#fff; }

.inline-other-input{
  width:100%; padding:11px 14px; border:1.5px solid var(--forest-300); border-radius:10px;
  font-size:14px; font-family:inherit; background:var(--paper-dim); color:var(--ink); box-sizing:border-box;
}
.inline-other-input:focus{ outline:none; border-color:var(--forest-600); background:#fff; }

.btn{
  appearance:none; border:none; cursor:pointer; font-family:inherit;
  font-weight:600; font-size:14.5px; padding:13px 26px; border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease; display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{ background:var(--forest-600); color:#fff; box-shadow:0 8px 20px -8px rgba(45,106,79,0.55); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(45,106,79,0.65); }
.btn-primary:disabled{ background:#b9c3bc; box-shadow:none; cursor:not-allowed; transform:none; }
.btn-ghost{ background:transparent; color:var(--forest-700); }
.btn-gold{ background:var(--gold-500); color:#fff; box-shadow:0 8px 20px -8px rgba(217,164,65,0.55); }
.btn-row{ display:flex; justify-content:space-between; align-items:center; margin-top:26px; gap:10px; }

/* Question card */
.q-dim-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--forest-700);
  background:var(--forest-100); padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.q-text{ font-size:18px; line-height:1.5; margin:0 0 22px; color:var(--forest-950); font-family:'Fraunces',serif; font-weight:500;}

.likert-scale{ display:flex; justify-content:space-between; gap:6px; margin-bottom:6px; }
.likert-opt{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; padding:10px 4px; border-radius:12px; transition:background .2s;
}
.likert-opt:hover{ background:var(--paper-dim); }
.likert-opt .bubble{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--forest-300);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--forest-700);
  transition:all .2s;
}
.likert-opt.selected .bubble{ background:var(--forest-600); border-color:var(--forest-600); color:#fff; transform:scale(1.12); }
.likert-opt .txt{ font-size:10.5px; text-align:center; color:var(--ink-soft); line-height:1.3; }

.scenario-list{ display:grid; gap:10px; }
.scenario-opt{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px;
  border:1.5px solid var(--forest-100); cursor:pointer; transition:all .2s; background:var(--paper-dim);
}
.scenario-opt:hover{ border-color:var(--forest-300); }
.scenario-opt.selected{ border-color:var(--forest-600); background:var(--forest-100); box-shadow:0 0 0 3px rgba(45,106,79,0.12); }
.scenario-opt .letter{
  width:26px; height:26px; border-radius:50%; background:#fff; border:1.5px solid var(--forest-300);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; color:var(--forest-700);
}
.scenario-opt.selected .letter{ background:var(--forest-600); border-color:var(--forest-600); color:#fff; }
.scenario-opt .txt{ font-size:14px; line-height:1.5; color:var(--ink); }

.choice-grid{ display:grid; gap:10px; }
.choice-chip{
  padding:12px 16px; border-radius:12px; border:1.5px solid var(--forest-100); background:var(--paper-dim);
  cursor:pointer; font-size:14px; transition:all .2s; display:flex; align-items:center; gap:10px;
}
.choice-chip:hover{ border-color:var(--forest-300); }
.choice-chip.selected{ border-color:var(--forest-600); background:var(--forest-100); font-weight:600; }
.choice-chip .box{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--forest-300); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.choice-chip.selected .box{ background:var(--forest-600); border-color:var(--forest-600); }
.choice-chip.radio .box{ border-radius:50%; }

textarea{
  width:100%; min-height:120px; padding:14px; border-radius:12px; border:1.5px solid var(--forest-300);
  font-family:inherit; font-size:14.5px; background:var(--paper-dim); resize:vertical;
}
textarea:focus{ outline:none; border-color:var(--forest-600); background:#fff; }

.autosave-note{ font-size:11.5px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; margin-top:10px; }
.autosave-note svg{ width:13px; height:13px; }

/* Results screen */
.zone-badge{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; margin-bottom:24px;
}
.zone-badge .icon{ width:72px; height:72px; color:var(--forest-600); }
.zone-badge h2{ font-size:24px; margin:0; color:var(--forest-950); }
.zone-badge p{ margin:0; color:var(--ink-soft); font-size:14px; max-width:480px; }

.radar-wrap{ display:flex; justify-content:center; margin:18px 0 24px; }
.dim-bars{ display:grid; gap:12px; margin-bottom:10px; }
.dim-bar-row{ display:grid; grid-template-columns:120px 1fr 40px; align-items:center; gap:10px; font-size:13px; }
.dim-bar-row .name{ font-weight:600; color:var(--forest-950); }
.dim-bar-track{ height:9px; border-radius:999px; background:var(--paper-dim); overflow:hidden; }
.dim-bar-fill{ height:100%; background:linear-gradient(90deg, var(--forest-400), var(--forest-600)); border-radius:999px; transition:width 1s ease; }
.dim-bar-row .val{ text-align:right; font-weight:700; color:var(--forest-700); }

.thanks-box{
  background:var(--forest-100); border-radius:14px; padding:16px 18px; font-size:13.5px;
  color:var(--forest-950); line-height:1.6; margin-top:20px;
}

footer.app-footer{ text-align:center; margin-top:36px; font-size:11.5px; color:var(--ink-soft); opacity:0.8; line-height:1.7; }
footer.app-footer .powered-by{ font-size:10.5px; margin-top:2px; }
footer.app-footer .powered-by a{ color:var(--forest-700); font-weight:600; text-decoration:none; }
footer.app-footer .powered-by a:hover{ text-decoration:underline; }

@media (max-width:560px){
  .card{ padding:22px 18px; }
  .trail .label{ display:none; }
  .likert-opt .txt{ display:none; }
  .dim-bar-row{ grid-template-columns:88px 1fr 34px; font-size:12px; }
}

@media print{
  body.printing-results *{ visibility:hidden; }
  body.printing-results #screen-results, body.printing-results #screen-results *{ visibility:visible; }
  body.printing-results #screen-results{ position:absolute; left:0; top:0; width:100%; }
  body.printing-results #results-actions{ display:none; }
}