/* ============================================================
   Account Connect - Wizard / Provider / Bulk
   ============================================================ */
.connect-page { max-width: 720px; margin: 0 auto; }
.connect-topbar {
  display: flex; align-items: center; gap: 14px; padding: 16px 0 28px;
}
.connect-topbar-title { font: var(--k-text-h2); }
.connect-body { animation: pageEnter var(--k-dur-medium) var(--k-ease); }

.connect-section-title { font: var(--k-text-h4); margin-bottom: 4px; }
.connect-section-desc {
  font: var(--k-text-body); color: var(--k-text-secondary); margin-bottom: 24px;
}

/* Provider Cards */
.provider-grid { display: flex; flex-direction: column; gap: 10px; }
.provider-card {
  display: flex; align-items: center; gap: 16px; padding: 18px;
  background: var(--k-surface); border: 1.5px solid var(--k-border-light);
  border-radius: var(--k-radius-md); cursor: pointer;
  transition: all var(--k-dur-normal) var(--k-ease);
}
.provider-card:hover {
  border-color: var(--k-primary); box-shadow: var(--k-shadow-md);
  transform: translateY(-2px);
}
.provider-card-icon {
  width: 44px; height: 44px; border-radius: var(--k-radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem; font-weight: 700; flex-shrink: 0;
}
.provider-card-info { flex: 1; }
.provider-card-name { font: var(--k-text-h4); }
.provider-card-desc { font: var(--k-text-small); color: var(--k-text-secondary); margin-top: 2px; }
.provider-card-arrow { color: var(--k-text-tertiary); }
.provider-card-icon.google    { background: #4285f4; }
.provider-card-icon.microsoft { background: #00a4ef; }
.provider-card-icon.custom    { background: #6750a4; }

/* Choice Cards */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 28px 20px; gap: 14px;
  background: var(--k-surface); border: 1.5px solid var(--k-border-light);
  border-radius: var(--k-radius-lg); cursor: pointer;
  transition: all var(--k-dur-normal) var(--k-ease);
}
.choice-card:hover {
  border-color: var(--k-primary); box-shadow: var(--k-shadow-md);
  transform: translateY(-3px);
}
.choice-icon {
  width: 56px; height: 56px; border-radius: var(--k-radius-lg);
  background: var(--k-primary-ultra-light); color: var(--k-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.choice-title { font: var(--k-text-h4); }
.choice-desc { font: var(--k-text-small); color: var(--k-text-secondary); }

/* Wizard Stepper */
.wizard-stepper {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 28px; padding: 20px 0;
}
.wizard-step { display: flex; align-items: center; gap: 10px; }
.wizard-step-circle {
  width: 32px; height: 32px; border-radius: var(--k-radius-full);
  border: 2px solid var(--k-border); display: flex; align-items: center;
  justify-content: center; font: var(--k-text-label-sm);
  color: var(--k-text-secondary);
  transition: all var(--k-dur-normal) var(--k-ease);
}
.wizard-step.active .wizard-step-circle {
  border-color: var(--k-primary); background: var(--k-gradient); color: #fff;
  box-shadow: var(--k-shadow-primary);
}
.wizard-step.completed .wizard-step-circle {
  border-color: var(--k-success); background: linear-gradient(135deg, #10b981, #059669); color: #fff;
  box-shadow: var(--k-shadow-success);
}
.wizard-step-label { font: var(--k-text-label); color: var(--k-text-secondary); }
.wizard-step.active .wizard-step-label { color: var(--k-primary); font-weight: 600; }
.wizard-step.completed .wizard-step-label { color: var(--k-success); }
.wizard-step-line {
  width: 56px; height: 2px; background: var(--k-border);
  margin: 0 14px; flex-shrink: 0;
  transition: background var(--k-dur-normal) var(--k-ease);
  border-radius: 1px;
}
.wizard-step-line.done { background: var(--k-gradient-fresh); }

/* Wizard Form */
.wizard-form {
  background: var(--k-surface); border: 1px solid var(--k-border-light);
  border-radius: var(--k-radius-lg); padding: 28px;
  box-shadow: var(--k-shadow-sm);
}
.wizard-step-content { display: flex; flex-direction: column; gap: 18px; }
.wizard-hint { font: var(--k-text-body); color: var(--k-text-secondary); margin-bottom: 8px; }
.wizard-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--k-border-light);
}

.wizard-reply-to { margin-top: 8px; }
.wizard-reply-warn {
  font: var(--k-text-small); color: var(--k-text-secondary);
  margin: 8px 0; padding: 10px 14px;
  background: var(--k-surface-sunken); border-radius: var(--k-radius-sm);
}

/* Connection Error Box */
.connect-error-box {
  margin-top: 14px; padding: 14px 18px;
  border-radius: var(--k-radius-md);
  border-left: 4px solid var(--k-error);
  background: var(--k-error-light); color: var(--k-error-dark);
}
.connect-error-title {
  display: flex; align-items: center; gap: 8px;
  font: var(--k-text-h4);
}
.connect-error-details {
  font: var(--k-text-small); margin-top: 8px; word-break: break-all; opacity: .85;
}

/* Bulk Import */
.bulk-upload-area { margin: 20px 0; }
.bulk-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 44px 28px;
  border: 2px dashed var(--k-border);
  border-radius: var(--k-radius-lg); cursor: pointer;
  transition: all var(--k-dur-normal) var(--k-ease);
  color: var(--k-text-secondary);
}
.bulk-dropzone:hover, .bulk-dropzone.drag-active {
  border-color: var(--k-primary); background: var(--k-primary-ultra-light);
  color: var(--k-primary);
}
.bulk-upload-icon { font-size: 2.5rem; }
.bulk-file-info {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--k-surface-sunken);
  border-radius: var(--k-radius-sm);
}
.bulk-table-wrap {
  margin-top: 14px; max-height: 400px; overflow-y: auto;
  border: 1px solid var(--k-border-light);
  border-radius: var(--k-radius-md);
}
.bulk-table { font-size: .875rem; }
.bulk-row-loading { background: var(--k-surface-sunken); }
.bulk-row-connected { background: #dcfce7; }
.bulk-row-error { background: #fee2e2; }
.bulk-summary { font: var(--k-text-body); color: var(--k-text-secondary); }

/* -- Mobile Hamburger Toggle -------------------------- */
.hamburger-btn {
  display: none; width: 36px; height: 36px;
  border-radius: var(--k-radius-sm); border: none; background: none;
  cursor: pointer; align-items: center; justify-content: center;
  color: var(--k-text); transition: all var(--k-dur-normal) var(--k-ease);
}
.hamburger-btn:hover { background: var(--k-surface-sunken); }

/* -- Loading Skeleton --------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--k-surface-sunken) 25%, var(--k-border-light) 50%, var(--k-surface-sunken) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--k-radius-sm);
}
.skeleton-line { height: 14px; margin-bottom: 10px; border-radius: var(--k-radius-xs); }
.skeleton-card { height: 60px; border-radius: var(--k-radius-md); margin-bottom: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* -- Toggle Switch (modern) --------------------------- */
.toggle-switch {
  position: relative; width: 44px; height: 24px;
  background: var(--k-border); border-radius: var(--k-radius-full);
  cursor: pointer; transition: background var(--k-dur-normal) var(--k-ease);
  border: none; padding: 0;
}
.toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--k-shadow-sm);
  transition: transform var(--k-dur-normal) var(--k-ease-bounce);
}
.toggle-switch.on { background: var(--k-primary); }
.toggle-switch.on::after { transform: translateX(20px); }

/* -- CSV Drop Zone ------------------------------------ */
.csv-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 32px 24px;
  border: 2px dashed var(--k-border); border-radius: var(--k-radius-lg);
  cursor: pointer; transition: all var(--k-dur-normal) var(--k-ease);
  color: var(--k-text-secondary); background: var(--k-surface);
}
.csv-dropzone:hover, .csv-dropzone.drag-active {
  border-color: var(--k-primary); background: var(--k-primary-ultra-light); color: var(--k-primary);
}

/* -- Dark Mode ---------------------------------------- */
[data-theme="dark"] {
  --k-bg: #0f172a;
  --k-bg-mesh: radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.08) 0%, transparent 50%),
               radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.08) 0%, transparent 50%),
               #0f172a;
  --k-surface: #1e293b;
  --k-surface-hover: #334155;
  --k-surface-raised: #1e293b;
  --k-surface-sunken: #0f172a;
  --k-surface-glass: rgba(30,41,59,0.85);
  --k-border: #334155;
  --k-border-light: #1e293b;
  --k-text: #f1f5f9;
  --k-text-secondary: #94a3b8;
  --k-text-tertiary: #64748b;
  --k-primary-light: rgba(99,102,241,0.15);
  --k-primary-ultra-light: rgba(99,102,241,0.08);
  --k-success-light: rgba(16,185,129,0.15);
  --k-error-light: rgba(239,68,68,0.15);
  --k-warning-light: rgba(245,158,11,0.15);
  --k-info-light: rgba(59,130,246,0.15);
  --k-success-dark: #6ee7b7;
  --k-error-dark: #fca5a5;
  --k-warning-dark: #fcd34d;
  --k-info-dark: #93c5fd;
  --k-scrim: rgba(0,0,0,0.6);
}
[data-theme="dark"] .input-field label { background: var(--k-surface); }
[data-theme="dark"] .topbar-brand { -webkit-text-fill-color: #c7d2fe; }
[data-theme="dark"] .topbar-right .credits-chip { background: rgba(245,158,11,0.15); color: #fcd34d; }

/* -- Responsive --------------------------------------- */
@media (max-width: 768px) {
  .topbar-center { display: none; }
  .topbar-right .credits-chip { display: none; }
  .hamburger-btn { display: flex; }
  .page, .page-container { padding: 16px; }
  .campaign-header, .campaign-row, .camp-row { font-size: 13px; }
  .camp-col-stat, .camp-col-progress { display: none; }
  .camp-col-actions { width: 60px; }
  .uni-layout { grid-template-columns: 1fr; }
  .uni-sidebar { display: none; }
  .uni-middle { border-right: none; }
  .split-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .choice-grid { grid-template-columns: 1fr; }
  .wizard-stepper { flex-wrap: wrap; justify-content: center; }
  .wizard-form { padding: 20px; }
}