.ci-panel {
    background: #f8fbff;
    border: 1px solid #e0ecff;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    height: 100%;
  }

  .ci-panel-header {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: #6c7a91;
    margin-bottom: 0.75rem;
  }

  .ci-steps {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .ci-step {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.35rem 0;
  }

  .ci-icon {
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.2s ease;
  }

  .ci-step-waiting .ci-icon {
    background: #eef3fb;
    color: #91a5c6;
  }

  .ci-step-ready .ci-icon {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
  }

  .ci-step-loading .ci-icon {
    background: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
  }

  .ci-step-done .ci-icon {
    background: rgba(25, 135, 84, 0.15);
    color: #198754;
  }

  .ci-step-error .ci-icon {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
  }

  .ci-step-title {
    font-weight: 600;
    color: #1b2845;
    margin-bottom: 0.1rem;
  }

  .ci-step-desc {
    font-size: 0.85rem;
    color: #6c7a91;
  }

  .ci-dropzone-wrapper {
    border: 1px dashed #c2d6ff;
    border-radius: 1rem;
    padding: 1.25rem;
    background: #fdfefe;
    min-height: 260px;
  }

  .ci-file-meta {
    border-radius: 0.75rem;
    border: 1px solid #eef3fb;
    background: #ffffff;
  }

  .ci-file-icon {
    width: 56px;
    height: 56px;
    border-radius: 0.75rem;
    background: #eef3fb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #0d6efd;
  }

  .ci-helper-badge {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }

  .ci-status-label {
    font-size: 0.85rem;
    color: #6c7a91;
    margin-top: 0.15rem;
  }

  .ci-output-box {
    border: 1px solid #e0ecff;
    border-radius: 1rem;
    padding: 1.5rem;
    background: #ffffff;
    box-shadow: 0 4px 25px rgba(19, 21, 75, 0.04);
  }

  .ci-output-box .badge {
    letter-spacing: 0.08em;
  }

  .ci-textarea {
    resize: none;
    min-height: 50px;
    font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, monospace);
    background: #f7f9fc;
    border-color: #e0ecff;
  }

  .ci-textarea:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
  }

  .ci-output-actions button {
    white-space: nowrap;
  }

  .ci-ai-wrapper {
    border-top: 1px solid #eef3fb;
  }


  .ci-summary-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
  }

  .ci-summary-card {
    border-radius: 0.85rem;
    border: 1px solid #e0ecff;
    background: linear-gradient(135deg, #fdfbff, #f2f7ff);
    padding: 0.85rem 1rem;
    box-shadow: 0 8px 18px rgba(13, 110, 253, 0.08);
  }

  .ci-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6c7a91;
    margin-bottom: 0.35rem;
  }

  .ci-summary-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: #111346;
  }