body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;background:#f5f7fb;color:#1f2937;font-size:14px}.card{border:0;border-radius:18px;box-shadow:0 8px 30px rgba(15,23,42,.07)}.btn{border-radius:12px}.table{font-size:13px}.badge{border-radius:999px}.form-control,.form-select{border-radius:12px}.section-title{font-weight:800;letter-spacing:-.02em}.small-muted{font-size:12px;color:#6b7280}.kke-summary-cell{max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.question-card{border:1px solid #e5e7eb;border-radius:16px;padding:16px;background:#fff;margin-bottom:14px}.aoi-box{display:none;background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;padding:14px;margin-top:12px}.aoi-box.show{display:block}.metric{border-radius:16px;background:#fff;padding:18px;box-shadow:0 8px 30px rgba(15,23,42,.06)}.metric .num{font-size:26px;font-weight:800}.sidebar-card{position:sticky;top:16px}.import-panel{border-left:4px solid #2563eb;background:#f8fbff}.import-panel h5{font-size:1rem;font-weight:700}.table-sm td,.table-sm th{font-size:.82rem;vertical-align:top}.alert-info{background:#eef6ff;border-color:#cfe6ff;color:#17406c}
/* v26.1.1 UX polish */
.table-hint{font-size:12px;color:#475569;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:10px 12px}.table-scroll{overflow:auto;position:relative}.scroll-top{height:16px;overflow-x:auto;overflow-y:hidden;margin-bottom:6px;border-radius:10px}.scroll-top>div{height:1px}.kke-table th,.kke-table td,.preview-table th,.preview-table td{vertical-align:top}.sticky-action{position:sticky;right:0;z-index:3;box-shadow:-8px 0 14px rgba(15,23,42,.06);min-width:155px}.sticky-left{position:sticky;left:0;z-index:3;box-shadow:8px 0 14px rgba(15,23,42,.05);min-width:85px}.preview-input{min-width:210px;font-size:12px}.score-aspect small{color:#475569}.score-aspect b{color:#111827}.kke-summary-cell{max-width:320px;min-width:180px}.table-responsive::-webkit-scrollbar,.scroll-top::-webkit-scrollbar{height:12px}.table-responsive::-webkit-scrollbar-thumb,.scroll-top::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:999px}.table-responsive::-webkit-scrollbar-track,.scroll-top::-webkit-scrollbar-track{background:#e2e8f0;border-radius:999px}
/* v26.4 review workflow polish */
.review-actions form{display:inline-block}.navbar-brand{letter-spacing:-.01em}.badge.bg-info{color:#073b4c}.badge.bg-warning{color:#3b2f00}.alert-warning.small{font-size:12px}.locked-overlay{opacity:.78}.form-locked-note{border-left:4px solid #f59e0b}
/* v27.1 KKLEAD II polish */
.metric-mini .num{font-size:22px}.score-line{border-left:3px solid #e2e8f0;padding-left:10px}.kk-table small{font-size:11px}.border{border:1px solid #e5e7eb!important}

/* ============================================================
 * v28_c8 MOBILE POLISH — Universal responsive improvements
 * Bekerja di atas Bootstrap 5.3 grid, additive only.
 * ============================================================ */

/* === GENERAL MOBILE (≤ 768px) === */
@media (max-width: 768px) {
  body { font-size: 13.5px; }
  .section-title { font-size: 1.35rem !important; line-height: 1.25; }
  h2.section-title { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
  h4, h5 { font-size: 1rem !important; }

  /* Touch-friendly: button minimum 40px */
  .btn, .form-control, .form-select { min-height: 40px; padding: 8px 12px; font-size: 14px; }
  .btn-sm { min-height: 34px; font-size: 12.5px; padding: 6px 10px; }
  .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info,
  .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
  .btn-opd-primary, .btn-opd-outline,
  .btn-dash-primary, .btn-dash-outline, .btn-dash-success, .btn-dash-outline-success,
  .btn-dash-soft, .btn-dash-danger { min-height: 42px; font-weight: 500; }

  /* Card padding lebih ringan */
  .card { border-radius: 12px !important; }
  .card.p-4 { padding: 1rem !important; }
  .card.p-3 { padding: 0.85rem !important; }

  /* Metric & big number */
  .metric { padding: 14px; }
  .metric .num { font-size: 20px !important; }
  .opd-big { font-size: 15px !important; }

  /* Spacing antar element lebih compact */
  .row.g-3 { --bs-gutter-x: 0.65rem; --bs-gutter-y: 0.65rem; }
  .mb-3 { margin-bottom: 0.85rem !important; }
  .mb-4 { margin-bottom: 1.1rem !important; }

  /* Table mobile-friendly */
  .table { font-size: 12px !important; }
  .table-sm { font-size: 11.5px !important; }
  .table th, .table td { padding: 0.45rem 0.5rem !important; }
  .table-responsive { 
    border: 1px solid #e2e8f0; 
    border-radius: 10px; 
    position: relative;
  }
  /* Hint scroll horizontal di mobile */
  .table-responsive::after {
    content: '⇆ Geser';
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 9px;
    color: #94a3b8;
    background: rgba(255,255,255,0.9);
    padding: 2px 6px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0.8;
  }

  /* Sticky column smaller padding di mobile */
  .sticky-left { min-width: 60px !important; font-size: 11px; }
  .sticky-action { min-width: 90px !important; }

  /* Form inputs lebih nyaman */
  .form-label { font-size: 13px; margin-bottom: 4px; font-weight: 500; }
  textarea.form-control { min-height: 70px; }
  .form-check-label { font-size: 13px; }

  /* Modal full-width di mobile */
  .modal-dialog { margin: 0.5rem !important; }
  .modal-content { border-radius: 12px; }

  /* Alert spacing */
  .alert { padding: 0.7rem 0.85rem; font-size: 13px; }
  .alert.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

  /* Badge readable */
  .badge { font-size: 11px; padding: 4px 8px; }

  /* === NAVBAR MOBILE === */
  .navbar-brand { font-size: 14.5px !important; }
  .navbar-collapse {
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 10px;
  }
  .navbar-nav .nav-item { margin-bottom: 4px; }
  .navbar-nav .nav-link {
    padding: 10px 14px !important;
    border-radius: 8px;
    font-size: 14px;
  }
  .navbar-nav .nav-link:hover, .navbar-nav .dropdown-toggle:hover {
    background: rgba(255,255,255,0.08);
  }
  .navbar-text {
    display: block;
    font-size: 12px;
    margin: 10px 0 8px !important;
    padding: 8px 14px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    text-align: center;
  }
  .navbar .btn-outline-light {
    width: 100%;
    margin-bottom: 6px;
  }
  .dropdown-menu {
    width: 100%;
    border: none;
    background: rgba(255,255,255,0.05);
    box-shadow: none;
  }
  .dropdown-item {
    color: #fff !important;
    padding: 10px 14px;
    font-size: 13.5px;
  }
  .dropdown-item:hover {
    background: rgba(255,255,255,0.08) !important;
  }

  /* === FLOW STEPS RESPONSIVE === */
  .opd-flow-v2 {
    flex-direction: column;
    align-items: stretch !important;
  }
  .opd-flow-step {
    width: 100%;
    justify-content: flex-start;
  }
  .opd-flow-arrow-v2 {
    transform: rotate(90deg);
    align-self: center;
    margin: -2px 0;
  }

  /* === KKE LIST CARDS === */
  .kke-item { padding: 12px !important; }
  .kke-item-title { font-size: 14px; }
  .kke-item-sub { font-size: 11.5px; }

  /* === HELP PAGE SVG === */
  svg { max-width: 100%; height: auto; }

  /* === FOOTER === */
  main.container-fluid { padding: 14px 10px !important; }
}

/* === EXTRA SMALL MOBILE (≤ 480px) === */
@media (max-width: 480px) {
  body { font-size: 13px; }
  .section-title { font-size: 1.15rem !important; }
  .card.p-3, .card.p-4 { padding: 0.75rem !important; }
  .metric .num { font-size: 18px !important; }
  .opd-big { font-size: 14px !important; }
  .table { font-size: 11px !important; }
  .badge { font-size: 10px; }
  /* Hide certain decorative elements untuk save space */
  .opd-flow-text small { display: none; }
}

/* === TABLET (769-1024px) — minor tweaks === */
@media (min-width: 769px) and (max-width: 1024px) {
  .table { font-size: 12.5px; }
  .navbar-brand { font-size: 16px; }
}

/* === GENERAL POLISH (semua ukuran) === */
/* Smooth scroll untuk anchor links */
html { scroll-behavior: smooth; }
/* Better tap highlight di mobile */
a, button, .btn { -webkit-tap-highlight-color: rgba(26,86,219,0.1); }
/* Form focus state */
.form-control:focus, .form-select:focus, .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(26,86,219,0.15);
}
/* Accordion responsiveness */
.accordion-button { font-size: 13.5px; }
@media (max-width: 768px) {
  .accordion-button { font-size: 12.5px; padding: 0.7rem 0.85rem; }
}