/* MISC */
    .btn-sm {
      padding: 5px 12px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-dim);
      font-size: 11px;
      cursor: pointer;
      font-family: var(--sans);
      font-weight: 600;
      transition: all 0.2s
    }

    .btn-sm:hover {
      border-color: var(--cyan);
      color: var(--cyan);
      background: rgba(30, 77, 140, 0.05)
    }

    .btn-sm.danger:hover {
      border-color: var(--red);
      color: var(--red)
    }

    .btn-sm.primary {
      background: rgba(30, 77, 140, 0.08);
      border-color: rgba(30, 77, 140, 0.3);
      color: var(--cyan)
    }

    .sec-title {
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--navy)
    }

    .section-sep {
      font-size: 10px;
      font-family: var(--sans);
      letter-spacing: 1px;
      color: var(--text-muted);
      font-weight: 700;
      text-transform: uppercase;
      margin: 16px 0 8px;
      padding-top: 16px;
      border-top: 1px solid var(--border)
    }

    .officer-details-row {
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px
    }

    .officer-details-row:last-child {
      border-bottom: none
    }

    .export-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px
    }

    .export-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 22px;
      position: relative;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05)
    }

    .export-card:hover {
      border-color: var(--cyan);
      box-shadow: 0 4px 16px rgba(30, 77, 140, 0.12);
      transform: translateY(-2px)
    }

    .export-card.is-processing {
      opacity: 0.72;
      pointer-events: none;
      transform: none;
      box-shadow: 0 6px 18px rgba(15, 35, 70, 0.08)
    }

    .export-card.is-processing::after {
      content: attr(data-processing-status);
      position: absolute;
      top: 14px;
      right: 14px;
      display: inline-flex;
      align-items: center;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(12, 59, 114, 0.96);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.4px;
      box-shadow: 0 6px 18px rgba(12, 59, 114, 0.26)
    }

    .btn-sm[aria-busy="true"],
    .btn-submit[aria-busy="true"] {
      pointer-events: none
    }

    .export-icon {
      width: 28px;
      height: 28px;
      margin: 0 auto 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--navy)
    }

    .export-icon svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .export-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 3px;
      color: var(--navy)
    }

    .export-desc {
      font-size: 11px;
      color: var(--text-dim)
    }

    .riwayat-toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap
    }

    .riwayat-toolbar .form-select {
      width: auto;
      min-width: 112px;
      font-size: 12px;
      padding: 6px 34px 6px 10px
    }

    .letterhead-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px
    }

    .letterhead-grid .full {
      grid-column: 1 / -1
    }

    .report-kop-surat {
      position: relative;
      display: flex;
      align-items: center;
      gap: 14pt;
      border-bottom: 2.5pt solid #000;
      padding: 0 6pt 8pt 2pt;
      margin-bottom: 12pt;
      min-height: 84px;
      font-family: 'Times New Roman', serif;
      color: #000
    }

    .report-kop-logo {
      width: 74px;
      height: 74px;
      object-fit: contain;
      flex-shrink: 0;
      position: static;
      margin-top: 0
    }

    .report-kop-text {
      flex: 1;
      width: auto;
      padding-left: 0;
      line-height: 1.1;
      text-align: center;
      padding-right: 74px
    }

    .report-kop-line-normal {
      font-size: 9.75pt;
      font-weight: normal;
      text-transform: uppercase
    }

    .report-kop-line-bold {
      font-size: 11.75pt;
      font-weight: bold;
      margin-top: 2pt;
      text-transform: uppercase
    }

    .report-kop-address {
      font-size: 8.75pt;
      font-weight: normal;
      margin-top: 3pt;
      line-height: 1.25
    }

    .report-kop-city {
      font-size: 9.75pt;
      font-weight: normal;
      letter-spacing: 4pt;
      margin-top: 4pt;
      position: relative
    }

    .report-kop-kodepos {
      position: absolute;
      right: 4pt;
      bottom: 10pt;
      font-size: 8.75pt;
      font-family: 'Times New Roman', serif;
      letter-spacing: normal
    }

    .report-filter-bar {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 14px
    }

    .penugasan-toolbar {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 14px
    }

    .penugasan-toolbar-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      flex: 1 1 320px
    }

    .penugasan-toolbar-actions .btn-sm {
      padding: 7px 14px
    }

    .penugasan-toolbar-filters {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 8px;
      flex: 1 1 560px;
      min-width: min(100%, 560px);
      margin-left: auto
    }

    .penugasan-toolbar-filters .form-select {
      width: 100%;
      min-width: 0;
      font-size: 12px
    }

    .report-filter-bar .form-select {
      min-width: 118px;
      font-size: 12px;
      padding-right: 38px
    }

    .report-filter-bar .form-input {
      min-width: 168px;
      font-size: 12px;
      padding: 7px 10px;
      width: auto
    }

    .report-filter-bar .btn-sm {
      min-height: 36px
    }

.report-preview {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-dim);
  text-align: justify
}

.report-preview p {
  margin-bottom: 10px;
  text-align: justify
}

    .report-highlight {
      background: rgba(30, 77, 140, 0.05);
      border: 1px solid rgba(30, 77, 140, 0.15);
      border-radius: 8px;
      padding: 12px 14px;
      color: var(--text)
    }

    .report-list {
      margin-left: 18px
    }

    .report-list li {
      margin-bottom: 6px
    }

    .rank-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border)
    }

    .rank-item:last-child {
      border-bottom: none
    }

    .rank-n {
      font-family: var(--mono);
      font-size: 17px;
      font-weight: 800;
      width: 26px;
      text-align: center
    }

    .r1 {
      color: #b8860b
    }

    .r2 {
      color: #6b7280
    }

    .r3 {
      color: #92400e
    }

    .rank-info {
      flex: 1
    }

    .rank-name {
      font-size: 13px;
      font-weight: 600
    }

    .rank-meta {
      font-size: 10px;
      color: var(--text-dim);
      font-family: var(--mono)
    }

    .rank-score {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--green)
    }

    input[type=file] {
      display: none
    }