/* ==================== DASHBOARD CONTENT ==================== */
    .dashboard {
      padding: 24px;
    }

    .dashboard-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    .dashboard-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--foreground);
    }

    .dashboard-subtitle {
      color: var(--muted);
      font-size: 0.9rem;
      margin-top: 4px;
    }

    /* ==================== DASHBOARD STAT CARDS ==================== */
    .dashboard-stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }

    .dashboard-stat-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;
    }

    .dashboard-stat-card:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(24, 119, 242, 0.1);
    }

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

    .dashboard-stat-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .dashboard-stat-value {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--foreground);
      line-height: 1.2;
    }

    .dashboard-stat-label {
      font-size: 0.8rem;
      color: var(--muted);
      font-weight: 500;
    }

    /* ==================== ANALYTICS CARDS ==================== */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 24px;
    }

    .stat-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      transition: all 0.3s ease;
    }

    .stat-card:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(24, 119, 242, 0.1);
    }

    .stat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

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

    .stat-icon svg {
      width: 22px;
      height: 22px;
    }

    .stat-icon.primary {
      background: rgba(34, 211, 187, 0.15);
      color: var(--primary);
    }

    .stat-icon.info {
      background: rgba(59, 130, 246, 0.15);
      color: var(--info);
    }

    .stat-icon.warning {
      background: rgba(245, 158, 11, 0.15);
      color: var(--warning);
    }

    .stat-icon.success {
      background: rgba(34, 197, 94, 0.15);
      color: var(--success);
    }

    .stat-trend {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.8rem;
      font-weight: 500;
      padding: 4px 8px;
      border-radius: 20px;
    }

    .stat-trend.up {
      background: rgba(34, 197, 94, 0.15);
      color: var(--success);
    }

    .stat-trend.down {
      background: rgba(239, 68, 68, 0.15);
      color: var(--error);
    }

    .stat-trend svg {
      width: 14px;
      height: 14px;
    }

    .stat-value {
      font-size: 2rem;
      font-weight: 700;
      color: var(--foreground);
      line-height: 1.2;
    }

    .stat-label {
      font-size: 0.85rem;
      color: var(--muted);
      margin-top: 4px;
    }

    /* ==================== DASHBOARD GRID ==================== */
    .dashboard-grid {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 24px;
      margin-bottom: 24px;
    }

    /* ==================== CHART CARD ==================== */
    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

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

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

    .card-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-body {
      padding: 20px;
    }

    .chart-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .chart-btn {
      padding: 6px 12px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--muted);
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .chart-btn:hover {
      background: var(--secondary);
      color: var(--foreground);
    }

    .chart-btn.active {
      background: var(--primary);
      border-color: var(--primary);
      color: var(--background);
    }

    .chart-container {
      height: 280px;
      position: relative;
    }

    .chart-canvas {
      width: 100%;
      height: 100%;
    }

    /* ==================== WORKFLOW BUILDER ==================== */

    /* ==================== SIDEBAR USER CARD ==================== */
    .sidebar-user-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      background: var(--secondary);
      border: 1px solid var(--border);
    }

    .sidebar-user-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.85rem;
      flex-shrink: 0;
      background: rgba(24,119,242,0.15);
      color: #1877f2;
    }

    .sidebar-user-info {
      flex: 1;
      min-width: 0;
    }

    .sidebar-user-name {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-user-role {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* ==================== DASHBOARD RECENT ROW ==================== */
    .dashboard-recent-row {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 16px;
      margin-bottom: 24px;
    }

    .dashboard-recent-card,
    .dashboard-activity-card {
      height: 100%;
    }

    .dashboard-recent-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 8px 0;
    }

    .dashboard-recent-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 32px 20px;
      color: var(--muted);
      text-align: center;
    }

    .dashboard-recent-empty p {
      font-size: 0.9rem;
    }

    .dashboard-inline-btn {
      background: none;
      border: none;
      color: var(--primary);
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 600;
      padding: 0;
    }

    .dashboard-recent-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 20px;
      border-radius: var(--radius-sm);
      transition: background 0.15s ease;
      cursor: pointer;
    }

    .dashboard-recent-item:hover {
      background: var(--secondary);
    }

    .dashboard-recent-icons {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .dashboard-recent-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .dashboard-recent-name {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dashboard-recent-sub {
      font-size: 0.78rem;
      color: var(--muted);
    }

    .dashboard-view-all-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      padding: 6px 12px;
    }

    /* ==================== QUICK ACTIONS ==================== */
    .dashboard-quick-actions {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 8px 0;
    }

    .dashboard-quick-action-btn {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 20px;
      background: none;
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      text-align: left;
      width: 100%;
      transition: background 0.15s ease;
    }

    .dashboard-quick-action-btn:hover {
      background: var(--secondary);
    }

    .dqa-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .dqa-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .dqa-label {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--foreground);
    }

    .dqa-desc {
      font-size: 0.76rem;
      color: var(--muted);
    }

    /* ==================== WORKFLOWS SCREEN ==================== */
    .wf-screen-stats {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
    }

    .wf-screen-stat {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 0.85rem;
      color: var(--muted);
    }

    .wf-screen-stat.active-stat   { border-left: 3px solid #22c55e; }
    .wf-screen-stat.inactive-stat { border-left: 3px solid #9ca3af; }
    .wf-screen-stat.total-stat    { border-left: 3px solid var(--primary); }

    .wf-screen-stat-value {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--foreground);
    }

    .wf-screen-stat-label {
      font-size: 0.78rem;
      color: var(--muted);
    }

    /* ==================== INTEGRATIONS SCREEN ==================== */
    .integrations-section {
      margin-bottom: 28px;
    }

    .integrations-section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .integrations-apps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .integration-app-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(22,44,79,0.04);
    }

    .integration-app-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(24,119,242,0.09);
      border-color: rgba(24,119,242,0.3);
    }

    .integration-app-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .integration-app-info {
      flex: 1;
      min-width: 0;
    }

    .integration-app-name {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--foreground);
      margin-bottom: 3px;
    }

    .integration-app-desc {
      font-size: 0.78rem;
      color: var(--muted);
      line-height: 1.4;
    }

    .integration-app-badge {
      font-size: 0.7rem;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 20px;
      white-space: nowrap;
      flex-shrink: 0;
      background: rgba(24,160,106,0.12);
      color: #15764f;
      border: 1px solid rgba(24,160,106,0.2);
    }

    /* ==================== BILLING SCREEN ==================== */
    .billing-grid {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 20px;
      align-items: start;
    }

    .billing-plan-body {
      padding: 24px;
    }

    .billing-plan-name {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--foreground);
      margin-bottom: 4px;
    }

    .billing-plan-price {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 20px;
    }

    .billing-plan-period {
      font-size: 0.85rem;
      color: var(--muted);
      font-weight: 400;
    }

    .billing-plan-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .billing-plan-features li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.88rem;
      color: var(--muted-foreground);
    }

    .billing-plan-features li svg {
      color: var(--success);
      flex-shrink: 0;
    }

    .plan-badge-tag {
      font-size: 0.72rem;
      font-weight: 700;
      background: rgba(24,160,106,0.12);
      color: #15764f;
      border: 1px solid rgba(24,160,106,0.2);
      padding: 3px 10px;
      border-radius: 20px;
    }

    .billing-usage-body {
      padding: 24px;
    }

    .billing-usage-numbers {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .billing-usage-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .billing-usage-value {
      font-size: 2rem;
      font-weight: 800;
      color: var(--foreground);
    }

    .billing-usage-label {
      font-size: 0.75rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .billing-usage-divider {
      font-size: 1.5rem;
      color: var(--border);
      font-weight: 300;
    }

    .billing-usage-hint {
      font-size: 0.82rem;
      color: var(--muted);
      margin-top: 10px;
    }

    /* ==================== SETTINGS SCREEN ==================== */
    .settings-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

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

    .settings-field {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    .settings-field:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .settings-label {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
      min-width: 140px;
    }

    .settings-value-row {
      font-size: 0.9rem;
      color: var(--foreground);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .settings-value-row.muted {
      color: var(--muted);
    }

    .settings-link-btn {
      background: none;
      border: none;
      color: var(--primary);
      cursor: pointer;
      font-size: 0.82rem;
      font-weight: 600;
      padding: 0;
      white-space: nowrap;
    }

    .settings-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .settings-toggle-label {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--foreground);
    }

    .settings-toggle-desc {
      font-size: 0.78rem;
      color: var(--muted);
      margin-top: 2px;
    }

    .settings-toggle-pill {
      width: 40px;
      height: 22px;
      border-radius: 11px;
      background: var(--border);
      flex-shrink: 0;
      cursor: pointer;
      position: relative;
      transition: background 0.2s ease;
    }

    .settings-toggle-pill::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      top: 3px;
      left: 3px;
      transition: transform 0.2s ease;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }

    .settings-toggle-pill.on {
      background: var(--success);
    }

    .settings-toggle-pill.on::after {
      transform: translateX(18px);
    }

    .danger-card .card-header {
      border-color: rgba(211,69,91,0.15);
    }

    /* ==================== HELP SCREEN ==================== */
    .help-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 20px;
    }

    .help-resource-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 24px;
      gap: 12px;
    }

    .help-resource-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .help-resource-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--foreground);
    }

    .help-resource-desc {
      font-size: 0.84rem;
      color: var(--muted);
      line-height: 1.5;
      flex: 1;
    }

    .help-resource-btn {
      margin-top: 4px;
      width: 100%;
      justify-content: center;
    }

    .help-faq-card {
      margin-bottom: 24px;
    }

    .help-faq-list {
      padding: 0 20px;
    }

    .help-faq-item {
      border-bottom: 1px solid var(--border);
      padding: 14px 0;
    }

    .help-faq-item:last-child {
      border-bottom: none;
    }

    .help-faq-item summary {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--foreground);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .help-faq-item summary::after {
      content: '+';
      font-size: 1.2rem;
      color: var(--muted);
      transition: transform 0.2s ease;
    }

    .help-faq-item[open] summary::after {
      transform: rotate(45deg);
    }

    .help-faq-item p {
      font-size: 0.86rem;
      color: var(--muted-foreground);
      margin-top: 10px;
      line-height: 1.6;
    }

    /* ==================== BTN-SM ==================== */
    .btn-sm {
      padding: 7px 14px;
      font-size: 0.82rem;
    }

    /* ==================== RESPONSIVE ==================== */
    @media (max-width: 1280px) {
      .dashboard-recent-row   { grid-template-columns: 1fr; }
      .integrations-apps-grid { grid-template-columns: repeat(2, 1fr); }
      .billing-grid           { grid-template-columns: 1fr; }
      .help-grid              { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 1024px) {
      .settings-grid          { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      .dashboard-stats-row    { grid-template-columns: repeat(2, 1fr); }
      .integrations-apps-grid { grid-template-columns: 1fr; }
      .help-grid              { grid-template-columns: 1fr; }
      .wf-screen-stats        { flex-wrap: wrap; }
    }

    @media (max-width: 480px) {
      .dashboard-stats-row    { grid-template-columns: 1fr; }
      .billing-usage-numbers  { flex-direction: column; }
    }