:root{
  --hijau-donker:#0d3b2e;
  --hijau-donker2:#0a2e24;
  --tosca:#1fa89a;
  --tosca-muda:#5fd0c1;
  --putih:#ffffff;
  --abu:#f2f6f5;
  --abu-teks:#5c6b68;
  --border:#e5eceb;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI',Arial,sans-serif;
  background:var(--abu);
  display:flex;
  justify-content:center;
}
.app{
  width:100%;
  max-width:420px;
  min-height:100vh;
  background:var(--putih);
  position:relative;
  padding-bottom:100px;
}

/* ===== HEADER BESAR (portal home) ===== */
header.hero{
  background:linear-gradient(135deg,var(--hijau-donker) 0%,var(--hijau-donker2) 100%);
  color:var(--putih);
  padding:22px 20px 26px;
  border-radius:0 0 24px 24px;
}
header.hero .brand{ display:flex; align-items:center; gap:12px; }
header.hero .brand-icon{
  width:46px; height:46px; border-radius:12px;
  background:var(--tosca);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
header.hero .brand-text h1{ font-size:19px; font-weight:700; letter-spacing:0.5px; }
header.hero .brand-text p{ font-size:11px; opacity:0.8; margin-top:2px; }
header.hero .greeting{ margin-top:18px; font-size:13px; opacity:0.9; }
header.hero .greeting b{ font-size:15px; display:block; margin-top:2px; }

/* ===== HEADER KECIL (halaman sub) ===== */
header.sub{
  background:linear-gradient(135deg,var(--hijau-donker) 0%,var(--hijau-donker2) 100%);
  color:var(--putih);
  padding:18px 20px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:0 0 20px 20px;
}
header.sub a{
  color:var(--putih);
  text-decoration:none;
  font-size:20px;
  width:34px; height:34px;
  border-radius:10px;
  background:rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
header.sub .title{ font-size:15.5px; font-weight:700; line-height:1.3; }
header.sub .sub-text{ font-size:11px; opacity:0.8; margin-top:2px; }

/* ===== BANNER (portal home) ===== */
.banner{
  margin:-18px 16px 0;
  background:linear-gradient(120deg,var(--tosca) 0%,var(--tosca-muda) 100%);
  border-radius:18px;
  padding:16px;
  display:flex;
  gap:10px;
  box-shadow:0 8px 20px rgba(31,168,154,0.35);
  position:relative;
  z-index:2;
}
.banner-btn{
  flex:1;
  background:rgba(255,255,255,0.95);
  border-radius:14px;
  padding:14px 10px;
  text-align:center;
  text-decoration:none;
  color:var(--hijau-donker);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.banner-btn .ic{ font-size:24px; }
.banner-btn .lbl{ font-size:12.5px; font-weight:600; }
.banner-btn .sub{ font-size:10px; color:var(--abu-teks); }

.section{ padding:24px 18px 0; }
.section-title{ font-size:14px; font-weight:700; color:var(--hijau-donker); margin-bottom:12px; }

.menu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.menu-item{
  background:var(--abu);
  border-radius:14px;
  padding:14px 6px;
  text-align:center;
  text-decoration:none;
  color:var(--hijau-donker);
}
.menu-item .ic{
  width:38px; height:38px; margin:0 auto 6px;
  border-radius:10px; background:var(--putih);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; box-shadow:0 2px 6px rgba(0,0,0,0.06);
}
.menu-item .lbl{ font-size:10.5px; font-weight:600; line-height:1.3; }

.info-card{
  margin-top:20px;
  background:var(--abu);
  border-radius:14px;
  padding:14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.info-card .ic{
  width:34px; height:34px; border-radius:9px;
  background:var(--hijau-donker); color:var(--putih);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:16px;
}
.info-card .txt h3{ font-size:12.5px; color:var(--hijau-donker); margin-bottom:2px; }
.info-card .txt p{ font-size:11px; color:var(--abu-teks); line-height:1.4; }

/* ===== SEARCH & TAB (download) ===== */
.search-bar{
  margin:16px 16px 0;
  background:var(--abu);
  border-radius:12px;
  padding:10px 14px;
  display:flex; align-items:center; gap:8px;
}
.search-bar input{ border:none; background:transparent; outline:none; font-size:13px; flex:1; color:#333; }

.tab-row{ display:flex; gap:8px; padding:16px 16px 0; overflow-x:auto; }
.tab{ padding:7px 14px; border-radius:20px; background:var(--abu); color:var(--abu-teks); font-size:11.5px; font-weight:600; white-space:nowrap; }
.tab.active{ background:var(--tosca); color:var(--putih); }

.list{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.form-card{
  background:var(--putih);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  display:flex;
  gap:12px;
  align-items:center;
  box-shadow:0 2px 8px rgba(13,59,46,0.05);
}
.form-card .ic{
  width:42px; height:42px; border-radius:10px;
  background:#e8f6f3; color:var(--tosca);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.form-card .info{ flex:1; min-width:0; }
.form-card .info h3{ font-size:12.5px; color:var(--hijau-donker); font-weight:700; line-height:1.3; margin-bottom:3px; }
.form-card .info p{ font-size:10.5px; color:var(--abu-teks); }
.form-card .meta{ font-size:9.5px; color:#9aa6a3; margin-top:4px; }
.dl-btn{
  width:36px; height:36px; border-radius:10px;
  background:var(--hijau-donker); color:var(--putih);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0; text-decoration:none;
}
.form-card.stacked{ flex-direction:column; align-items:stretch; }
.form-card.stacked .top-row{ display:flex; gap:12px; align-items:center; }
.form-card.stacked .actions{ display:flex; gap:8px; margin-top:12px; }
.form-card.stacked .actions a{
  flex:1; text-align:center; padding:9px 0; border-radius:10px;
  font-size:11px; font-weight:700; text-decoration:none;
}
.form-card.stacked .actions .isi-online{ background:var(--tosca); color:var(--putih); }
.form-card.stacked .actions .dl-plain{ background:var(--abu); color:var(--hijau-donker); }

/* ===== FORM (upload / isi formulir) ===== */
form.page-form{ padding:16px 16px 0; }
.rahasia-note{
  background:#fff7e6; border:1px solid #ffe4a3; border-radius:10px;
  padding:10px 12px; font-size:10.5px; color:#8a6d1f; margin-bottom:14px;
  display:flex; gap:8px; align-items:flex-start;
}
.group-title{
  font-size:12px; font-weight:700; color:var(--tosca);
  text-transform:uppercase; letter-spacing:0.3px;
  margin:18px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border);
}
.group-title:first-child{ margin-top:2px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:11.5px; font-weight:700; color:var(--hijau-donker); margin-bottom:6px; }
.field .hint-small{ font-size:9.5px; color:var(--abu-teks); font-weight:400; margin-top:2px; }
.field input[type="text"], .field input[type="date"], .field input[type="time"], .field textarea, .field select{
  width:100%; border:1px solid var(--border); background:var(--abu);
  border-radius:10px; padding:11px 12px; font-size:12.5px; color:#333; outline:none; font-family:inherit;
}
.field textarea{ resize:none; height:70px; }
.row2{ display:flex; gap:10px; }
.row2 .field{ flex:1; }

.opt-list{ display:flex; flex-direction:column; gap:8px; }
.opt-item{ display:flex; align-items:flex-start; gap:8px; background:var(--abu); border-radius:10px; padding:10px 12px; }
.opt-item input[type="radio"]{ margin-top:2px; accent-color:var(--tosca); flex-shrink:0; }
.opt-item label{ font-size:11.5px; color:#333; line-height:1.4; }
.opt-item.lain{ flex-direction:column; }
.opt-item.lain .lain-row{ display:flex; align-items:center; gap:8px; width:100%; }
.opt-item.lain input[type="text"]{ flex:1; margin-top:6px; border:1px solid var(--border); background:var(--putih); border-radius:8px; padding:8px 10px; font-size:11.5px; outline:none; }

.upload-box{ border:2px dashed var(--tosca-muda); background:#f5fcfb; border-radius:14px; padding:26px 16px; text-align:center; }
.upload-box .ic{ font-size:30px; margin-bottom:8px; }
.upload-box .txt{ font-size:12px; color:var(--hijau-donker); font-weight:600; }
.upload-box .hint{ font-size:10.5px; color:var(--abu-teks); margin-top:4px; }
.upload-box .browse-btn{ display:inline-block; margin-top:12px; background:var(--tosca); color:var(--putih); font-size:11.5px; font-weight:700; padding:9px 20px; border-radius:20px; }

.file-item{ margin-top:12px; background:var(--abu); border-radius:10px; padding:10px 12px; display:flex; align-items:center; gap:10px; }
.file-item .ic{ width:32px; height:32px; border-radius:8px; background:#e8f6f3; color:var(--tosca); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.file-item .info{ flex:1; min-width:0; }
.file-item .info .name{ font-size:11.5px; font-weight:600; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-item .info .size{ font-size:10px; color:var(--abu-teks); }
.file-item .remove{ color:#d9534f; font-size:16px; }

.submit-btn{
  width:100%; margin-top:20px;
  background:linear-gradient(120deg,var(--hijau-donker) 0%,var(--hijau-donker2) 100%);
  color:var(--putih); border:none; border-radius:12px; padding:14px;
  font-size:13.5px; font-weight:700;
}
.note-bottom{ margin:12px 0 20px; font-size:10.5px; color:var(--abu-teks); text-align:center; line-height:1.5; }

/* ===== BOTTOM NAV ===== */
nav.bottom{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:420px; background:var(--putih);
  display:flex; justify-content:space-around;
  padding:10px 0 12px; border-top:1px solid var(--border);
}
nav.bottom a{
  text-decoration:none; color:var(--abu-teks); font-size:10.5px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
nav.bottom a.active{ color:var(--tosca); font-weight:700; }
nav.bottom .ic{ font-size:18px; }
nav.bottom .nav-fab{
  width:58px; height:58px; margin-top:-14px; border-radius:50%;
  background:var(--tosca); color:var(--putih); font-size:34px; justify-content:center;
}
nav.bottom .nav-fab.active{ color:var(--putih); }

/* ===== LOGIN ===== */
.login-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:32px 24px; text-align:center; }
.login-wrap .brand-icon{
  width:64px; height:64px; border-radius:16px; background:var(--tosca);
  display:flex; align-items:center; justify-content:center; font-size:30px;
  margin:0 auto 14px; box-shadow:0 8px 18px rgba(31,168,154,0.35);
}
.login-wrap h1{ color:var(--hijau-donker); font-size:20px; font-weight:700; }
.login-wrap p.tagline{ color:var(--abu-teks); font-size:12px; margin-top:4px; margin-bottom:34px; }
.google-btn{
  width:100%; max-width:320px; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--putih); border:1px solid var(--border); border-radius:12px;
  padding:13px 16px; font-size:13.5px; font-weight:600; color:#333;
  text-decoration:none; box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
.google-btn img{ width:18px; height:18px; }
.login-note{ margin-top:18px; font-size:10.5px; color:var(--abu-teks); max-width:300px; }
.login-footer{ position:absolute; bottom:20px; font-size:10px; color:#9aa6a3; }

/* ===== CETAK (isi formulir etik) ===== */
#print-area{ display:none; }
@media print{
  body{ background:#fff; }
  .app > header, .app > form, nav.bottom{ display:none !important; }
  #print-area{ display:block !important; width:100%; max-width:none; padding:18mm 16mm; font-family:Arial,Helvetica,sans-serif; color:#000; }
  .app{ max-width:none; padding-bottom:0; }
  .pf-title{ text-align:center; font-weight:700; font-size:14px; margin-bottom:2px; }
  .pf-sub{ text-align:center; font-weight:700; font-size:13px; margin-bottom:18px; }
  .pf-section{ font-size:12px; font-weight:700; margin:16px 0 8px; }
  .pf-line{ font-size:12px; margin:8px 0; display:flex; gap:4px; }
  .pf-line .lbl{ min-width:150px; }
  .pf-line .val{ flex:1; border-bottom:1px solid #000; padding-bottom:2px; }
  .pf-desc{ font-size:12px; border:1px solid #999; padding:8px; min-height:70px; white-space:pre-wrap; margin-top:4px; }
  .pf-check{ font-size:12px; margin:6px 0; }
  .pf-sign{ margin-top:40px; text-align:right; font-size:12px; }
  .pf-sign .nm{ margin-top:60px; font-weight:700; }
  .pf-komite{ margin-top:30px; border-top:1px dashed #999; padding-top:14px; font-size:12px; }
  .pf-komite .pf-section{ margin-top:0; }
}