#offline-banner.show {
      display: flex
    }

    #offline-queue-count {
      font-weight: 700
    }

    /* ── PROGRESS BAR ── */
    .progress-bar {
      height: 8px;
      background: var(--surface2);
      border-radius: 999px;
      overflow: hidden;
      margin-top: 6px
    }

    .progress-fill {
      height: 100%;
      border-radius: 999px;
      background: var(--navy);
      transition: width .3s
    }

    /* ── GPS INDICATOR ── */
    .gps-status {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: var(--r);
      border: 1px solid var(--border);
      background: var(--surface2);
      font-size: 12px;
      color: var(--text-dim);
      margin-bottom: 14px;
      flex-wrap: wrap
    }

    .gps-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--text-muted);
      flex-shrink: 0
    }

    .gps-dot.active {
      background: var(--green);
      animation: pulse 1.5s infinite
    }

    .gps-dot.error {
      background: var(--red)
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }

    /* ── PHOTO PREVIEW ── */
    .photo-preview {
      width: 100%;
      max-height: 200px;
      object-fit: cover;
      border-radius: var(--r);
      margin-top: 8px;
      display: none;
      cursor: pointer
    }

    .photo-preview.show {
      display: block
    }

    /* ── EMPTY STATE ── */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-muted)
    }

    .empty-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      border: 2px dashed var(--border2);
      background: var(--surface2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      opacity: .5;
      position: relative
    }

    .empty-icon::before {
      content: '';
      width: 20px;
      height: 24px;
      border: 2px solid var(--border2);
      border-radius: 3px;
      background: transparent
    }

    .empty-icon::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 2px;
      background: var(--border2);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 -5px 0 var(--border2), 0 5px 0 var(--border2)
    }

    /* ── NOTE BOXES ── */
    .note-warning {
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-left: 4px solid var(--amber);
      border-radius: var(--r);
      padding: 10px 14px;
      font-size: 13px;
      color: #92400e;
      margin-bottom: 14px;
      line-height: 1.55
    }

    .note-danger {
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-left: 4px solid var(--red);
      border-radius: var(--r);
      padding: 10px 14px;
      font-size: 13px;
      color: #991b1b;
      margin-bottom: 14px;
      line-height: 1.55
    }

    .note-info {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-left: 4px solid var(--blue);
      border-radius: var(--r);
      padding: 10px 14px;
      font-size: 13px;
      color: #1e3a8a;
      margin-bottom: 14px;
      line-height: 1.55
    }

    .note-success {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-left: 4px solid var(--green);
      border-radius: var(--r);
      padding: 10px 14px;
      font-size: 13px;
      color: #14532d;
      margin-bottom: 14px;
      line-height: 1.55
    }

    .empty-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-dim);
      margin-bottom: 6px
    }

    .empty-sub {
      font-size: 12px
    }

    /* ── DASHBOARD PIPELINE ── */
    .pipeline {
      display: flex;
      gap: 0;
      overflow: hidden;
      border-radius: var(--r);
      border: 1px solid var(--border)
    }

    .dashboard-panels {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 16px
    }

    .pipeline-step {
      flex: 1;
      padding: 12px 8px;
      text-align: center;
      border-right: 1px solid var(--border);
      cursor: default;
      transition: opacity .15s
    }

    .pipeline-step:last-child {
      border-right: none
    }

    .pipeline-num {
      font-size: 22px;
      font-weight: 800;
      font-family: var(--mono);
      line-height: 1
    }

    .pipeline-lbl {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-top: 4px;
      white-space: nowrap
    }

    .pipe-pending {
      background: #f9fafb;
      color: #6b7280
    }

    .pipe-didata {
      background: #eff6ff;
      color: #2563eb
    }

    .pipe-sp1 {
      background: #fffbeb;
      color: #d97706
    }

    .pipe-sp2 {
      background: #fff7ed;
      color: #ea580c
    }

    .pipe-sp3 {
      background: #fef2f2;
      color: #dc2626
    }

    .pipe-tertib {
      background: #f0fdf4;
      color: #16a34a
    }

    .pipe-eskalasi {
      background: #eff6ff;
      color: #1d4ed8
    }

    .pipe-validasi {
      background: #f5f3ff;
      color: #7c3aed
    }

    /* ── IMPORT CSV ── */
    .csv-textarea {
      font-family: var(--mono);
      font-size: 12px;
      width: 100%;
      min-height: 160px;
      background: var(--surface2)
    }