/* Tema Tatalogam Group — dipakai index.html & admin.html (gaya mengikuti mockup Form Penilaian Investigator) */
@font-face{font-family:'Montserrat';src:url(/fonts/Montserrat-var.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(/fonts/SourceSans3-var.woff2) format('woff2');font-weight:200 900;font-display:swap}
:root{--blue:#0054a4;--blue-deep:#003b7a;--lime:#9cc814;--navy:#0b2a4a;--bg:#eef3f9;--ink:#12263f;--muted:#5a6f88;--line:#e3ebf4;--bd:#c4d3e6;--bd2:#b9cfe8;--danger:#c0392b;--head:'Montserrat',sans-serif;--sh:0 8px 30px rgba(0,60,120,.10);--sh-sm:0 4px 16px rgba(0,60,120,.07);
--accent:var(--blue);--accent-dark:var(--blue);--accent-tint:#eaf2fc;--paper:var(--bg);--brand-green:var(--lime)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 'Source Sans 3',system-ui,sans-serif}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
h1,h2,h3{font-family:var(--head)}
/* ---------- kontrol ---------- */
input[type=text],input[type=search],input[type=number],input[type=password],input[type=date],select,textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--bd);border-radius:10px;padding:11px 14px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,84,164,.14)}
textarea{resize:vertical;min-height:56px}
input[type=radio],input[type=checkbox]{accent-color:var(--blue)}
button.primary,.btn-primary{display:inline-flex;align-items:center;gap:12px;font:800 15px var(--head);color:#fff;background:var(--blue);border:0;border-radius:999px;padding:13px 28px;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s,box-shadow .15s}
button.primary:hover,.btn-primary:hover{background:var(--blue-deep);box-shadow:0 6px 16px rgba(0,84,164,.28)}
button.primary:active:not(:disabled){transform:translateY(1px)}
button.primary:disabled{background:#8fa7c2;cursor:default}
.arrow{background:var(--lime);color:var(--navy);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:15px}
button.secondary,.btn-outline{font:700 14px var(--head);color:var(--blue);background:#fff;border:1.5px solid var(--bd2);border-radius:999px;padding:11px 22px;cursor:pointer;text-decoration:none;display:inline-block}
button.secondary:hover,.btn-outline:hover{background:#f3f8fe;border-color:var(--blue)}
a.dl,button.dl{font:700 13px 'Source Sans 3',sans-serif;color:var(--blue);background:none;border:0;padding:0;margin-right:12px;cursor:pointer;text-decoration:none}
a.dl:hover,button.dl:hover{text-decoration:underline}
button.dl.danger{color:var(--danger)}
td .dl,#adminsList .dl{display:inline-block;margin:2px 6px 2px 0;padding:6px 12px;border:1.5px solid var(--bd2);border-radius:8px;background:#fff}
td .dl:hover{background:#f3f8fe;text-decoration:none}
td .dl.danger{border-color:#efc4bf}
td .dl.danger:hover{background:#fdeceb}
.status{font-size:14px}.status.ok{color:#3d5a00;font-weight:600}.status.err{color:var(--danger);font-weight:600}
.card{background:#fff;border-radius:18px;padding:28px;box-shadow:var(--sh)}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.num{flex:none;width:36px;height:36px;border-radius:10px;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 16px var(--head)}
.sec-head h2{margin:0;font:800 20px var(--head);color:var(--blue)}
.pill-tag{display:inline-block;background:var(--lime);color:var(--navy);font:800 12px var(--head);letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
/* ---------- halaman form publik ---------- */
.site-head{background:#fff;border-bottom:4px solid var(--lime)}
.site-head .in{max-width:920px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px}
.site-head img{height:60px;width:auto;display:block}
.site-head .sep{width:1px;height:36px;background:#d5dfec}
.site-head .label{font:700 13px var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.site-head .admin-link-btn{margin-left:auto;font:700 13px var(--head);color:var(--blue);border:1.5px solid var(--bd2);border-radius:999px;padding:8px 16px;text-decoration:none;white-space:nowrap}
.site-head .admin-link-btn:hover{background:#f3f8fe;border-color:var(--blue)}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%);color:#fff;padding:56px 20px 112px}
.hero svg{position:absolute;right:-20px;top:0;width:520px;height:360px}
.hero .wrap{position:relative;max-width:920px;margin:0 auto;animation:rise .5s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero h1{margin:16px 0 12px;font:800 42px/1.12 var(--head);max-width:640px}
.hero p{margin:0;max-width:560px;font-size:18px;color:#d6e6f7}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.chips span{border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px}
.change-variant-btn{margin-top:20px;font:700 13px var(--head);color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:8px 16px;cursor:pointer}
.change-variant-btn:hover{background:rgba(255,255,255,.22)}
.page{max-width:920px;margin:-64px auto 0;padding:0 20px 70px;position:relative}
.page>*+*,#fieldsContainer>*+*,#letterForm>*+*{margin-top:18px}
.view-fade{animation:rise .35s cubic-bezier(.16,1,.3,1) both}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.q.full{grid-column:1/-1}
.q-title{display:block;font-weight:700;font-size:14px;margin:0 0 6px}
.req{color:var(--danger);margin-left:2px}
.q-desc{font-size:13px;color:var(--muted);margin:-2px 0 8px}
.radio-list{display:flex;flex-direction:column;gap:10px}
.radio-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1.5px solid var(--bd);border-radius:12px;background:#fff;cursor:pointer;font-weight:600;transition:border-color .15s,background .15s}
.radio-row:hover{border-color:var(--blue)}
.radio-row:has(input:checked){border-color:var(--blue);background:#eaf2fc;box-shadow:inset 0 0 0 1px var(--blue)}
.radio-row input{width:19px;height:19px;margin:0;flex:none}
.other-input{display:none}.other-input.show{display:block}
.date-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
input[type=date]{width:auto;min-width:190px}
.date-preview{font-size:13px;color:var(--muted)}.date-preview strong{color:var(--blue)}
.money-input{display:flex;align-items:center;border:1.5px solid var(--bd);border-radius:10px;background:#fff;overflow:hidden}
.money-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,84,164,.14)}
.money-input span{color:var(--muted);font-size:15px;white-space:nowrap}
.money-input .prefix,.money-input>span:first-child{padding:0 4px 0 14px;font-weight:700}
.money-input .suffix{padding:0 14px 0 4px;font-size:13.5px}
.money-input input{border:0;box-shadow:none;border-radius:0;flex:1;min-width:0;padding:11px 6px}
.variant-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.variant-option{position:relative;text-align:left;font:inherit;background:#fff;border:1.5px solid var(--bd);border-left:6px solid var(--bd);border-radius:14px;padding:20px 52px 20px 20px;cursor:pointer;transition:all .18s}
.variant-option:hover{border-color:var(--blue);border-left-color:var(--lime);background:#f6faff;transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,84,164,.16)}
.v-title{margin:0 0 4px;font:800 17px var(--head);color:var(--blue)}.v-desc{margin:0;font-size:14px;color:var(--muted)}
.v-arrow{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:var(--lime);color:var(--navy);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800}
.progress-track{position:fixed;top:0;left:0;right:0;height:5px;background:rgba(0,59,122,.12);z-index:60}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--lime));transition:width .35s cubic-bezier(.16,1,.3,1)}
.error-banner{font-size:14px;color:#a52a1d;background:#fdeceb;border:1.5px solid #efc4bf;border-radius:12px;padding:12px 16px}
.submit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.btn-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.result-card{border-left:8px solid var(--lime);animation:rise .4s cubic-bezier(.16,1,.3,1) both}
.result-check{width:24px;height:24px;border-radius:50%;background:var(--lime);display:inline-flex;align-items:center;justify-content:center;margin-right:10px;flex:none}
.result-check svg{stroke-dasharray:20;stroke-dashoffset:20;animation:draw .4s .15s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.dl-btn{font:800 14px var(--head);text-decoration:none;border:0;cursor:pointer;color:#fff;background:var(--blue);border-radius:999px;padding:11px 24px;display:inline-block}
.dl-btn:hover{background:var(--blue-deep)}
.dl-btn.dl-alt{color:var(--blue);background:#fff;border:1.5px solid var(--bd2)}.dl-btn.dl-alt:hover{background:#f3f8fe;border-color:var(--blue)}
.site-foot{background:var(--navy);color:#b9cde4;padding:26px 20px;text-align:center;font-size:13px;border-top:4px solid var(--lime)}
@media(max-width:640px){.site-head img{height:48px}.site-head .label{display:none}.site-head .sep{display:none}.hero{padding:32px 16px 80px}.hero svg{width:220px;height:160px}.hero h1{font-size:28px}.hero p{font-size:15px}.page{margin:-48px 12px 0;padding:0 0 50px}.card{padding:20px;border-radius:16px}.grid2,.variant-options{grid-template-columns:1fr}.sec-head h2{font-size:17px}.num{width:30px;height:30px;font-size:14px}.submit-row .primary{width:100%;justify-content:center}}
/* ---------- panel admin ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{flex:0 0 240px;width:240px;background:var(--navy);color:#fff;display:none;flex-direction:column;border-right:4px solid var(--lime);position:sticky;top:0;height:100vh}
body.authed .sidebar{display:flex}
.sb-logo{background:#fff;padding:14px 20px;display:flex;align-items:center;gap:12px}
.sb-logo img{height:56px;width:auto;display:block}
.sb-logo span{font:800 12px/1.25 var(--head);color:var(--blue);text-transform:uppercase;letter-spacing:.04em}
.sb-nav{padding:18px 12px;display:flex;flex-direction:column;gap:6px}
.tab-btn{display:flex;align-items:center;gap:12px;text-align:left;font:700 14px var(--head);color:#c5d7ec;background:transparent;border:0;border-radius:10px;padding:12px 14px;cursor:pointer;transition:background .15s}
.tab-btn:hover{background:rgba(255,255,255,.09)}
.tab-btn.active{background:var(--lime);color:var(--navy)}
.tab-btn svg{flex:none}
.sb-foot{margin-top:auto;padding:16px 12px 20px;display:flex;flex-direction:column;gap:8px}
.sb-foot .admin-link-btn{font:700 13px 'Source Sans 3',sans-serif;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:9px;padding:9px 14px;text-decoration:none;text-align:center}
.sb-foot .admin-link-btn:hover{background:rgba(255,255,255,.1)}
.topbar-user{display:flex;flex-direction:column;gap:8px;padding:12px;background:rgba(255,255,255,.07);border-radius:10px}
.topbar-user .who{font-size:13px;color:#c5d7ec;word-break:break-all}.topbar-user .who b{color:#fff}
.role-pill{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff}
.role-pill.super_admin{background:var(--lime);color:var(--navy)}
.logout-btn{font:700 13px 'Source Sans 3',sans-serif;color:#c5d7ec;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:8px 14px;cursor:pointer}
.logout-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.stage{flex:1 1 0;min-width:0}
#content{max-width:1040px;margin:0 auto;padding:28px 32px 70px;transition:max-width .15s}
#content.wide{max-width:1320px}
.tab-panel{display:none}.tab-panel.active{display:block;animation:rise .3s ease both}
.page-head{margin-bottom:20px}.page-head h1{margin:0;font:800 26px var(--head);color:var(--blue)}.page-head p{margin:2px 0 0;color:var(--muted)}
.list-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.list-toolbar input[type=search]{flex:1;min-width:220px}
.db-filter{display:flex;align-items:center;gap:8px}.db-filter select{width:auto;padding:9px 12px}
.result-count{font-size:13px;color:var(--muted);white-space:nowrap}
#list,#adminsList{background:#fff;border-radius:14px;box-shadow:var(--sh-sm);overflow-x:auto;margin-top:16px}
#adminsList:empty{display:none}
#list table,#adminsList table{width:100%;border-collapse:collapse}
#list th,#adminsList th{background:var(--blue);color:#fff;text-align:left;padding:12px;font:700 12px var(--head);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
#list td,#adminsList td{padding:12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
#list td[style*=nowrap],#adminsList td[style*=nowrap]{white-space:normal!important}
#list tbody tr:nth-child(even),#adminsList tbody tr:nth-child(even){background:#f8fafd}
.empty{color:var(--muted);padding:44px 0;text-align:center}
.variant-pill{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:#e9f5c9;color:#3d5a00;white-space:nowrap}
.variant-pill.non_um{background:#fdf0d9;color:#8a5200}
.role-badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:#dcebfb;color:#0b4a8f}.role-badge.super_admin{background:#e9f5c9;color:#3d5a00}
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.pagination button{font:700 13px var(--head);color:var(--blue);background:#fff;border:1.5px solid var(--bd2);border-radius:999px;padding:8px 18px;cursor:pointer}
.pagination button:disabled{color:#9db0c6;cursor:not-allowed;border-color:var(--line)}
.pagination span{font-size:13.5px;color:var(--muted)}
.variant-switch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.variant-switch button{font:700 13.5px var(--head);color:var(--blue);background:#fff;border:1.5px solid var(--bd2);border-radius:999px;padding:9px 20px;cursor:pointer}
.variant-switch button.active{background:var(--blue);border-color:var(--blue);color:#fff}
.guide-box{background:#fff;border-radius:14px;box-shadow:var(--sh-sm);margin-bottom:24px;overflow:hidden}
.guide-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#eaf2fc;border:0;padding:14px 20px;font:800 14px var(--head);color:var(--blue);cursor:pointer;text-align:left}
.guide-chevron{font-size:12px;transition:transform .15s}
.guide-steps{padding:20px 22px 22px;display:flex;flex-direction:column;gap:16px}.guide-steps.collapsed{display:none}
.guide-step{display:flex;gap:14px}
.guide-step-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font:800 13px var(--head);display:flex;align-items:center;justify-content:center}
.guide-step-title{margin:0 0 3px;font-weight:700;font-size:14.5px}.guide-step-desc{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
code,.guide-step-desc code{background:#eaf2fc;color:var(--blue-deep);padding:1px 6px;border-radius:5px;font-size:.92em}
.guide-warn{background:#fdf0d9;border-radius:10px;padding:12px 14px;font-size:13.5px;color:#7a4a12;line-height:1.55}.guide-warn code{background:#fff}
.meta-line{font-size:14px;color:var(--muted);margin-bottom:20px}
.upload-box{border:2px dashed #8fb0d6;border-radius:14px;padding:32px;text-align:center;margin-bottom:20px;background:#f6faff;transition:all .15s}
.upload-box.dragover{border-color:var(--lime);background:#f4fae2}
.upload-box .upload-icon{font-size:30px;margin-bottom:8px}.upload-box p{margin:0 0 12px;color:var(--muted);font-size:14px}
.tag-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;padding:12px 14px;margin-bottom:8px;background:#fff;border-radius:12px;border:1.5px solid var(--line)}
.tag-row select{padding:8px 10px;font-size:14px}
.draggable-row{cursor:grab;transition:box-shadow .15s}.draggable-row:hover{box-shadow:var(--sh-sm);border-color:var(--bd2)}.draggable-row.dragging{opacity:.4}
.drag-handle{color:#8aa3c0;font-size:18px;cursor:grab;user-select:none}
.reorder-hint,.preview-hint{font-size:13px;color:var(--muted)}.reorder-hint{margin:-4px 0 12px}
.badge{white-space:nowrap;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;margin-left:8px}
.badge.ok{background:#e9f5c9;color:#3d5a00}.badge.warn{background:#fdf0d9;color:#8a5200}
.editor-layout{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:28px;align-items:start}.editor-layout>*{min-width:0}
.editor-layout .preview-wrap{position:sticky;top:16px}
.editor-layout #tagList .tag-row{grid-template-columns:minmax(0,1fr);gap:6px}.editor-layout #tagList code{overflow-wrap:anywhere}
.preview-wrap h3{font-size:15px;margin:0 0 8px;color:var(--blue)}
.preview-paper{background:#fff;border-radius:12px;box-shadow:var(--sh-sm);padding:26px 24px;font:12.5px/1.5 Georgia,'Times New Roman',serif;max-height:620px;overflow-y:auto}
.preview-paper.lp-inline{padding:12px;background:#e3ebf4;max-height:min(780px,calc(100vh - 150px))}
.preview-paper .prev-p{margin:0 0 8px}.preview-paper .ph{background:#e9f5c9;color:#3d5a00;padding:0 3px;border-radius:3px}.preview-paper .ph-missing{background:#fdeceb;color:var(--danger);padding:0 3px;border-radius:3px}
.prev-table{width:100%;border-collapse:collapse;margin:10px 0}.prev-table td{border:1px solid #ccc;padding:5px 7px;font-size:12px;vertical-align:top}
.preview-empty{color:var(--muted);font-size:14px;padding:20px 0;text-align:center}
.save-row{margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(11,42,74,.6);z-index:70;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:18px;border-top:8px solid var(--blue);max-width:640px;width:100%;padding:26px 28px 30px;box-shadow:0 20px 50px rgba(0,30,70,.35);animation:rise .3s ease both}
.modal-box h2{font:800 20px var(--head);color:var(--blue);margin:0 0 4px}.modal-sub{font-size:13.5px;color:var(--muted);margin:0 0 20px}
.modal-box .field{margin-bottom:14px}.modal-box .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-box label{display:block;font-weight:700;font-size:14px;margin-bottom:5px}
.modal-box .radio-inline{display:flex;gap:16px;padding-top:6px}.modal-box .radio-inline label{display:flex;align-items:center;gap:6px;margin:0;font-weight:400}
.modal-box .money-input span{padding:0 4px 0 14px}
.modal-actions{display:flex;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%)}
.auth-card{width:100%;max-width:400px;background:#fff;border-radius:18px;border-top:8px solid var(--lime);padding:28px 28px 26px;box-shadow:0 20px 50px rgba(0,30,70,.35);animation:rise .4s cubic-bezier(.16,1,.3,1) both}
.auth-logo{display:block;height:64px;width:auto;margin:0 auto 14px}
.auth-card h2{margin:0 0 4px;font:800 21px var(--head);color:var(--blue);text-align:center}
.auth-sub{margin:0 0 20px;font-size:14px;color:var(--muted);text-align:center}
.auth-card .field{margin-bottom:14px}.auth-card .field label{display:block;font-weight:700;font-size:14px;margin-bottom:5px}
.auth-card button.primary{width:100%;justify-content:center;margin-top:4px}
.auth-error{background:#fdeceb;color:#a52a1d;font-size:13.5px;padding:10px 12px;border-radius:10px;margin-bottom:14px;display:none}.auth-error.show{display:block}
.auth-hint{font-size:12.5px;color:var(--muted);margin-top:16px;text-align:center}
@media(max-width:1000px){.editor-layout{grid-template-columns:minmax(0,1fr)}.editor-layout .preview-wrap{position:static}}
@media(max-width:860px){.shell{flex-direction:column}.sidebar,body.authed .sidebar{width:auto;height:auto;position:static;flex:none;border-right:0;border-bottom:4px solid var(--lime);flex-direction:row;flex-wrap:wrap;align-items:center}
.sb-logo{padding:8px 14px}.sb-logo img{height:40px}.sb-nav{flex-direction:row;overflow-x:auto;padding:8px;flex:1}.tab-btn{white-space:nowrap;padding:10px 12px}.sb-foot{flex-direction:row;margin:0;padding:8px 12px;width:100%;align-items:center}.topbar-user{flex-direction:row;align-items:center;flex:1;padding:6px 10px}
#content{padding:20px 16px 60px}.modal-box .row2{grid-template-columns:1fr}}
/* sejajarkan kotak isian dalam satu baris walau ada teks "Contoh:" */
.q{display:flex;flex-direction:column}
.q>input,.q>select,.q>textarea,.q>.money-input,.q>.date-row,.q>.radio-list{margin-top:auto}