/* ================================================================
   VARIABLES & RESET
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0f0e0c;--surface:#1a1916;--surface2:#232119;--surface3:#2c2a24;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);
  --text:#f0ece3;--muted:#8a8475;--muted2:#6a6460;
  --blue:#3b6ea5;--blue-light:#5a8fc7;
  --green:#4a7c2f;--green-light:#6aa84f;
  --amber:#c8a040;--red:#b83232;--red-light:#c95050;
  --purple:#6b4fa8;
  --no-risk:#aaaaaa;--low:#4a7c2f;--medium:#b89030;--high:#b86020;--very-high:#b83232;
  --radius:10px;--radius-lg:16px;--radius-xl:22px;
  --shadow:0 4px 24px rgba(0,0,0,0.4);
  --transition:0.2s ease;
}
[data-theme="light"]{
  --bg:#F3F4F4;--surface:#ffffff;--surface2:#f0ede8;--surface3:#e8e4dc;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.14);
  --text:#1a1710;--muted:#6a6460;--muted2:#9a9490;
  --shadow:0 4px 24px rgba(0,0,0,0.1);
}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6;min-height:100vh;transition:background var(--transition),color var(--transition)}
h1,h2,h3,h4{font-family:'DM Serif Display',serif;font-weight:400}
a{color:inherit;text-decoration:none}
em{font-style:italic}
strong{font-weight:600}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:0.5px solid var(--border2);backdrop-filter:blur(12px)}
.nav-inner{max-width:1100px;margin:auto;padding:0 24px;height:54px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px}
.logo-icon{font-size:22px}
.logo-text{font-family:'DM Serif Display',serif;font-size:18px;color:var(--text)}
.nav-right{display:flex;align-items:center;gap:12px}
.toggle-theme{background:var(--surface2);border:0.5px solid var(--border2);border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:18px;color:var(--text);display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.toggle-theme:hover{background:var(--surface3)}
.lang-switch{display:flex;border:0.5px solid var(--border2);border-radius:6px;overflow:hidden}
.lang-btn{padding:5px 12px;border:none;background:transparent;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition)}
.lang-btn.active{background:var(--blue);color:#fff}

/* ================================================================
   STEPPER
   ================================================================ */
.stepper-wrap{background:var(--surface);border-bottom:0.5px solid var(--border);padding:14px 24px}
.stepper-inner{max-width:1100px;margin:auto}
.stepper-track{display:flex;gap:6px;align-items:center;margin-bottom:10px;overflow-x:auto;padding-bottom:4px}
.stepper-track::-webkit-scrollbar{height:0}
.step-dot{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:60px;cursor:pointer}
.step-circle{width:32px;height:32px;border-radius:50%;border:2px solid var(--border2);background:var(--surface2);color:var(--muted);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:all 0.25s;flex-shrink:0}
.step-circle.done{background:var(--green);border-color:var(--green);color:#fff}
.step-circle.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 3px rgba(59,110,165,0.2)}
.step-circle.done-outline{background:transparent;border-color:var(--green);border-width:2.5px;color:var(--green);box-shadow:0 0 0 2px rgba(74,167,96,0.15)}
.step-name{font-size:11px;color:var(--muted);text-align:center;white-space:nowrap}
.step-connector{flex:1;height:2px;background:var(--border2);border-radius:2px;min-width:8px}
.step-connector.done{background:var(--green)}
.stepper-progress{display:flex;align-items:center;gap:12px}
.stepper-bar{flex:1;height:3px;background:var(--border2);border-radius:100px;overflow:hidden}
.stepper-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--blue));border-radius:100px;transition:width 0.4s ease;width:0%}
.stepper-label{font-size:14px;color:var(--muted);white-space:nowrap}

/* ================================================================
   PAGES
   ================================================================ */
.pages{position:relative}
.page{display:none}
.page.active{display:block}

/* ================================================================
   LANDING
   ================================================================ */
.landing-hero{max-width:780px;margin:0 auto;padding:48px 24px 80px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--green-light);background:rgba(106,168,79,0.1);border:0.5px solid rgba(106,168,79,0.25);padding:5px 14px;border-radius:100px;margin-bottom:20px}
.hero-title{font-size:clamp(26px,4vw,44px);line-height:1.15;margin-bottom:8px}
.hero-title em{color:var(--blue-light)}
.hero-sub{font-size:17px;color:var(--muted);margin-bottom:28px}
.hero-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:28px}
.meta-item{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:flex-start;gap:12px}
.meta-icon{font-size:24px;flex-shrink:0}
.meta-label{font-size:13px;color:var(--muted);margin-bottom:2px}
.meta-val{font-size:16px;font-weight:500}
.hero-desc{margin-bottom:24px}
.hero-desc p{font-size:16px;color:var(--muted);line-height:1.8;margin-bottom:10px}
.flow-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:28px}
.flow-card h3{font-size:18px;margin-bottom:12px}
.flow-list{padding-left:20px}
.flow-list li{font-size:15px;color:var(--muted);padding:4px 0}
.confirm-box{background:var(--surface);border:0.5px solid var(--border2);border-radius:var(--radius-lg);padding:28px;text-align:center}
.confirm-box h3{font-size:19px;margin-bottom:20px;line-height:1.4}
.confirm-btns{display:flex;gap:12px;justify-content:center;margin-bottom:16px}
.conf-btn{padding:12px 32px;border-radius:var(--radius);border:1.5px solid var(--border2);background:transparent;color:var(--text);font-family:'DM Sans',sans-serif;font-size:17px;font-weight:600;cursor:pointer;transition:all 0.2s}
.conf-btn.yes:hover,.conf-btn.yes.selected{background:var(--green);border-color:var(--green);color:#fff}
.conf-btn.no:hover,.conf-btn.no.selected{background:var(--red);border-color:var(--red);color:#fff}
.confirm-result{padding:14px;border-radius:var(--radius);background:var(--surface2);font-size:16px;margin-bottom:16px}
.btn-start{background:var(--blue);color:#fff;border:none;border-radius:var(--radius);padding:14px 36px;font-family:'DM Sans',sans-serif;font-size:17px;font-weight:600;cursor:pointer;transition:all 0.2s}
.btn-start:hover{background:var(--blue-light)}

/* ================================================================
   STEP PAGES
   ================================================================ */
.step-page{max-width:1200px;margin:0 auto;padding:40px 24px 80px}
.step-header{margin-bottom:24px}
.step-header h2{font-size:26px;margin-bottom:6px}
.step-header p{color:var(--muted);font-size:16px}
.step-nav{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.btn-back{padding:10px 22px;border-radius:var(--radius);border:0.5px solid var(--border2);background:transparent;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:16px;cursor:pointer;transition:all var(--transition)}
.btn-back:hover{background:var(--surface2)}
.btn-next{padding:11px 28px;border-radius:var(--radius);border:none;background:var(--blue);color:#fff;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;cursor:pointer;transition:all var(--transition)}
.btn-next:hover{background:var(--blue-light)}
.btn-next:disabled{opacity:0.4;cursor:not-allowed}

/* ================================================================
   CONSENT
   ================================================================ */
.consent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:20px}
.consent-card{background:var(--surface2);border:0.5px solid var(--border);border-radius:var(--radius);padding:18px}
.consent-card h4{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;margin-bottom:8px;color:var(--blue-light)}
.consent-card p{font-size:15px;color:var(--muted);line-height:1.7}
.consent-agree{background:var(--surface2);border:0.5px solid var(--border2);border-radius:var(--radius);padding:16px 20px;margin-bottom:8px}
.checkbox-label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:16px}
.checkbox-label input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin-top:1px;cursor:pointer;accent-color:var(--blue)}

/* ================================================================
   IDENTITY FORM
   ================================================================ */
.identity-form{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;grid-template-columns:1fr;gap:16px}
.field-group{display:flex;flex-direction:column;gap:6px}
.field-group.full{grid-column:1/-1}
.field-group label{font-size:14px;font-weight:500;color:var(--muted)}
.field-inline{display:flex;align-items:center;gap:12px}
.field-inline label{white-space:nowrap;min-width:160px;font-size:14px;font-weight:500;color:var(--muted)}
.field-inline input{flex:1}
input[type=text],input[type=email],textarea{background:var(--surface2);border:0.5px solid var(--border2);border-radius:var(--radius);color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px;padding:10px 14px;outline:none;transition:border-color var(--transition);width:100%}
input[type=text]:focus,input[type=email]:focus,textarea:focus{border-color:var(--blue)}
input[type=text]::placeholder,input[type=email]::placeholder,textarea::placeholder{color:var(--muted2)}
.inline-input{display:inline-block;width:140px;padding:4px 8px;font-size:14px;margin-left:4px}
.radio-group{display:flex;flex-wrap:wrap;flex-direction:column;gap:8px}
.radio-label{display:flex;align-items:center;gap:8px;font-size:15px;cursor:pointer;padding:10px 14px;border-radius:var(--radius);border:0.5px solid var(--border);background:var(--surface2);transition:all var(--transition);line-height:1.5;word-break:break-word}
.radio-label:hover{border-color:var(--border2)}
.radio-label input[type=radio]{accent-color:var(--blue);flex-shrink:0;width:18px;height:18px;margin:0}
.radio-label input[type=checkbox]{accent-color:var(--blue);flex-shrink:0;width:18px;height:18px;margin:0}
.radio-label em{font-style:italic}
/* Span pembungkus teks di dalam radio-label agar wrap dengan benar di mobile */
.radio-label > span{flex:1;min-width:0;word-break:break-word;line-height:1.5;display:inline}
.lainnya-label{flex-wrap:nowrap}
.lainnya-label .lainnya-text{white-space:nowrap;flex-shrink:0}
.lainnya-label input.inline-input{flex:1;min-width:0;margin-left:8px;width:100% !important}
.lainnya-label input[type=text]{flex:1 !important;min-width:0 !important;width:0 !important}
.lainnya-label input[type=text]:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}
.posisi-grid{display:grid;grid-template-columns:1fr;gap:16px}
.posisi-group{display:flex;flex-direction:column;gap:6px}
.posisi-head{font-size:14px;font-weight:600;color:var(--blue-light);margin-bottom:2px}

/* ================================================================
   SCALE REFERENCE
   ================================================================ */
.scale-aspects{margin:12px 0 20px 20px}
.scale-aspects li{font-size:16px;margin:4px 0}
.scale-tables{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.scale-table-wrap h4{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;margin-bottom:8px;color:var(--muted)}
.scale-ref{width:100%;border-collapse:collapse;font-size:15px}
.scale-ref th,.scale-ref td{padding:8px 12px;border:0.5px solid var(--border2);text-align:left}
.scale-ref th{background:var(--surface2);font-weight:600;color:var(--muted)}
.scale-ref td:first-child{text-align:center;font-weight:600;width:50px}
.scale-ref tr:nth-child(even) td{background:var(--surface2)}

/* RISK MATRIX */
.risk-matrix-wrap{margin-bottom:20px}
.risk-matrix-wrap h4{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;margin-bottom:10px;color:var(--muted)}
.risk-matrix{display:grid;grid-template-columns:80px repeat(6,100px);gap:3px;width:max-content}
.rm-cell{width:100px;height:100px;padding:8px 4px;text-align:center;font-size:14px;font-weight:600;border-radius:4px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.rm-label{font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.3}
.rm-header{background:var(--surface2);font-size:12px;font-weight:600;color:var(--muted)}
.rm-0{background:rgba(128,128,128,0.25);color:var(--muted)}
.rm-low{background:rgba(74,124,47,0.3);color:#8bc34a}
.rm-med{background:rgba(200,160,64,0.3);color:#ffca28}
.rm-high{background:rgba(184,96,32,0.3);color:#ff9800}
.rm-vhigh{background:rgba(184,50,50,0.3);color:#ef5350}
.risk-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.rl{font-size:14px;font-weight:600;padding:4px 10px;border-radius:100px}
.rl.no-risk{background:rgba(128,128,128,0.15);color:var(--muted)}
.rl.low{background:rgba(74,124,47,0.2);color:#8bc34a}
.rl.medium{background:rgba(200,160,64,0.2);color:#ffca28}
.rl.high{background:rgba(184,96,32,0.2);color:#ff9800}
.rl.very-high{background:rgba(184,50,50,0.2);color:#ef5350}

/* ================================================================
   PHASE ASSESSMENT TABLE
   ================================================================ */
.phase-intro{font-size:15px;color:var(--muted);margin-bottom:6px;line-height:1.7}
.phase-instruction{font-size:15px;font-weight:600;color:var(--blue);margin-bottom:14px;padding:8px 12px;background:rgba(59,110,165,0.08);border-left:3px solid var(--blue);border-radius:0 6px 6px 0}
.phase-questions{font-size:15px;color:var(--muted);margin-bottom:4px}
.phase-questions b{color:var(--text)}
.table-outer{overflow-x:visible;border-radius:var(--radius-lg);border:1.5px solid var(--border2);margin:16px 0}
table.likert-tbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
table.likert-tbl thead tr:first-child th{padding:9px 4px;text-align:center;border-bottom:1.5px solid var(--border2);font-size:11px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase}
.th-no{background:var(--surface2);color:var(--muted);width:32px;text-align:center;vertical-align:middle}
.th-aspek{background:var(--surface2);color:var(--muted);min-width:100px;text-align:center !important;padding-left:4px !important;padding-right:4px !important}
.th-item{background:var(--surface2);color:var(--muted);text-align:center !important;padding-left:0 !important;vertical-align:middle}
table.likert-tbl tbody td.td-item{text-align:left !important;padding-left:10px !important}
.th-prob{background:rgba(59,110,165,0.15);color:var(--blue-light);border-left:2px solid rgba(59,110,165,0.5)}
.th-sev{background:rgba(107,79,168,0.15);color:#9b7fd4;border-left:2px solid rgba(107,79,168,0.5)}
.th-score{background:var(--surface2);color:var(--muted);width:48px}
table.likert-tbl thead tr.subhead th{padding:5px 3px;font-size:11px;font-weight:600;text-align:center;border-bottom:1.5px solid var(--border2);vertical-align:bottom;white-space:nowrap}
/* ── Subheader warna per kolom ── */
/* Probability */
.sub-p0{background:rgba(130,130,130,0.18);color:#666}
.sub-p0 .num{color:#888}
.sub-p0 .tiny{color:#999;font-size:9.5px}
.sub-p1{background:rgba(59,110,165,0.18);color:var(--blue)}
.sub-p1 .num{color:var(--blue)}
.sub-p1 .tiny{color:var(--blue-light);font-size:9.5px}
.sub-pmid{background:rgba(59,110,165,0.12);color:var(--blue)}
.sub-pmid .num{color:var(--blue)}
.sub-p5{background:rgba(220,53,69,0.18);color:var(--red)}
.sub-p5 .num{color:var(--red)}
.sub-p5 .tiny{color:#e05a6a;font-size:9.5px}
/* Impact */
.sub-s0{background:rgba(130,130,130,0.18);color:#666}
.sub-s0 .num{color:#888}
.sub-s0 .tiny{color:#999;font-size:9.5px}
.sub-s1{background:rgba(107,79,168,0.18);color:var(--purple)}
.sub-s1 .num{color:var(--purple)}
.sub-s1 .tiny{color:#b89ee0;font-size:9.5px}
.sub-smid{background:rgba(107,79,168,0.12);color:var(--purple)}
.sub-smid .num{color:var(--purple)}
.sub-s5{background:rgba(220,53,69,0.18);color:var(--red)}
.sub-s5 .num{color:var(--red)}
.sub-s5 .tiny{color:#e05a6a;font-size:9.5px}
/* Garis panah di kolom 3 (tengah range 1-4) */
.sub-arrow{position:relative;overflow:visible}
/* Arrow garis panjang: render di kolom tengah (kolom 3, class sub-arrow)
   Gunakan ::before untuk garis dan teks panah */
.sub-pmid.sub-arrow::before{
  content:'◀────────▶';
  position:absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left:50%;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  color:rgba(59,110,165,0.75);
  pointer-events:none;
}
.sub-smid.sub-arrow::before{
  content:'◀────────▶';
  position:absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left:50%;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  color:rgba(107,79,168,0.75);
  pointer-events:none;
}
.arrow-label{display:none}
/* .num dan .tiny center */
.sub-p0 .num,.sub-p1 .num,.sub-pmid .num,.sub-p5 .num,
.sub-s0 .num,.sub-s1 .num,.sub-smid .num,.sub-s5 .num{text-align:center}

.sub-aspek,.sub-item{text-align:center !important;padding-left:4px !important}
.num{display:block;font-family:'DM Serif Display',serif;font-size:17px;color:var(--text);line-height:1;margin-top:1px}
.tiny{display:block;font-size:9.5px;color:var(--muted2);white-space:nowrap}
table.likert-tbl tbody tr{border-bottom:1px solid var(--border2);transition:background var(--transition)}
table.likert-tbl tbody tr:last-child{border-bottom:none}
table.likert-tbl tbody tr:hover{background:rgba(255,255,255,0.03)}
td.td-no{text-align:center;font-size:12px;font-weight:600;color:var(--muted);padding:8px 2px;border-right:2px solid var(--border2)}
td.td-aspek{font-size:11.5px;font-weight:600;padding:6px 8px;border-right:2px solid var(--border2);vertical-align:middle;text-align:center;line-height:1.3;transition:background 0.15s}

/* ── Aspek color coding (sesuai warna Excel #ED7D31 / #70AD47 / #5B9BD5) ── */
/* Regulasi        → 🟠 Orange   (#ED7D31) */
[data-theme="light"] td.td-aspek.asp-regulasi    { background:#fde8d8; color:#7a3010; border-left:3px solid #ED7D31; }
/* Kualitas        → 🟢 Hijau    (#70AD47) */
[data-theme="light"] td.td-aspek.asp-kualitas    { background:#e2f0d9; color:#2a5216; border-left:3px solid #70AD47; }
/* Tender          → 🔵 Biru Muda (#5B9BD5) */
[data-theme="light"] td.td-aspek.asp-tender      { background:#ddeaf7; color:#1a3c6a; border-left:3px solid #5B9BD5; }
/* Kompetensi      → 🟠 Orange   (#ED7D31) */
[data-theme="light"] td.td-aspek.asp-kompetensi  { background:#fde8d8; color:#7a3010; border-left:3px solid #ED7D31; }
/* Desain          → 🟢 Hijau    (#70AD47) */
[data-theme="light"] td.td-aspek.asp-desain      { background:#e2f0d9; color:#2a5216; border-left:3px solid #70AD47; }
/* Perubahan       → 🔵 Biru Muda (#5B9BD5) */
[data-theme="light"] td.td-aspek.asp-perubahan   { background:#ddeaf7; color:#1a3c6a; border-left:3px solid #5B9BD5; }
/* Finansial       → 🟠 Orange   (#ED7D31) */
[data-theme="light"] td.td-aspek.asp-finansial   { background:#fde8d8; color:#7a3010; border-left:3px solid #ED7D31; }
/* Sumber Daya     → 🟢 Hijau    (#70AD47) */
[data-theme="light"] td.td-aspek.asp-sumber      { background:#e2f0d9; color:#2a5216; border-left:3px solid #70AD47; }
/* Manajemen       → 🔵 Biru Muda (#5B9BD5) */
[data-theme="light"] td.td-aspek.asp-manajemen   { background:#ddeaf7; color:#1a3c6a; border-left:3px solid #5B9BD5; }
/* Serah Terima / K3L → 🟠 Orange (#ED7D31) */
[data-theme="light"] td.td-aspek.asp-k3l         { background:#fde8d8; color:#7a3010; border-left:3px solid #ED7D31; }
/* Serah Terima      → 🟠 Orange (#ED7D31) */
[data-theme="light"] td.td-aspek.asp-serah        { background:#fde8d8; color:#7a3010; border-left:3px solid #ED7D31; }

/* Dark theme variant */
td.td-aspek.asp-regulasi    { background:rgba(237,125,49,0.18);  color:#f0a06a; border-left:3px solid rgba(237,125,49,0.6); }
td.td-aspek.asp-kualitas    { background:rgba(112,173,71,0.18);  color:#96cc6a; border-left:3px solid rgba(112,173,71,0.6); }
td.td-aspek.asp-tender      { background:rgba(91,155,213,0.18);  color:#80b8e8; border-left:3px solid rgba(91,155,213,0.6); }
td.td-aspek.asp-kompetensi  { background:rgba(237,125,49,0.18);  color:#f0a06a; border-left:3px solid rgba(237,125,49,0.6); }
td.td-aspek.asp-desain      { background:rgba(112,173,71,0.18);  color:#96cc6a; border-left:3px solid rgba(112,173,71,0.6); }
td.td-aspek.asp-perubahan   { background:rgba(91,155,213,0.18);  color:#80b8e8; border-left:3px solid rgba(91,155,213,0.6); }
td.td-aspek.asp-finansial   { background:rgba(237,125,49,0.18);  color:#f0a06a; border-left:3px solid rgba(237,125,49,0.6); }
td.td-aspek.asp-sumber      { background:rgba(112,173,71,0.18);  color:#96cc6a; border-left:3px solid rgba(112,173,71,0.6); }
td.td-aspek.asp-manajemen   { background:rgba(91,155,213,0.18);  color:#80b8e8; border-left:3px solid rgba(91,155,213,0.6); }
td.td-aspek.asp-k3l         { background:rgba(237,125,49,0.18);  color:#f0a06a; border-left:3px solid rgba(237,125,49,0.6); }
td.td-aspek.asp-serah       { background:rgba(237,125,49,0.18);  color:#f0a06a; border-left:3px solid rgba(237,125,49,0.6); }
td.td-item{font-size:13px;color:var(--text);padding:8px 8px;border-right:2px solid rgba(59,110,165,0.5);vertical-align:middle;line-height:1.45;word-break:break-word}
td.cell{text-align:center;padding:6px 2px;vertical-align:middle;cursor:pointer;border-right:1.5px solid var(--border2)}
td.cell:last-of-type{border-right:none}
.dot{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,0.2);background:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:transparent;transition:all 0.18s cubic-bezier(0.34,1.56,0.64,1);cursor:pointer}
.dot:hover{border-color:rgba(255,255,255,0.45);transform:scale(1.15)}
.dot.sel{color:#fff;border-color:transparent;transform:scale(1.2);box-shadow:0 0 0 3px rgba(255,255,255,0.1)}
.dot.p0.sel{background:#888}
.dot.p1.sel,.dot.p2.sel,.dot.p3.sel,.dot.p4.sel{background:var(--blue)}
.dot.p5.sel{background:var(--red)}
.dot.s0.sel{background:#888}
.dot.s1.sel,.dot.s2.sel,.dot.s3.sel,.dot.s4.sel{background:var(--purple)}
.dot.s5.sel{background:var(--red)}

/* N/A Column */
.col-na{width:52px}
.th-na{background:rgba(138,132,117,0.15);color:var(--muted);font-size:12px;font-weight:600;text-align:center;padding:6px 4px;border-left:2px solid rgba(138,132,117,0.4);vertical-align:middle}
.cell-na-col{border-left:2px solid rgba(138,132,117,0.4);text-align:center;cursor:pointer}
.dot-na{width:36px;height:24px;border-radius:6px;border:2px dashed rgba(138,132,117,0.5);background:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted);transition:all 0.18s ease;cursor:pointer}
.dot-na:hover{border-color:var(--muted);background:rgba(138,132,117,0.12)}
.dot-na.dot-na-sel{background:#888;border:2px solid #888;color:#fff}

/* Cell disabled (saat N/A dipilih) */
.cell-disabled{opacity:0.25;cursor:default}

/* Warning harap isi */
.ph-warn{font-size:13px;font-weight:600;color:var(--red);margin-top:6px}
td.score-cell{text-align:center;padding:8px 6px;border-left:0.5px solid var(--border2)}
.score-pill{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;border-radius:100px;font-size:13px;font-weight:700;background:var(--surface2);color:var(--muted);transition:all 0.2s}
.score-pill.no-risk{background:rgba(128,128,128,0.2);color:var(--muted)}
.score-pill.low{background:rgba(74,124,47,0.2);color:#8bc34a}
.score-pill.medium{background:rgba(200,160,64,0.2);color:#ffca28}
.score-pill.high{background:rgba(184,96,32,0.2);color:#ff9800}
.score-pill.very-high{background:rgba(184,50,50,0.2);color:#ef5350}
.phase-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.ph-card{background:var(--surface2);border:0.5px solid var(--border);border-radius:var(--radius);padding:16px 20px}
.ph-card-prob{border-left:3px solid rgba(59,110,165,0.7);background:rgba(59,110,165,0.07)}
.ph-card-sev{border-left:3px solid rgba(107,79,168,0.7);background:rgba(107,79,168,0.07)}
.ph-label{font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ph-val{font-family:'DM Serif Display',serif;font-size:30px}

/* Fixed column widths for no-scroll layout */
table.likert-tbl col.col-no   { width: 32px }
table.likert-tbl col.col-aspek { width: 110px }
table.likert-tbl col.col-item { width: auto }
table.likert-tbl col.col-sc   { width: 36px }

/* Separator between prob and sev sections */
table.likert-tbl td.cell-sev-start,
table.likert-tbl th.sub-sev-start { border-left: 2.5px solid rgba(107,79,168,0.55) !important }

/* Thicker outer border on table */
.table-outer { border: 2px solid var(--border2) }

/* Responsive: on small screens allow scroll again */
@media(max-width:900px){
  .table-outer { overflow-x:auto }
  table.likert-tbl { min-width:700px; table-layout:auto }
}

/* ================================================================
   RISK MATRIX RESULT
   ================================================================ */
.rm-result-wrap{margin:0 0 20px;overflow-x:auto}
.rm-result-grid{display:grid;grid-template-columns:100px repeat(6,100px);gap:3px;margin-bottom:12px;width:max-content}
.rm-corner{display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--muted);background:var(--surface2);border-radius:6px;padding:6px;width:100px;height:100px;box-sizing:border-box}
.rm-result-header{background:rgba(44,104,123,0.25);color:#9ED3DC;font-size:12px;font-weight:600;text-align:center;padding:6px 4px;border-radius:6px;line-height:1.3;width:100px;height:100px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.rm-result-rowlabel{background:rgba(44,104,123,0.15);color:#9ED3DC;font-size:11px;font-weight:600;text-align:center;padding:6px 4px;border-radius:6px;line-height:1.3;display:flex;align-items:center;justify-content:center;width:100px;height:100px;box-sizing:border-box}
.rm-result-cell{border-radius:6px;padding:6px 4px;text-align:center;width:100px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform 0.15s;box-sizing:border-box}
.rm-result-cell:hover{transform:scale(1.05)}
.rm-result-score{font-size:15px;font-weight:700;line-height:1}
.rm-result-count{font-size:12px;font-weight:700;background:rgba(255,255,255,0.2);border-radius:100px;padding:1px 6px;margin-top:2px;color:#fff}
.rm-result-outer{width:max-content}
.rm-banner-row{display:flex;margin-bottom:3px;width:max-content}
.rm-prob-banner{width:100px;background:#1e3a5f;color:#fff;font-size:11px;font-weight:700;text-align:center;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:6px 4px;line-height:1.3;box-sizing:border-box;flex-shrink:0}
.rm-impact-banner{width:600px;background:#1e3a5f;color:#fff;font-size:12px;font-weight:700;text-align:center;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:8px 4px;line-height:1.3;box-sizing:border-box;margin-left:3px;letter-spacing:0.3px}

.open-questions{display:flex;flex-direction:column;gap:20px}
.open-q label{font-size:16px;line-height:1.7;display:block;margin-bottom:8px}
textarea{resize:vertical;min-height:80px}

/* ================================================================
   RESULTS
   ================================================================ */
.results-page{}
.result-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:28px}
.res-card{background:var(--surface2);border:0.5px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.res-label{font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.res-val{font-family:'DM Serif Display',serif;font-size:28px}
.res-sub{font-size:13px;color:var(--muted);margin-top:2px}
.phase-result-section{margin-bottom:32px}
.phase-result-section h3{font-size:19px;margin-bottom:14px;padding-bottom:8px;border-bottom:0.5px solid var(--border)}
.risk-bars{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.risk-bar-row{display:flex;align-items:center;gap:10px;font-size:14px}
.rbar-label{width:100px;color:var(--muted);flex-shrink:0}
.rbar-track{flex:1;height:8px;background:var(--surface2);border-radius:100px;overflow:hidden}
.rbar-fill{height:100%;border-radius:100px;transition:width 0.6s ease}
.rbar-val{width:40px;text-align:right;font-weight:600}
.indicator-risk-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:12px}
.indicator-risk-table th{padding:8px 10px;background:var(--surface2);font-weight:600;color:var(--muted);text-align:left;border-bottom:0.5px solid var(--border2)}
.indicator-risk-table td{padding:8px 10px;border-bottom:0.5px solid var(--border);vertical-align:middle}
.risk-badge{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:100px;font-size:12px;font-weight:700}
.rb-unassessed{background:rgba(128,128,128,0.15);color:var(--muted)}
.ph-comp-unassessed{opacity:0.5;border-style:dashed}
.rb-low{background:rgba(74,124,47,0.2);color:#8bc34a}
.rb-med{background:rgba(200,160,64,0.2);color:#ffca28}
.rb-high{background:rgba(184,96,32,0.2);color:#ff9800}
.rb-vhigh{background:rgba(184,50,50,0.2);color:#ef5350}
.phase-comparison{margin-bottom:28px}
.phase-comparison h3{font-size:19px;margin-bottom:14px;padding-bottom:8px;border-bottom:0.5px solid var(--border)}
.phase-comp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.ph-comp-card{background:var(--surface2);border:0.5px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center}
.ph-comp-name{font-size:13px;color:var(--muted);margin-bottom:8px}
.ph-comp-score{font-family:'DM Serif Display',serif;font-size:30px;margin-bottom:4px}
.ph-comp-badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:12px;font-weight:700}
.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:0.5px solid var(--border)}
.btn-result{padding:11px 22px;border-radius:var(--radius);border:0.5px solid var(--border2);background:transparent;color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;cursor:pointer;transition:all var(--transition)}
.btn-result:hover{background:var(--surface2)}
.btn-result.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-result.primary:hover{background:var(--blue-light)}

/* ================================================================
   TOAST
   ================================================================ */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--red);color:#fff;font-size:15px;font-weight:500;padding:10px 22px;border-radius:100px;z-index:300;opacity:0;transition:all 0.3s ease;white-space:nowrap;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{background:#16a34a}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:640px){
  .form-row,.scale-tables,.posisi-grid{grid-template-columns:1fr}
  .landing-hero{padding:28px 16px 60px}
  .step-page{padding:24px 16px 60px}
  .hero-title{font-size:26px}

  /* Navbar mobile — cegah tumpang tindih */
  .logo-text{font-size:14px;max-width:160px;white-space:normal;word-break:keep-all;line-height:1.3}
  .nav-inner{padding:0 10px;gap:6px}
  .nav-right{gap:6px;flex-shrink:0}
  .lang-btn{padding:4px 7px;font-size:12px}
  .btn-admin-login{padding:4px 8px;font-size:12px;gap:4px}
  .toggle-theme{width:30px;height:30px;font-size:16px}

  /* Cover ITB mobile */
  .cover-box{margin:0}
  .cover-header{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:14px 12px}
  .cover-logo{width:52px;height:52px}
  .cover-univ{font-size:13px}
  .cover-faculty,.cover-prodi{font-size:12px}
  .cover-address{font-size:11px}
  .cover-body{padding:14px 16px}
  .cover-judul{font-size:14px;line-height:1.55}

  /* Radio label mobile: teks panjang wrap baik */
  .radio-label{padding:10px 12px;font-size:14px;align-items:flex-start}
  .radio-label input[type=radio],
  .radio-label input[type=checkbox]{margin-top:2px}

  /* Lainnya wrap di mobile */
  .lainnya-label{flex-wrap:wrap;gap:6px}
  .lainnya-label .inline-input{width:100%;margin-left:0;margin-top:4px}

  /* Confirm box */
  .confirm-box{padding:20px 16px}
  .confirm-box h3{font-size:16px}
  .confirm-btns{flex-direction:column;gap:10px}
  .conf-btn{width:100%;padding:12px}

  /* Flow card */
  .flow-card{padding:16px}
  .flow-card h3{font-size:16px}

  /* Step nav full width */
  .step-nav{flex-direction:column}
  .btn-back,.btn-next{width:100%;text-align:center}

  /* Stepper mobile — lebih kompak */
  .stepper-wrap{padding:10px 12px}
  .step-dot{min-width:44px}
  .step-circle{width:28px;height:28px;font-size:12px}
  .step-name{font-size:10px}
  .stepper-label{font-size:12px}

  /* Skala tabel mobile: 1 kolom */
  .scale-tables{grid-template-columns:1fr;gap:12px}

  /* Step header mobile */
  .step-header h2{font-size:20px}

  /* Identity form — label lebih kecil */
  .field-label-required{font-size:15px}
  .identity-subtitle{font-size:14px}

  /* Phase summary cards */
  .phase-summary{grid-template-columns:1fr 1fr}
  .ph-val{font-size:24px}

  /* Review tabs wrap lebih rapi */
  .review-phase-tabs{gap:6px}
  .review-tab{padding:5px 10px;font-size:11px}

  /* Interview box mobile */
  .interview-box{padding:28px 18px;margin:20px auto}
  .interview-btns{flex-direction:column;gap:10px}
  .conf-btn.interview-yes,.conf-btn.interview-no{width:100%;min-width:unset;padding:12px}

  /* Thank you box mobile */
  .thankyou-box{padding:32px 20px;margin:20px auto}
  .thankyou-box h2{font-size:22px}
  .thankyou-icon{font-size:44px}

  /* Sektor sub-wrap di posisi group */
  .sektor-sub-wrap{padding:10px}

  /* Flow card paragraf di landing */
  .flow-card p{font-size:14px}
}
/* ================================================================
   COVER ITB
   ================================================================ */
.cover-box{border:1.5px solid var(--border2);border-radius:var(--radius-lg);overflow:hidden;max-width:780px;margin:0 auto}
.cover-header{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1.5px solid rgba(255,255,255,0.2);background:#2C687B}
.cover-logo{width:72px;height:72px;object-fit:contain;flex-shrink:0}
.cover-header-text{text-align:center;flex:1}
.cover-univ{font-weight:700;font-size:17px;letter-spacing:0.03em;color:#ffffff}
.cover-faculty{font-size:17px;margin-top:2px;color:#e0f0f5}
.cover-prodi{font-size:17px;color:#e0f0f5}
.cover-address{font-size:16px;color:#b0d8e5;margin-top:2px}
.cover-body{padding:20px 24px;background:#DFF1F1;color:var(--text)}
.cover-judul{font-size:17px;font-weight:600;text-align:center;line-height:1.6;margin-bottom:16px}
.cover-judul em{font-style:italic}
.cover-info{border-top:1px solid rgba(0,0,0,0.1);padding-top:14px;display:flex;flex-direction:column;gap:10px;font-size:17px}
.cover-info-row{display:flex;gap:12px}
.cover-info-label{font-weight:700;white-space:nowrap;min-width:110px}

/* ================================================================
   NAVBAR LIGHT THEME
   ================================================================ */
[data-theme="light"] .navbar{background:#2C687B;border-bottom-color:rgba(255,255,255,0.15)}
[data-theme="light"] .logo-text{color:#ffffff}
[data-theme="light"] .toggle-theme{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);color:#ffffff}
[data-theme="light"] .toggle-theme:hover{background:rgba(255,255,255,0.25)}
[data-theme="light"] .lang-btn{color:rgba(255,255,255,0.7)}
[data-theme="light"] .lang-btn.active{background:#1B3C53;color:#ffffff}

/* ================================================================
   COVER HEADER DARK THEME
   ================================================================ */
[data-theme="dark"] .cover-header{background:var(--surface)}
[data-theme="dark"] .cover-univ{color:var(--text)}
[data-theme="dark"] .cover-faculty{color:var(--muted)}
[data-theme="dark"] .cover-prodi{color:var(--muted)}
[data-theme="dark"] .cover-address{color:var(--muted2)}
[data-theme="dark"] .cover-body{background:var(--surface2);color:var(--text)}
/* ================================================================
   ADMIN NAVBAR
   ================================================================ */
.admin-nav-area { display: flex; align-items: center; }
.btn-admin-login {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  background: rgba(184,50,50,0.15); border: 1px solid rgba(184,50,50,0.4);
  color: #e07070; font-family: 'DM Sans', sans-serif; font-size:14px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-admin-login:hover { background: rgba(184,50,50,0.28); color: #ef9090; }
.admin-badge {
  display: none; align-items: center; gap: 8px;
  background: #8bc34a; border: 1px solid rgba(74,124,47,0.6);
  border-radius: 20px; padding: 5px 12px;
}
.admin-badge:hover { background: rgba(220,38,38,0.25); border-color: rgba(220,38,38,0.6); transition: background 0.2s, border-color 0.2s; }
.admin-dot { color: #6aa84f; font-size:12px; }
.admin-badge > span { font-size:14px; font-weight: 600; color: rgba(74,124,47,0.9); }
.btn-admin-logout {
  background: none; border: none; color: #dc2626; cursor: pointer;
  font-size: 18px; font-weight: 700; padding: 0 2px; line-height: 1;
}
.btn-admin-logout:hover { color: var(--red); }

/* ================================================================
   ADMIN MODAL
   ================================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius-lg); width: 100%; max-width: 400px;
  margin: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0; margin-bottom: 4px;
}
.modal-header h3 { font-size:20px; }
.modal-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size:20px; line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 16px 24px 24px; }
.modal-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.modal-field label { font-size:14px; font-weight: 600; color: var(--muted); }
.modal-field input {
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size:16px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.modal-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.10);
}
.modal-error {
  background: rgba(184,50,50,0.15); border: 1px solid rgba(184,50,50,0.35);
  border-radius: var(--radius); padding: 10px 14px; font-size:15px;
  color: #e07070; margin-bottom: 14px;
}
.btn-modal-submit {
  width: 100%; padding: 12px; border-radius: var(--radius); border: none;
  background: var(--red); color: #fff; font-family: 'DM Sans', sans-serif;
  font-size:16px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-modal-submit:hover { background: var(--red-light); }
.btn-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ================================================================
   THANK YOU PAGE (USER)
   ================================================================ */
.thankyou-box {
  max-width: 560px; margin: 40px auto; text-align: center;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius-xl); padding: 48px 40px;
}
.thankyou-icon { font-size:58px; margin-bottom: 20px; }
.thankyou-box h2 { font-size:30px; margin-bottom: 16px; }
.thankyou-box p { font-size:17px; color: var(--muted); line-height: 1.7; }

/* ================================================================
   ADMIN RESULT BADGE
   ================================================================ */
.admin-result-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(74,124,47,0.15); border: 1px solid rgba(74,124,47,0.4);
  border-radius: 20px; padding: 4px 14px; font-size:14px;
  font-weight: 600; color: #8bc34a; margin-top: 8px;
}

/* ================================================================
   DOWNLOAD PANEL (ADMIN)
   ================================================================ */
.download-panel {
  margin-top: 16px; background: var(--surface2);
  border: 1px solid var(--border2); border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.download-panel h4 { font-size:16px; margin-bottom: 14px; font-family: 'DM Sans', sans-serif; }
.download-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
}
.btn-dl {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--radius);
  background: rgba(29,111,66,0.2); border: 1px solid rgba(29,111,66,0.5);
  color: #6aa84f; font-size:15px; font-weight: 600;
  text-decoration: none; transition: all 0.2s; text-align: center;
}
.btn-dl:hover { background: rgba(29,111,66,0.35); color: #8bc34a; }
/* ================================================================
   INTERVIEW PAGE (page-10)
   ================================================================ */
.interview-box {
  max-width: 560px;
  margin: 40px auto;
  text-align: center;
  padding: 40px 32px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.interview-icon {
  font-size:50px;
  margin-bottom: 16px;
}

.interview-title {
  font-size:26px;
  color: var(--text);
  margin-bottom: 16px;
}

.interview-desc {
  font-size:16px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

.interview-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 0;
}

/* Override conf-btn untuk interview */
.conf-btn.interview-yes {
  background: var(--surface2);
  border: 2px solid var(--border2);
  color: var(--text);
  padding: 14px 36px;
  border-radius: var(--radius-lg);
  font-size:17px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
}

.conf-btn.interview-no {
  background: var(--surface2);
  border: 2px solid var(--border2);
  color: var(--text);
  padding: 14px 36px;
  border-radius: var(--radius-lg);
  font-size:17px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
}

.conf-btn.interview-yes:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.conf-btn.interview-no:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Stay states setelah klik */
.conf-btn.selected-yes {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
}

.conf-btn.selected-no {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

/* Form identitas dalam interview box */
.iw-form {
  margin-top: 28px;
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  animation: fadeSlideDown 0.3s ease;
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.iw-form-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.iw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.iw-field label {
  font-size:15px;
  font-weight: 600;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
}

.iw-field input {
  padding: 10px 14px;
  border: 1.5px solid var(--border2);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-size:16px;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}

.iw-field input:focus {
  border-color: var(--blue-light);
}

.iw-field input::placeholder {
  color: var(--muted2);
}

.iw-submit-btn {
  margin-top: 8px;
  width: 100%;
  padding: 13px;
  font-size:17px;
}

#iw-no-submit {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  animation: fadeSlideDown 0.3s ease;
}

/* ================================================================
   FINAL PAGE (page-11)
   ================================================================ */
#page-11 .thankyou-box {
  max-width: 500px;
  margin: 60px auto;
  text-align: center;
  padding: 48px 32px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

/* ================================================================
   INFORMASI RESPONDEN (page-2) — REVISI 2
   ================================================================ */
.identity-subtitle {
  font-size:16px;
  color: var(--muted);
  margin-top: 6px;
  font-family: 'DM Sans', sans-serif;
}

.field-label-required {
  display: block;
  font-size:16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.5;
}

.req-star {
  color: var(--red-light);
  font-weight: 700;
}

/* Error banner */
.identity-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(184,50,50,0.10);
  border: 1px solid rgba(184,50,50,0.35);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size:15px;
  color: var(--red-light);
  font-family: 'DM Sans', sans-serif;
}

/* Field error highlight */
.field-error {
  background: rgba(184,50,50,0.06);
  border: 1.5px solid rgba(184,50,50,0.35);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 4px;
}

.field-error .field-label-required {
  color: var(--red-light);
}

/* Spacing antara field di informasi responden */
#page-2 .field-group.full {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

#page-2 .field-group.full:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* ================================================================
   NB BOX (page-3 skala info) — REVISI 3
   ================================================================ */
.nb-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(59, 110, 165, 0.08);
  border: 1px solid rgba(59, 110, 165, 0.25);
  border-left: 3px solid var(--blue-light);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 16px 0;
  font-size:15px;
  line-height: 1.7;
  color: var(--text);
}

.nb-label {
  font-weight: 700;
  color: var(--blue-light);
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  padding-top: 1px;
}

.nb-box p {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
}

.nowrap { white-space: nowrap; }

/* EN: header subkolom tabel diizinkan wrap agar tidak overflow */
[data-lang="en"] table.likert-tbl thead tr.subhead th { white-space: normal; word-break: break-word; }
[data-lang="en"] .tiny { white-space: normal; word-break: break-word; line-height: 1.2; }