/* ==================== WORKFLOW BUILDER ==================== */
    .workflow-card {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .workflow-body {
      flex: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .workflow-step {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      background: var(--secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }

    .workflow-step:hover {
      border-color: var(--primary);
      background: var(--card-hover);
    }

    .workflow-step.active {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(34, 211, 187, 0.1);
    }

    .step-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .step-icon img {
      width: 28px;
      height: 28px;
      border-radius: 6px;
    }

    .step-content {
      flex: 1;
      min-width: 0;
    }

    .step-type {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--primary);
      margin-bottom: 2px;
    }

    .step-name {
      font-weight: 600;
      color: var(--foreground);
      font-size: 0.9rem;
    }

    .step-desc {
      font-size: 0.8rem;
      color: var(--muted);
      margin-top: 2px;
    }

    .step-status {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--success);
    }

    .step-status.pending {
      background: var(--warning);
    }

    .step-connector {
      width: 2px;
      height: 20px;
      background: var(--border);
      margin-left: 37px;
    }

    .add-step-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px;
      border: 2px dashed var(--border);
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 0.9rem;
    }

    .add-step-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(34, 211, 187, 0.05);
    }

    .workflow-footer {
      padding: 16px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .workflow-status {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85rem;
      color: var(--muted);
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--success);
    }

    .status-dot.running {
      background: var(--primary);
      animation: pulse 1s ease-in-out infinite;
    }

    /* ==================== QUOTA / USAGE SECTION ==================== */


    /* ==================== WORKFLOW DETAILS DRAWER ==================== */
    .workflow-drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.42);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      z-index: 230;
    }

    .workflow-drawer-overlay.open {
      opacity: 1;
      visibility: visible;
    }

    .workflow-drawer {
      position: fixed;
      right: 0;
      top: 0;
      width: min(420px, 94vw);
      height: 100vh;
      background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.14), transparent 34%),
        linear-gradient(180deg, #101827 0%, #0c1422 100%);
      border-left: 1px solid rgba(148, 163, 184, 0.25);
      z-index: 240;
      transform: translateX(100%);
      transition: transform 0.25s ease;
      display: flex;
      flex-direction: column;
      box-shadow: -20px 0 44px rgba(2, 8, 23, 0.52);
    }

    .workflow-drawer.open {
      transform: translateX(0);
    }

    .workflow-drawer-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 20px 20px 16px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.2);
      background: linear-gradient(120deg, rgba(34, 211, 187, 0.12), rgba(59, 130, 246, 0.14));
    }

    .workflow-drawer-kicker {
      margin: 0;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: #9fc2e4;
    }

    .workflow-drawer-title {
      margin: 4px 0 0;
      font-size: 1.15rem;
      line-height: 1.38;
      color: #f5f9ff;
      letter-spacing: 0.01em;
    }

    .workflow-drawer-close {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      border: 1px solid rgba(148, 163, 184, 0.34);
      background: rgba(15, 23, 42, 0.36);
      color: #d9e7f7;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .workflow-drawer-close:hover {
      color: #ffffff;
      background: rgba(59, 130, 246, 0.24);
    }

    .workflow-drawer-close svg {
      width: 16px;
      height: 16px;
    }

    .workflow-drawer-body {
      padding: 18px 20px 24px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .workflow-drawer-badge-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .workflow-drawer-status {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 600;
      text-transform: capitalize;
      background: rgba(156, 163, 175, 0.16);
      color: var(--muted);
      border: 1px solid rgba(156, 163, 175, 0.26);
    }

    .workflow-drawer-status.active {
      background: rgba(34, 197, 94, 0.14);
      color: var(--success);
      border-color: rgba(34, 197, 94, 0.3);
    }

    .workflow-drawer-status.inactive {
      background: rgba(156, 163, 175, 0.16);
      color: var(--muted);
      border-color: rgba(156, 163, 175, 0.26);
    }

    .workflow-drawer-id {
      font-size: 0.8rem;
      color: #a8c0dc;
      font-family: 'Space Mono', 'Courier New', monospace;
    }

    .workflow-drawer-section-title {
      font-size: 0.8rem;
      color: #aac3e0;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .workflow-drawer-flow {
      padding: 12px 13px;
      border-radius: 10px;
      border: 1px solid rgba(148, 163, 184, 0.3);
      background: rgba(15, 23, 42, 0.48);
      color: #f2f8ff;
      font-weight: 600;
    }

    .workflow-drawer-description {
      margin: 0;
      color: #d8e5f4;
      line-height: 1.55;
      background: rgba(15, 23, 42, 0.44);
      border: 1px solid rgba(148, 163, 184, 0.26);
      border-radius: 10px;
      padding: 12px;
    }

    .workflow-drawer-link-details {
      border: 1px solid rgba(148, 163, 184, 0.3);
      border-radius: 10px;
      background:
        radial-gradient(circle at 92% 8%, rgba(34, 211, 187, 0.18), transparent 46%),
        linear-gradient(155deg, rgba(59, 130, 246, 0.2), rgba(15, 23, 42, 0.28));
      color: #f5f9ff;
      padding: 14px;
      font-size: 0.87rem;
      line-height: 1.5;
    }

    .workflow-link-topbar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .workflow-link-chip {
      border-radius: 999px;
      padding: 5px 10px;
      border: 1px solid rgba(34, 211, 187, 0.4);
      background: rgba(34, 211, 187, 0.12);
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.7rem;
      font-weight: 700;
    }

    .workflow-link-chip.muted {
      border-color: rgba(148, 163, 184, 0.35);
      background: rgba(148, 163, 184, 0.12);
      color: var(--muted-foreground);
    }

    .workflow-link-columns {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 10px;
    }

    .workflow-link-panel {
      border: 1px solid rgba(148, 163, 184, 0.26);
      border-radius: 10px;
      background: rgba(15, 23, 42, 0.44);
      padding: 10px;
    }

    .workflow-link-panel-title {
      margin: 0 0 8px;
      font-size: 0.74rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #a8c4e3;
      font-weight: 700;
    }

    .workflow-link-info-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 7px;
    }

    .workflow-link-info-item:last-child {
      margin-bottom: 0;
    }

    .workflow-link-info-label {
      color: #9eb7d4;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 600;
    }

    .workflow-link-info-value {
      color: #f2f8ff;
      font-size: 0.83rem;
      word-break: break-word;
    }

    .workflow-link-actions {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .workflow-link-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      border: 1px solid rgba(59, 130, 246, 0.35);
      background: rgba(59, 130, 246, 0.24);
      color: #f2f7ff;
      font-size: 0.78rem;
      font-weight: 700;
      text-decoration: none;
      padding: 6px 10px;
      transition: transform 0.14s ease, background 0.2s ease;
    }

    .workflow-link-action:hover {
      background: rgba(59, 130, 246, 0.34);
      transform: translateY(-1px);
    }

    .workflow-map-section {
      margin-top: 2px;
    }

    .workflow-map-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 240px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .workflow-map-row {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      border: 1px solid rgba(148, 163, 184, 0.26);
      border-radius: 10px;
      padding: 10px;
      background: rgba(15, 23, 42, 0.52);
    }

    .workflow-map-order {
      min-width: 30px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid rgba(34, 211, 187, 0.35);
      color: var(--primary);
      font-weight: 700;
      font-size: 0.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(34, 211, 187, 0.1);
    }

    .workflow-map-head {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }

    .workflow-map-mode {
      border-radius: 999px;
      font-size: 0.66rem;
      padding: 3px 8px;
      border: 1px solid rgba(148, 163, 184, 0.3);
      color: #dbe5f1;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 700;
    }

    .workflow-map-mode.fixed {
      border-color: rgba(245, 158, 11, 0.45);
      background: rgba(245, 158, 11, 0.13);
      color: #facc75;
    }

    .workflow-map-arrow {
      font-weight: 600;
      color: #f3f8ff;
      font-size: 0.82rem;
      word-break: break-word;
    }

    .workflow-map-meta {
      font-size: 0.73rem;
      color: #b5c8de;
      line-height: 1.45;
      word-break: break-word;
    }

    .workflow-link-empty {
      font-size: 0.8rem;
      color: #c1d4e8;
      border: 1px dashed rgba(148, 163, 184, 0.32);
      border-radius: 8px;
      padding: 10px;
      background: rgba(15, 23, 42, 0.44);
    }

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

    .workflow-drawer-item {
      border: 1px solid rgba(148, 163, 184, 0.26);
      border-radius: 10px;
      padding: 10px;
      background: rgba(15, 23, 42, 0.46);
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .workflow-drawer-label {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #a6bfdb;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .workflow-drawer-label svg {
      flex-shrink: 0;
      opacity: 0.7;
    }

    .workflow-drawer-value {
      font-size: 0.9rem;
      color: #f3f9ff;
      font-weight: 600;
      line-height: 1.35;
      word-break: break-word;
    }

    .workflow-drawer-note {
      border-left: 3px solid var(--primary);
      border-radius: 8px;
      background: rgba(34, 211, 187, 0.14);
      color: #d9ecf8;
      padding: 10px 12px;
      font-size: 0.85rem;
      line-height: 1.45;
    }

    .workflow-drawer-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .workflow-leads-export-btn {
      border: 1px solid rgba(59, 130, 246, 0.35);
      background: rgba(59, 130, 246, 0.24);
      color: #f2f7ff;
      border-radius: 8px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      padding: 6px 10px;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.15s ease;
    }

    .workflow-leads-export-btn:hover {
      background: rgba(59, 130, 246, 0.34);
      transform: translateY(-1px);
    }

    .workflow-leads-export-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .workflow-leads-meta {
      font-size: 0.77rem;
      color: #b5c8de;
      margin-bottom: 8px;
    }

    .workflow-leads-table-wrap {
      border: 1px solid rgba(148, 163, 184, 0.26);
      border-radius: 10px;
      overflow: hidden;
      background: rgba(15, 23, 42, 0.44);
      max-height: 280px;
      overflow-y: auto;
    }

    .workflow-leads-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .workflow-leads-table th,
    .workflow-leads-table td {
      padding: 8px 9px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.2);
      text-align: left;
      word-break: break-word;
    }

    .workflow-leads-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: rgba(15, 23, 42, 0.72);
      color: #a6bfdb;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .workflow-leads-table td {
      color: #e9f2fd;
      font-size: 0.78rem;
    }

    .workflow-leads-empty {
      text-align: center;
      color: #c1d4e8;
      font-size: 0.78rem;
      padding: 14px 10px;
    }

    @media (max-width: 640px) {
      .workflow-drawer {
        width: 100vw;
      }

      .workflow-drawer-grid {
        grid-template-columns: 1fr;
      }

      .workflow-link-columns {
        grid-template-columns: 1fr;
      }

      .workflow-map-row {
        grid-template-columns: 1fr;
      }

      .workflow-map-order {
        width: 30px;
      }
    }

    /* ==================== NEW WORKFLOW MODAL ==================== */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 200;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      overflow: hidden;
      padding: 24px 16px;
    }

    .modal-overlay.open {
      opacity: 1;
      visibility: visible;
    }

    .modal {
      width: 90%;
      max-width: 900px;
      height: 90vh;
      max-height: 90vh;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transform: scale(0.95) translateY(20px);
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
    }

    .modal-overlay.open .modal {
      transform: scale(1) translateY(0);
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
    }

    .modal-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--foreground);
    }

    .modal-close {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: transparent;
      border: none;
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .modal-close:hover {
      background: var(--secondary);
      color: var(--foreground);
    }

    .modal-close svg {
      width: 20px;
      height: 20px;
    }

    .modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
      min-height: 0;
    }

    /* Workflow Name (persists across all creation steps) */
    .modal-workflow-name-row {
      padding: 16px 24px;
      border-bottom: 1px solid var(--border);
      background: var(--background);
    }

    .modal-workflow-name-label {
      display: block;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .modal-workflow-name-input {
      width: 100%;
      padding: 10px 14px;
      background: var(--card, var(--background));
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--foreground);
      font-size: 0.95rem;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .modal-workflow-name-input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(34, 211, 187, 0.1);
    }

    .modal-workflow-name-input::placeholder {
      color: var(--muted);
    }

    /* Tabs */
    .modal-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 16px;
    }

    .modal-tab {
      padding: 10px 20px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--muted-foreground);
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .modal-tab:hover {
      background: var(--secondary);
      color: var(--foreground);
    }

    .modal-tab.active {
      background: var(--primary);
      border-color: var(--primary);
      color: var(--background);
    }

    .modal-tab svg {
      width: 18px;
      height: 18px;
    }

    /* Template Categories */
    .template-section {
      margin-bottom: 32px;
    }

    .template-section:last-child {
      margin-bottom: 0;
    }

    .template-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .template-section-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--foreground);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .template-section-title svg {
      width: 20px;
      height: 20px;
      color: var(--primary);
    }

    .template-count {
      font-size: 0.8rem;
      color: var(--muted);
      padding: 4px 10px;
      background: var(--secondary);
      border-radius: 20px;
    }

    /* Template Grid */
    .template-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
    }

    .template-card {
      background: var(--secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .template-card:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    }

    .template-card.popular::before {
      content: 'Popular';
      position: absolute;
      top: 12px;
      right: -24px;
      background: linear-gradient(135deg, var(--primary), #14b8a6);
      color: var(--background);
      font-size: 0.65rem;
      font-weight: 600;
      padding: 4px 30px;
      transform: rotate(45deg);
      text-transform: uppercase;
    }

    .template-apps {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .template-app-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    .template-connector {
      width: 32px;
      height: 2px;
      background: var(--border);
      position: relative;
    }

    .template-connector::before {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      border: 5px solid transparent;
      border-left-color: var(--border);
    }

    .template-info {
      margin-bottom: 12px;
    }

    .template-name {
      font-weight: 600;
      font-size: 1rem;
      color: var(--foreground);
      margin-bottom: 4px;
    }

    .template-desc {
      font-size: 0.85rem;
      color: var(--muted);
      line-height: 1.5;
    }

    .template-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .template-meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem;
      color: var(--muted);
    }

    .template-meta-item svg {
      width: 14px;
      height: 14px;
    }

    /* Create from Scratch */
    .scratch-card {
      background: linear-gradient(135deg, rgba(34, 211, 187, 0.1), rgba(34, 211, 187, 0.02));
      border: 2px dashed var(--primary);
      border-radius: var(--radius);
      padding: 40px 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .scratch-card:hover {
      background: linear-gradient(135deg, rgba(34, 211, 187, 0.15), rgba(34, 211, 187, 0.05));
      box-shadow: 0 0 30px var(--primary-glow);
    }

    .scratch-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      background: var(--primary);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 30px var(--primary-glow);
    }

    .scratch-icon svg {
      width: 32px;
      height: 32px;
      color: var(--background);
    }

    .scratch-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--foreground);
      margin-bottom: 8px;
    }

    .scratch-desc {
      font-size: 0.9rem;
      color: var(--muted);
    }

    /* Search in Modal */
    .modal-search {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: var(--background);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 24px;
    }

    .modal-search:focus-within {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(34, 211, 187, 0.1);
      background: var(--card-hover);
    }

    .modal-search svg {
      width: 20px;
      height: 20px;
      color: var(--muted);
    }

    .modal-search input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--foreground);
      font-size: 0.95rem;
    }

    .modal-search input::placeholder {
      color: var(--muted);
    }

    /* App Selection Step */
    .app-selection {
      display: none;
    }

    .app-selection.active {
      display: block;
    }

    .app-selection-header {
      text-align: center;
      margin-bottom: 32px;
    }

    .app-selection-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--foreground);
      margin-bottom: 8px;
    }

    .app-selection-desc {
      color: var(--muted);
    }

    .app-step-indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 32px;
    }

    .step-dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--secondary);
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--muted);
      transition: all 0.2s ease;
    }

    .step-dot.active {
      background: var(--primary);
      border-color: var(--primary);
      color: var(--background);
    }

    .step-dot.completed {
      background: var(--success);
      border-color: var(--success);
      color: var(--background);
    }

    .step-line {
      width: 60px;
      height: 2px;
      background: var(--border);
    }

    .step-line.active {
      background: var(--primary);
    }

    .selected-apps {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      margin-bottom: 32px;
      padding: 24px;
      background: var(--secondary);
      border-radius: var(--radius);
    }

    .selected-app {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      border: 2px solid transparent;
      border-radius: var(--radius);
      padding: 16px;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .selected-app:hover {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(34, 211, 187, 0.2);
    }

    .selected-app.selecting {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(34, 211, 187, 0.2);
    }

    .selected-app-icon {
      width: 64px;
      height: 64px;
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      transition: all 0.2s ease;
    }

    .selected-app-icon.empty {
      background: var(--card);
      border: 2px dashed var(--border);
      color: var(--muted);
      cursor: pointer;
    }

    .selected-app-icon.empty:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    .selected-app-label {
      font-size: 0.85rem;
      color: var(--muted);
    }

    .selected-app-name {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--foreground);
    }

    .flow-arrow {
      color: var(--primary);
    }

    .flow-arrow svg {
      width: 24px;
      height: 24px;
    }

    /* App Grid */
    .app-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 12px;
    }

    .app-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 20px 16px;
      background: var(--secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .app-item:hover {
      border-color: var(--primary);
      background: var(--card-hover);
    }

    .app-item.selected {
      border-color: var(--primary);
      background: rgba(34, 211, 187, 0.1);
      box-shadow: 0 0 0 3px rgba(34, 211, 187, 0.1);
    }

    .app-item-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
    }

    .app-item-name {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--foreground);
      text-align: center;
    }

    /* Modal Footer */
    .modal-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      background: var(--secondary);
    }

    .modal-footer-left {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 0.85rem;
    }

    .modal-footer-left svg {
      width: 16px;
      height: 16px;
    }

    .modal-footer-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* The footer's legacy "Create Workflow" button (#createBtn) duplicates the
       command panel's own Create Workflow button — both call the exact same
       WorkflowDispatcher.createWorkflow(). Numerous legacy per-source JS files
       still toggle its inline style.display, so it's forced hidden here rather
       than removed from the DOM (removing it would null-reference-crash those
       files' unguarded createBtn.style.display assignments). */
    #createBtn {
      display: none !important;
    }

    /* ==================== FACEBOOK WORKFLOW ==================== */


    /* ==================== WORKFLOW DRAWER THEME ALIGNMENT ==================== */
    .workflow-drawer {
      background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      border-left: 1px solid #d7e2f1;
      box-shadow: -14px 0 30px rgba(22, 44, 79, 0.12);
    }

    .workflow-drawer-header {
      border-bottom: 1px solid #d7e2f1;
      background: linear-gradient(115deg, rgba(24, 119, 242, 0.14), rgba(24, 119, 242, 0.05));
    }

    .workflow-drawer-kicker {
      color: #4b6280;
    }

    .workflow-drawer-title {
      color: #153156;
    }

    .workflow-drawer-close {
      background: #f4f8ff;
      border-color: #d7e2f1;
      color: #365377;
    }

    .workflow-drawer-close:hover {
      background: #e8f1ff;
      color: #173860;
    }

    .workflow-drawer-id,
    .workflow-drawer-section-title,
    .workflow-drawer-label,
    .workflow-link-panel-title,
    .workflow-link-info-label {
      color: #5c7594;
    }

    .workflow-drawer-flow,
    .workflow-drawer-description,
    .workflow-drawer-item,
    .workflow-link-panel,
    .workflow-map-row,
    .workflow-link-empty {
      background: #f4f8ff;
      border-color: #d7e2f1;
    }

    .workflow-drawer-flow,
    .workflow-drawer-value,
    .workflow-link-info-value,
    .workflow-map-arrow {
      color: #163253;
    }

    .workflow-drawer-description,
    .workflow-map-meta,
    .workflow-link-empty,
    .workflow-link-chip.muted {
      color: #5d7591;
    }

    .workflow-drawer-link-details {
      background:
        radial-gradient(circle at 94% 8%, rgba(24, 119, 242, 0.12), transparent 44%),
        linear-gradient(165deg, #f7fbff, #eef4ff);
      border-color: #cfe0f5;
      color: #173456;
    }

    .workflow-link-chip {
      background: rgba(24, 119, 242, 0.12);
      border-color: rgba(24, 119, 242, 0.28);
      color: #0f4b9a;
    }

    .workflow-link-chip.muted {
      background: rgba(148, 163, 184, 0.16);
      border-color: rgba(148, 163, 184, 0.24);
    }

    .workflow-link-action {
      background: #eaf2ff;
      border-color: #bdd3ef;
      color: #114a98;
    }

    .workflow-link-action:hover {
      background: #dceaff;
    }

    .workflow-map-order {
      background: rgba(24, 119, 242, 0.1);
      border-color: rgba(24, 119, 242, 0.3);
      color: #0f4b9a;
    }

    .workflow-map-mode {
      border-color: #c5d9f3;
      color: #3d5a80;
      background: #edf4ff;
    }

    .workflow-map-mode.fixed {
      border-color: rgba(218, 138, 22, 0.32);
      background: rgba(218, 138, 22, 0.1);
      color: #9a5f07;
    }

    .workflow-drawer-note {
      background: rgba(24, 119, 242, 0.09);
      border-left-color: #1877f2;
      color: #1f4168;
    }

    .workflow-leads-export-btn {
      background: #eaf2ff;
      border-color: #bdd3ef;
      color: #114a98;
    }

    .workflow-leads-export-btn:hover {
      background: #dceaff;
    }

    .workflow-leads-meta {
      color: #5d7591;
    }

    .workflow-leads-table-wrap {
      background: #f4f8ff;
      border-color: #d7e2f1;
    }

    .workflow-leads-table th {
      background: #edf4ff;
      color: #5c7594;
      border-bottom-color: #d7e2f1;
    }

    .workflow-leads-table td {
      color: #163253;
      border-bottom-color: #d7e2f1;
    }

    .workflow-leads-empty {
      color: #5d7591;
    }

    @media (max-width: 1024px) {
      .navbar {
        padding-left: 74px;
      }

      .sidebar {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      }
    }

    @media (max-width: 768px) {
      html {
        font-size: 12px;
      }

      .dashboard {
        padding: 14px;
      }

      .card,
      .quota-card,
      .auth-box,
      .plan-card {
        border-radius: 14px;
      }

      .auth-box {
        width: min(94vw, 350px);
        padding: 22px 18px;
      }

      .auth-logo img {
        width: 24px;
        height: 24px;
      }

      /* Modal: slide-up sheet from bottom */
      .modal-overlay {
        padding: 0;
        align-items: flex-end;
      }

      .modal {
        width: 100%;
        max-width: 100%;
        height: 92vh;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
      }

      .modal-overlay.open .modal {
        transform: translateY(0);
      }

      .modal-header {
        padding: 16px 18px;
        position: relative;
      }

      /* Swipe handle indicator */
      .modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
      }

      .modal-body {
        padding: 16px 18px;
      }

      .modal-footer {
        padding: 12px 18px;
      }

      /* Step navigation */
      .modal-steps {
        padding: 0 18px;
        gap: 6px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      .step-item {
        flex-shrink: 0;
        min-width: 80px;
        padding: 8px;
      }

      .step-title {
        font-size: 0.7rem;
      }

      /* App selection grid: 2-col */
      .apps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }

      .app-item {
        padding: 14px 10px;
      }

      /* Destination options: 2-col */
      .dest-apps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }

      .dest-app-option {
        padding: 12px 8px;
      }

      /* Facebook workflow steps */
      .facebook-step,
      .google-step {
        padding: 14px;
      }

      /* Form inputs */
      .form-input,
      .facebook-dropdown,
      .google-dropdown {
        padding: 10px 14px;
        font-size: 0.88rem;
      }

      /* Modal title */
      .modal-title {
        font-size: 0.95rem;
      }

      /* Close button */
      .modal-close {
        width: 32px;
        height: 32px;
      }
    }

    @media (max-width: 480px) {
      .modal {
        height: 96vh;
        max-height: 96vh;
        border-radius: 16px 16px 0 0;
      }

      /* App grid: 1-col on very small */
      .apps-grid {
        grid-template-columns: 1fr;
      }

      .dest-apps-grid {
        grid-template-columns: 1fr;
      }

      .step-item {
        min-width: 70px;
      }

      /* Hide step numbers on tiny screens; show only dots */
      .step-number {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
      }

      .modal-body {
        padding: 12px;
      }

      .modal-header {
        padding: 14px 14px 10px;
      }
    }