:root{
  --ink:#08130F;--ink2:#0C1D18;--panel:#102A22;--panel2:#143329;--paper:#FAF8F4;--paper2:#EFE9DE;
  --teal:#149A7D;--teal-glow:#3FE0BB;--teal-deep:#0E7C66;--gold:#E4B443;--gold-soft:#F3D68A;
  --brown:#C98A5B;--red:#EC6A61;--blue:#6E9BF0;--txt:#F1F7F4;--mut:#A7C0B7;--line:rgba(120,200,178,.2);
  --serif:'Fraunces',Georgia,serif;--sans:'Space Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--txt);font-family:var(--sans);min-height:100vh;line-height:1.5}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
a{color:inherit}
.wrap{max-width:760px;margin:0 auto;padding:clamp(24px,5vw,60px) 20px}
.wrap.wide{max-width:1100px}

/* ---------- landing ---------- */
.landing{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
.landing .kick{font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-size:.85rem;margin-bottom:20px}
.landing h1{font-size:clamp(2.2rem,6vw,4rem);max-width:16ch;margin-bottom:16px}
.landing h1 .em{color:var(--teal-glow);font-style:italic}
.landing p.sub{color:var(--mut);font-size:clamp(1rem,2vw,1.3rem);max-width:44ch;margin-bottom:36px}
.qrbox{background:#fff;border-radius:24px;padding:28px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);margin-bottom:36px}
.qrbox img{width:min(320px,60vw);height:auto;display:block}
.qrbox .qrlabel{color:var(--ink);font-weight:700;margin-top:12px;font-size:1rem;letter-spacing:.04em}
.btn-big{display:inline-block;background:var(--teal-deep);color:#fff;text-decoration:none;font-weight:700;font-size:1.15rem;padding:18px 44px;border-radius:100px;box-shadow:0 14px 30px -10px rgba(20,154,125,.5);transition:transform .2s}
.btn-big:hover{transform:translateY(-2px)}
.landing .url{color:var(--mut);font-size:.85rem;margin-top:20px}

/* ---------- form ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,4vw,40px);margin-bottom:20px}
label{display:block;font-weight:700;font-size:.95rem;color:var(--gold-soft);margin-bottom:8px}
input[type=text],input[type=password],textarea{width:100%;background:var(--ink2);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:14px 16px;font-family:var(--sans);font-size:1.05rem;margin-bottom:20px}
textarea{min-height:100px;resize:vertical}
.qn{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.qn:last-child{border:none}
.qn .qcat{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-glow);margin-bottom:6px}
.qn .qtext{font-size:clamp(1.05rem,2vw,1.3rem);margin-bottom:16px;line-height:1.4}
.opts{display:flex;flex-direction:column;gap:10px}
.opt-label{display:flex;align-items:flex-start;gap:12px;background:var(--ink2);border:2px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.15s}
.opt-label:hover{border-color:var(--teal-glow)}
.opt-label input{margin-top:3px;accent-color:var(--teal-glow)}
.opt-label.checked{border-color:var(--teal-glow);background:rgba(63,224,178,.08)}
.scale-row{display:flex;gap:10px;justify-content:space-between}
.scale-item{flex:1;text-align:center}
.scale-item label{font-weight:400;color:var(--mut);font-size:.85rem;margin-top:6px;cursor:pointer}
.scale-item input{width:28px;height:28px;accent-color:var(--teal-glow);cursor:pointer}
.progress-bar{position:sticky;top:0;background:var(--ink);padding:14px 0;z-index:10;border-bottom:1px solid var(--line);margin-bottom:20px}
.progress-track{background:var(--panel2);border-radius:100px;height:8px;overflow:hidden}
.progress-fill{background:linear-gradient(90deg,var(--teal-glow),var(--gold));height:100%;transition:width .3s}
.progress-label{font-size:.8rem;color:var(--mut);margin-top:6px;text-align:right}
.submit-btn{width:100%;background:var(--teal-deep);color:#fff;border:none;border-radius:100px;padding:18px;font-weight:700;font-size:1.15rem;cursor:pointer;margin-top:10px}
.submit-btn:hover{background:var(--teal-glow);color:var(--ink)}
.err{color:var(--red);font-size:.9rem;margin-top:-10px;margin-bottom:16px}

/* ---------- hasil ---------- */
.hasil-hero{text-align:center;padding:20px 0 30px}
.hasil-hero .score-big{font-size:clamp(3rem,10vw,5rem);font-family:var(--serif);color:var(--teal-glow);font-weight:700}
.hasil-hero .score-lbl{color:var(--mut);font-size:1.1rem}
.cat-bar{margin-bottom:18px}
.cat-bar .cbl{display:flex;justify-content:space-between;font-size:.95rem;margin-bottom:6px}
.cat-bar .cbl b{color:var(--gold-soft)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.actions .btn-sec{flex:1;text-align:center;background:var(--panel2);border:1px solid var(--line);color:var(--txt);text-decoration:none;padding:14px;border-radius:100px;font-weight:700;cursor:pointer}
.actions .btn-sec:hover{border-color:var(--teal-glow)}

/* ---------- admin ---------- */
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:30px}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.stat-card .num{font-size:2.2rem;font-family:var(--serif);color:var(--teal-glow);font-weight:700}
.stat-card .lbl{color:var(--mut);font-size:.85rem;margin-top:4px}
table.data{width:100%;border-collapse:collapse;font-size:.92rem}
table.data th{background:var(--panel2);color:var(--gold-soft);text-align:left;padding:10px 12px;font-weight:700;position:sticky;top:0}
table.data td{padding:10px 12px;border-bottom:1px solid var(--line)}
table.data tr:hover{background:var(--panel2)}
.table-wrap{overflow-x:auto;background:var(--panel);border-radius:16px;border:1px solid var(--line)}
.logout-link{color:var(--mut);text-decoration:none;font-size:.85rem;border:1px solid var(--line);padding:8px 16px;border-radius:100px}
.badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:.75rem;font-weight:700}
.badge.gold{background:var(--gold);color:var(--ink)}
.badge.teal{background:var(--teal-glow);color:var(--ink)}
.export-link{background:var(--teal-deep);color:#fff;text-decoration:none;padding:10px 20px;border-radius:100px;font-weight:700;font-size:.9rem}

@media print{
  body{background:#fff;color:#000}
  .no-print{display:none !important}
  .card{border:1px solid #ccc;background:#fff}
}