*{box-sizing:border-box}body{margin:0;background:#08101d;color:#e8eef7;font-family:Inter,Segoe UI,Arial,sans-serif}.app{max-width:1240px;margin:auto;padding:30px 22px}.hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}.eyebrow{font-size:10px;letter-spacing:2px;color:#7e8ca1}.hero h1{font-size:38px;line-height:1.05;margin:7px 0 8px;letter-spacing:-1px}.hero h1 span{font-size:14px;color:#8fa6bf;vertical-align:middle;letter-spacing:1px}.hero p{margin:0;color:#8c9bb0;font-size:13px}.status-pill{border:1px solid #26364d;border-radius:999px;padding:9px 13px;font-size:10px;color:#9db1c9;background:#0d1726;white-space:nowrap}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#42d3a5;margin-right:7px}.panel{background:linear-gradient(180deg,#101b2b,#0d1624);border:1px solid #23344b;border-radius:18px;padding:20px;margin-bottom:18px;box-shadow:0 14px 40px rgba(0,0,0,.18)}.row{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;margin-bottom:14px}.row label,.child-label,.field label,.panel>label{display:block;color:#8ea0b7;font-size:11px}.field input,.field textarea,.top-row select,.top-row input,.child-label select,.option-row select,.option-row input{width:100%;margin-top:7px;background:#091321;border:1px solid #26384f;color:#e8eef7;border-radius:10px;padding:11px 12px;font:inherit;min-height:42px}.field textarea{resize:vertical;min-height:95px;line-height:1.45}.field input:focus,.field textarea:focus,select:focus{outline:1px solid #4d9fff;border-color:#4d9fff}.route-bar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;background:#091321;border:1px solid #23344b;border-radius:12px;padding:12px;margin-bottom:13px}.route-bar div{min-width:0}.route-bar span{display:block;color:#64758c;font-size:9px;letter-spacing:1px;margin-bottom:4px}.route-bar strong{font-size:13px;color:#f0f5fb}.route-note{font-size:11px;color:#667890;display:flex;align-items:center;justify-content:flex-end}.child-label{margin-bottom:16px}.mode-title,.section-title,.option-title{font-size:12px;font-weight:800;letter-spacing:.8px;color:#dbe6f4;margin:14px 0 8px}.data-modes,.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:17px}.mode-card,.choice{display:flex;gap:10px;align-items:center;padding:12px;background:#091321;border:1px solid #26384f;border-radius:11px;cursor:pointer}.mode-card input,.choice input{width:auto;margin:0}.mode-card span,.choice span{display:flex;flex-direction:column}.mode-card b,.choice b{font-size:11px}.mode-card small,.choice small{font-size:9px;color:#71829a;margin-top:3px}.mode-card.is-checked,.choice.is-checked,.mode-card:has(input:checked),.choice:has(input:checked){border-color:#4d9fff;box-shadow:0 0 0 1px #4d9fff inset}.cv-options{border:1px solid #2c4968;background:linear-gradient(180deg,#0d1a2b,#0b1523);border-radius:14px;padding:14px;margin:4px 0 17px}.cv-options .choice-grid{grid-template-columns:repeat(3,1fr);margin-bottom:12px}.option-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cv-hint,.field-hint{font-size:9px;color:#73859d}.cv-hint{padding-top:8px}.hidden{display:none!important}.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:10px 0 17px}.field{min-width:0}.field-hint{margin-left:6px;color:#4d9fff}.toggle{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:11px 12px;background:#091321;border:1px solid #26384f;border-radius:10px;margin-bottom:15px}.check{display:flex;align-items:center;gap:8px;color:#dce6f2;font-size:11px}.check input{width:auto;margin:0}.toggle span{font-size:9px;color:#6e8097}.actions,.result-actions{display:flex;gap:9px;margin-top:14px}button{border:0;border-radius:10px;padding:11px 15px;background:#edf3fa;color:#08101d;font-weight:800;cursor:pointer;font-size:11px}button.secondary{background:#162337;color:#dbe6f2;border:1px solid #2a3e58}button.danger{background:#2a161b;color:#ffb9c0;border:1px solid #6a3039}button:hover{filter:brightness(1.08)}button:disabled{opacity:.5;cursor:wait}#status{min-height:18px;color:#8192a8;font-size:11px;margin-top:9px}.result-panel{min-height:500px}.result-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.result-head h2{font-size:16px;margin:0}.result-head small{display:block;color:#6f8096;font-size:10px;margin-top:4px}.result-actions{margin-top:0}pre{white-space:pre-wrap;word-wrap:break-word;background:#08111e;border:1px solid #24364e;border-radius:12px;padding:17px;min-height:410px;line-height:1.55;font-family:Consolas,Monaco,monospace;font-size:12px;margin:14px 0 0;color:#dce7f3}.saved-list{display:grid;gap:9px;margin-top:14px}.saved-item{display:flex;justify-content:space-between;gap:15px;align-items:center;background:#091321;border:1px solid #24364e;border-radius:11px;padding:12px}.saved-info{display:flex;flex-direction:column;gap:4px;min-width:0}.saved-info strong{font-size:11px;overflow:hidden;text-overflow:ellipsis}.saved-info small{font-size:9px;color:#6e8097}.saved-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.saved-actions button{padding:7px 9px;font-size:9px}.empty{color:#6c7d93;font-size:10px;padding:12px;border:1px dashed #2a3c55;border-radius:10px}footer{color:#5f7189;font-size:10px;text-align:center;padding:3px 0 18px}@media(max-width:800px){.row,.fields,.data-modes,.cv-options .choice-grid,.option-row{grid-template-columns:1fr}.route-bar{grid-template-columns:1fr}.route-note{justify-content:flex-start}.hero{flex-direction:column}.result-head{align-items:flex-start;flex-direction:column}.result-actions{width:100%}.saved-item{align-items:flex-start;flex-direction:column}.saved-actions{justify-content:flex-start}}

/* V2.4 WEB finishing: consistent controls and spacing */
.raw-label{display:block;color:#8ea0b7;font-size:11px;margin-top:2px}
.raw-label textarea{display:block;width:100%;margin-top:7px;background:#091321;border:1px solid #26384f;color:#e8eef7;border-radius:10px;padding:11px 12px;font:inherit;min-height:110px;line-height:1.45;resize:vertical}
.raw-label textarea:focus{outline:1px solid #4d9fff;border-color:#4d9fff}
.fields .field input,.fields .field textarea,.option-row input,.option-row select,.top-row select,.top-row input,.child-label select{height:42px}
.fields .field textarea{height:auto;min-height:100px}
.option-row label{display:block;color:#8ea0b7;font-size:11px}
.option-row label input,.option-row label select{display:block}


/* ============================================================
   V2.5 WEB - tambahan optimasi kinerja & UI
   ============================================================ */

/* Hindari layout shift saat panel hasil kosong */
.result-panel{min-height:auto}
pre{min-height:320px;contain:content}

/* Panel yang jauh di bawah tidak ikut dirender sampai terlihat */
.saved-panel{content-visibility:auto;contain-intrinsic-size:auto 320px}

/* Field wajib */
.field-hint.req{color:#ffb9c0}

/* Hint shortcut keyboard */
.kbd-hint{display:flex;align-items:center;font-size:9px;letter-spacing:1px;color:#5f7189;
  border:1px solid #24364e;border-radius:8px;padding:0 10px;white-space:nowrap}

/* Kotak pencarian prompt tersimpan */
.saved-search{width:100%;margin-top:12px;background:#091321;border:1px solid #26384f;color:#e8eef7;
  border-radius:10px;padding:10px 12px;font:inherit;font-size:11px;min-height:38px}
.saved-search:focus{outline:1px solid #4d9fff;border-color:#4d9fff}
.saved-search::placeholder{color:#5f7189}

/* Transisi ringan hanya pada properti murah */
.mode-card,.choice,.saved-item{transition:border-color .12s ease,box-shadow .12s ease}
button{transition:filter .12s ease}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Target sentuh lebih besar di layar kecil */
@media(max-width:800px){
  .kbd-hint{display:none}
  .actions{flex-wrap:wrap}
  .actions button{flex:1 1 auto}
  .saved-actions button{padding:9px 11px;font-size:10px}
}

/* ============================================================
   V2.6 - Panel audit, tools export/import
   ============================================================ */

.audit{margin-top:13px;background:#091321;border:1px solid #24364e;border-radius:12px;padding:13px 14px}
.audit-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.audit-head b{font-size:10px;letter-spacing:1.4px;color:#dbe6f4}
.audit-score{font-size:10px;padding:4px 10px;border-radius:999px;border:1px solid #26384f;white-space:nowrap}
.audit-score.good{color:#42d3a5;border-color:#1f5c48;background:#0b2019}
.audit-score.mid{color:#f0c674;border-color:#5c4a1f;background:#201b0b}
.audit-score.low{color:#ffb9c0;border-color:#6a3039;background:#200e11}

.audit-sec{margin-top:11px}
.audit-sec>span{display:block;font-size:9px;letter-spacing:1.2px;color:#64758c;margin-bottom:5px}
.audit-locks{font-size:10px;color:#9db1c9;line-height:1.7;word-break:break-word}
.audit-locks b{color:#dce7f3;font-weight:700}
.audit-missing{font-size:10px;color:#73859d;line-height:1.65;word-break:break-word}
.audit-list{margin:0;padding-left:16px;font-size:10px;line-height:1.65}
.audit-list li{margin-bottom:4px}
.audit-list li.info{color:#8ea0b7}
.audit-list li.warn{color:#f0c674}

.saved-tools{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.saved-tools button{padding:9px 12px;font-size:9px}
@media(max-width:800px){
  .saved-tools{width:100%;justify-content:flex-start}
  .saved-tools button{flex:1 1 auto}
}