/* ============================================================
   CRMZT ZOHO — Modern Admin UI Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Design Tokens ── */
:root {
  --z-primary:        #5B21B6;
  --z-primary-h:      #4C1D95;
  --z-primary-lt:     #EDE9FE;
  --z-primary-mid:    #7C3AED;
  --z-success:        #059669;
  --z-success-lt:     #D1FAE5;
  --z-warning:        #D97706;
  --z-warning-lt:     #FEF3C7;
  --z-danger:         #DC2626;
  --z-danger-lt:      #FEE2E2;
  --z-info:           #2563EB;
  --z-info-lt:        #DBEAFE;
  --z-bg:             #F1F5F9;
  --z-surface:        #FFFFFF;
  --z-border:         #E2E8F0;
  --z-text:           #1E293B;
  --z-text-2:         #64748B;
  --z-text-muted:     #94A3B8;
  --z-shadow:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --z-shadow-md:      0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
  --z-shadow-lg:      0 10px 24px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.06);
  --z-radius:         10px;
  --z-radius-sm:      6px;
  --z-radius-lg:      16px;
  --z-ease:           all .2s cubic-bezier(.4,0,.2,1);
}

/* ── Scoped Reset ── */
.crmzt-app *, .crmzt-app *::before, .crmzt-app *::after { box-sizing: border-box; }
.crmzt-app {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--z-text);
  background: var(--z-bg);
  min-height: 100vh;
  padding: 24px 24px 40px;
}

/* ── Page Header ── */
.crmzt-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.crmzt-page-header-left { display: flex; align-items: center; gap: 14px; }
.crmzt-page-header-right { display: flex; align-items: center; gap: 12px; }
.crmzt-btn-support {
  background: #DC2626;
  color: #ffffff;
  border: 1px solid #B91C1C;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--z-radius-sm);
  font-size: 13px;
  cursor: pointer;
  transition: var(--z-ease);
}
.crmzt-btn-support:hover {
  background: #B91C1C;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.35);
}
.crmzt-page-logo {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--z-primary), var(--z-primary-mid));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(91,33,182,.3);
  flex-shrink: 0;
}
.crmzt-page-title h1 { margin: 0; font-size: 20px; font-weight: 700; color: var(--z-text); }
.crmzt-page-title p  { margin: 2px 0 0; font-size: 13px; color: var(--z-text-2); }
.crmzt-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.crmzt-status-pill.connected    { background: var(--z-success-lt); color: var(--z-success); }
.crmzt-status-pill.not-connected{ background: var(--z-danger-lt);  color: var(--z-danger);  }
.crmzt-status-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Stepper ── */
.crmzt-stepper {
  display: flex; align-items: center;
  background: var(--z-surface);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  padding: 20px 28px;
  margin-bottom: 24px;
  gap: 0;
  box-shadow: var(--z-shadow);
}
.crmzt-step {
  display: flex; align-items: center; gap: 12px;
  flex: 1; position: relative;
}
.crmzt-step:not(:last-child)::after {
  content: '';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: calc(100% - 56px); height: 2px;
  background: var(--z-border);
  margin-left: 56px;
  z-index: 0;
}
.crmzt-step.done:not(:last-child)::after  { background: var(--z-success); }
.crmzt-step.active:not(:last-child)::after{ background: linear-gradient(to right, var(--z-primary), var(--z-border)); }
.crmzt-step-badge {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
  border: 2px solid var(--z-border);
  background: var(--z-bg); color: var(--z-text-muted);
  position: relative; z-index: 1;
  transition: var(--z-ease);
}
.crmzt-step.done   .crmzt-step-badge { background: var(--z-success); border-color: var(--z-success); color: #fff; }
.crmzt-step.active .crmzt-step-badge { background: var(--z-primary); border-color: var(--z-primary); color: #fff; box-shadow: 0 0 0 4px var(--z-primary-lt); }
.crmzt-step-label strong { display: block; font-size: 13px; font-weight: 600; color: var(--z-text); }
.crmzt-step-label span   { font-size: 11px; color: var(--z-text-2); }
.crmzt-step.locked .crmzt-step-label strong { color: var(--z-text-muted); }

/* ── Cards ── */
.crmzt-card {
  background: var(--z-surface);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  box-shadow: var(--z-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}
.crmzt-card-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--z-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.crmzt-card-header h2 {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--z-text);
  display: flex; align-items: center; gap: 8px;
}
.crmzt-card-header h2 .card-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--z-primary-lt); color: var(--z-primary);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.crmzt-card-body { padding: 24px; }
.crmzt-card-footer {
  padding: 16px 24px;
  background: #FAFAFA;
  border-top: 1px solid var(--z-border);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  flex-wrap: wrap;
}

/* ── Alerts / Notice Banners ── */
.crmzt-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; border-radius: var(--z-radius);
  margin-bottom: 20px; font-size: 13px; line-height: 1.6;
}
.crmzt-alert-icon { font-size: 18px; margin-top: 1px; flex-shrink: 0; }
.crmzt-alert strong { display: block; font-size: 13px; margin-bottom: 2px; }
.crmzt-alert a { font-weight: 600; text-decoration: underline; color: inherit; }
.crmzt-alert.info    { background: var(--z-info-lt);    color: #1E40AF; border: 1px solid #BFDBFE; }
.crmzt-alert.success { background: var(--z-success-lt); color: #065F46; border: 1px solid #A7F3D0; }
.crmzt-alert.warning { background: var(--z-warning-lt); color: #92400E; border: 1px solid #FDE68A; }
.crmzt-alert.danger  { background: var(--z-danger-lt);  color: #991B1B; border: 1px solid #FCA5A5; }

/* ── Form Elements ── */
.crmzt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .crmzt-form-grid { grid-template-columns: 1fr; } }
.crmzt-field { display: flex; flex-direction: column; gap: 6px; }
.crmzt-label {
  font-size: 12px; font-weight: 600; color: var(--z-text-2);
  text-transform: uppercase; letter-spacing: .5px;
  display: flex; align-items: center; gap: 6px;
}
.crmzt-label .help {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--z-text-muted); color: #fff;
  font-size: 10px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; cursor: help;
}
.crmzt-input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--z-border);
  border-radius: var(--z-radius-sm);
  font-size: 14px; color: var(--z-text);
  font-family: inherit;
  background: var(--z-surface);
  transition: var(--z-ease);
  outline: none;
}
.crmzt-input:focus  { border-color: var(--z-primary); box-shadow: 0 0 0 3px var(--z-primary-lt); }
.crmzt-input:disabled,
.crmzt-input[readonly] { background: #F8FAFC; color: var(--z-text-2); cursor: not-allowed; }
.crmzt-input-hint { font-size: 11px; color: var(--z-text-muted); margin-top: 2px; }
.crmzt-select {
  width: 100%; padding: 10px 36px 10px 14px;
  border: 1.5px solid var(--z-border);
  border-radius: var(--z-radius-sm);
  font-size: 14px; color: var(--z-text);
  font-family: inherit;
  background: var(--z-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none; appearance: none;
  cursor: pointer; outline: none;
  transition: var(--z-ease);
}
.crmzt-select:focus { border-color: var(--z-primary); box-shadow: 0 0 0 3px var(--z-primary-lt); }

/* ── Buttons ── */
.crmzt-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--z-radius-sm);
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; border: none; text-decoration: none;
  transition: var(--z-ease); white-space: nowrap;
}
.crmzt-btn-primary {
  background: linear-gradient(135deg, var(--z-primary), var(--z-primary-mid));
  color: #fff;
  box-shadow: 0 3px 10px rgba(91,33,182,.3);
}
.crmzt-btn-primary:hover { background: linear-gradient(135deg, var(--z-primary-h), var(--z-primary)); transform: translateY(-1px); box-shadow: 0 5px 16px rgba(91,33,182,.4); color:#fff; }
.crmzt-btn-success { background: var(--z-success); color: #fff; box-shadow: 0 3px 10px rgba(5,150,105,.25); }
.crmzt-btn-success:hover { background: #047857; transform: translateY(-1px); color:#fff; }
.crmzt-btn-outline { background: var(--z-surface); color: var(--z-text); border: 1.5px solid var(--z-border); }
.crmzt-btn-outline:hover { border-color: var(--z-primary); color: var(--z-primary); background: var(--z-primary-lt); }
.crmzt-btn-danger  { background: var(--z-danger); color: #fff; }
.crmzt-btn-danger:hover { background: #B91C1C; transform: translateY(-1px); color:#fff; }
.crmzt-btn-lg { padding: 13px 28px; font-size: 14px; border-radius: 8px; }
.crmzt-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.crmzt-btn .spinner { display: none; }
.crmzt-btn.loading .spinner { display: inline-block; width:14px;height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; }
.crmzt-btn.loading .btn-text { opacity:.7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── OAuth Authorize Box ── */
.crmzt-oauth-box {
  background: linear-gradient(135deg, #EDE9FE, #DBEAFE);
  border: 1px solid #C4B5FD;
  border-radius: var(--z-radius);
  padding: 24px;
  text-align: center;
}
.crmzt-oauth-box p { color: #3730A3; margin: 0 0 16px; font-size: 14px; }
.crmzt-oauth-box .crmzt-btn-primary { font-size: 15px; padding: 14px 32px; border-radius: 9px; }
.crmzt-oauth-box .note { font-size: 12px; color: var(--z-text-2); margin: 12px 0 0; }

/* ── Field Mapper (Mapping Page) ── */
.crmzt-mapper-header {
  display: grid; grid-template-columns: 1fr 40px 1fr 52px;
  gap: 10px; align-items: center;
  padding: 10px 16px;
  background: var(--z-primary-lt);
  border-radius: var(--z-radius-sm) var(--z-radius-sm) 0 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--z-primary);
}
.crmzt-mapper-row {
  display: grid; grid-template-columns: 1fr 40px 1fr 52px;
  gap: 10px; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--z-border);
  animation: slideIn .2s ease;
}
@keyframes slideIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.crmzt-mapper-row:last-child { border-bottom: none; }
.crmzt-mapper-arrow { text-align:center; color: var(--z-text-muted); font-size: 18px; }
.crmzt-mapper-actions { display:flex; gap:4px; justify-content:flex-end; }
.crmzt-map-btn {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: var(--z-ease);
}
.crmzt-map-btn.add    { background: var(--z-primary-lt); color: var(--z-primary); }
.crmzt-map-btn.add:hover    { background: var(--z-primary); color: #fff; }
.crmzt-map-btn.remove { background: var(--z-danger-lt);  color: var(--z-danger); }
.crmzt-map-btn.remove:hover { background: var(--z-danger);  color: #fff; }
.crmzt-mapper-wrap {
  border: 1.5px solid var(--z-border);
  border-radius: var(--z-radius-sm);
  overflow: hidden;
  margin-bottom: 20px;
}

/* ── Status Badges ── */
.crmzt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.crmzt-badge.success { background: var(--z-success-lt); color: var(--z-success); }
.crmzt-badge.error   { background: var(--z-danger-lt);  color: var(--z-danger);  }
.crmzt-badge.optional{ background: var(--z-warning-lt); color: var(--z-warning); }
.crmzt-badge .dot { width:6px;height:6px;border-radius:50%;background:currentColor; }

/* ── How-To Step Cards ── */
.crmzt-how-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-top:16px; }
.crmzt-how-card {
  display:flex; flex-direction:column; gap:10px;
  padding:18px; background:var(--z-surface);
  border:1px solid var(--z-border); border-radius:var(--z-radius);
  transition:var(--z-ease);
}
.crmzt-how-card:hover { box-shadow:var(--z-shadow-md); border-color:#C4B5FD; transform:translateY(-2px); }
.crmzt-how-num {
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--z-primary),var(--z-primary-mid));
  color:#fff;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(91,33,182,.3);
}
.crmzt-how-card h4 { margin:0;font-size:13px;font-weight:600;color:var(--z-text); }
.crmzt-how-card p  { margin:0;font-size:12px;color:var(--z-text-2);line-height:1.6; }
.crmzt-how-card code {
  background:var(--z-bg);border:1px solid var(--z-border);
  border-radius:4px;padding:1px 6px;font-size:11px;
  word-break:break-all;color:var(--z-primary);
}

/* ── Loader ── */
.crmzt-loader-wrap {
  display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:48px;
}
.crmzt-loader-wrap.active { display:flex; }
.crmzt-spinner {
  width:40px;height:40px;border-radius:50%;
  border:3px solid var(--z-primary-lt);
  border-top-color:var(--z-primary);
  animation:spin .8s linear infinite;
}
.crmzt-loader-wrap p { color:var(--z-text-2);font-size:13px;margin:0; }

/* ── Redirect URL copyable box ── */
.crmzt-url-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  background: var(--z-bg);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-sm);
  padding: 12px;
  margin-top: 8px;
}
.crmzt-url-box code { 
  font-size: 11px;
  color: var(--z-primary);
  background: transparent;
  border: none;
  padding: 0;
  white-space: normal;
  word-break: break-all;
  line-height: 1.5;
}
.crmzt-copy-btn {
  width: 100%;
  padding: 8px 12px;
  background: var(--z-primary-lt);
  color: var(--z-primary);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  transition: var(--z-ease);
}
.crmzt-copy-btn:hover { background: var(--z-primary); color: #fff; }
.crmzt-copy-btn.copied { background: var(--z-success); color: #fff; }

/* Ensure any long links inside the cards wrap instead of overflowing */
.crmzt-how-card a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── Section Title ── */
.crmzt-section-title {
  font-size:15px;font-weight:700;color:var(--z-text);
  margin:28px 0 14px;display:flex;align-items:center;gap:8px;
}
.crmzt-section-title::after {
  content:'';flex:1;height:1px;background:var(--z-border);
}

/* ── Download Button in table ── */
.crmzt-dl-btn {
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:5px;
  background:var(--z-bg);border:1px solid var(--z-border);
  color:var(--z-text-2);font-size:12px;font-weight:500;
  text-decoration:none;transition:var(--z-ease);
}
.crmzt-dl-btn:hover { background:var(--z-primary-lt);border-color:var(--z-primary);color:var(--z-primary); }

/* ── Select2 override for crmzt selects ── */
.crmzt-app .select2-container .select2-selection--single {
  height:40px;border:1.5px solid var(--z-border);border-radius:var(--z-radius-sm);
}
.crmzt-app .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:38px;padding-left:14px;color:var(--z-text); }
.crmzt-app .select2-container--default .select2-selection--single .select2-selection__arrow { height:38px; }
.crmzt-app .select2-container--default.select2-container--focus .select2-selection--single,
.crmzt-app .select2-container--default.select2-container--open .select2-selection--single { border-color:var(--z-primary);box-shadow:0 0 0 3px var(--z-primary-lt); }

/* ── SweetAlert Modern Overrides ── */
.sweet-alert {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  border-radius: var(--z-radius-lg) !important;
  box-shadow: var(--z-shadow-lg) !important;
  border: 1px solid var(--z-border) !important;
  padding: 30px !important;
  background: #fff !important;
}
.sweet-alert h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--z-text) !important;
  margin: 20px 0 10px !important;
  line-height: 1.4 !important;
}
.sweet-alert p {
  font-size: 14px !important;
  color: var(--z-text-2) !important;
  font-weight: 400 !important;
}
.sweet-alert button {
  background: linear-gradient(135deg, var(--z-primary), var(--z-primary-mid)) !important;
  border-radius: var(--z-radius-sm) !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 10px rgba(91,33,182,.3) !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  transition: var(--z-ease) !important;
}
.sweet-alert button:hover {
  background: linear-gradient(135deg, var(--z-primary-h), var(--z-primary)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(91,33,182,.4) !important;
}
.sweet-alert .sa-icon.sa-success {
  border-color: var(--z-success) !important;
}
.sweet-alert .sa-icon.sa-success::before, 
.sweet-alert .sa-icon.sa-success::after,
.sweet-alert .sa-icon.sa-success .sa-fix {
  background: #fff !important;
}
.sweet-alert .sa-icon.sa-success .sa-line {
  background-color: var(--z-success) !important;
}
.sweet-alert .sa-icon.sa-error {
  border-color: var(--z-danger) !important;
}
.sweet-alert .sa-icon.sa-error .sa-line {
  background-color: var(--z-danger) !important;
}

/* ── WP List Table Premium Overrides ── */
.crmzt-app .wp-list-table { border: none !important; border-top: 1px solid var(--z-border) !important; margin: 0 !important; box-shadow: none !important; }
.crmzt-app .wp-list-table thead tr th,
.crmzt-app .wp-list-table tfoot tr th {
  background: #FAFAFA !important;
  color: var(--z-text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700 !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--z-border) !important;
  border-top: none !important;
}
.crmzt-app .wp-list-table tbody tr { background: #fff !important; transition: var(--z-ease); }
.crmzt-app .wp-list-table tbody tr:hover { background: #F8FAFC !important; }
.crmzt-app .wp-list-table tbody td {
  padding: 16px !important;
  border-bottom: 1px solid var(--z-border) !important;
  color: var(--z-text) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
.crmzt-app .wp-list-table tbody tr:last-child td { border-bottom: none !important; }
.crmzt-app .tablenav { padding: 0 !important; margin: 0 0 16px !important; }
.crmzt-app .tablenav .displaying-num { color: var(--z-text-2) !important; font-weight: 500; font-size: 12px; }
.crmzt-app .tablenav .pagination-links a {
  background: var(--z-bg); border: 1px solid var(--z-border); border-radius: 4px; padding: 4px 8px; font-weight: 600; text-decoration: none;
}
.crmzt-app .tablenav .pagination-links a:hover { background: var(--z-primary-lt); color: var(--z-primary); border-color: var(--z-primary); }
.crmzt-table-form .search-box { margin-bottom: 16px; margin-top: 0; }
.crmzt-table-form .search-box input[type="search"] {
  padding: 6px 12px; border: 1.5px solid var(--z-border); border-radius: var(--z-radius-sm); font-size: 13px;
}
.crmzt-table-form .search-box input[type="submit"] {
  background: var(--z-bg); border: 1.5px solid var(--z-border); border-radius: var(--z-radius-sm); color: var(--z-text-2); cursor: pointer; padding: 5px 12px; font-weight: 600;
}
.crmzt-table-form .search-box input[type="submit"]:hover { background: var(--z-primary-lt); color: var(--z-primary); border-color: var(--z-primary); }

/* ── Support Modal Component ── */
.crmzt-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.crmzt-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.crmzt-modal {
  background: var(--z-surface);
  border-radius: var(--z-radius-lg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 560px;
  margin: 16px;
  overflow: hidden;
  border: 1px solid var(--z-border);
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.2s ease;
}
.crmzt-modal-overlay.active .crmzt-modal {
  transform: translateY(0) scale(1);
}
.crmzt-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--z-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #FAFAFA;
}
.crmzt-modal-header-title h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--z-text);
}
.crmzt-modal-header-title p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--z-text-2);
}
.crmzt-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--z-text-muted);
  cursor: pointer;
  padding: 0 4px;
  transition: var(--z-ease);
}
.crmzt-modal-close:hover {
  color: var(--z-danger);
}
.crmzt-modal-body {
  padding: 24px;
  max-height: 75vh;
  overflow-y: auto;
}
.crmzt-modal-footer {
  padding: 16px 24px;
  background: #FAFAFA;
  border-top: 1px solid var(--z-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}