/* 5CX Settings Pro — Dialing / DTMF configuration + Live Dialer Monitor
   Loaded globally; activates only on the /settings control page. */

.cx5p-wrap {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cx5p-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, .22);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(212, 175, 55, .07), transparent 55%),
    linear-gradient(160deg, rgba(17, 24, 39, .92), rgba(5, 7, 11, .96));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.cx5p-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .75), transparent);
}
.cx5p-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.cx5p-title {
  display: flex; align-items: center; gap: .6rem;
  margin: 0; color: #f8fafc; font-size: .95rem; font-weight: 750; letter-spacing: -.01em;
}
.cx5p-title svg { width: 17px; height: 17px; color: #d4af37; }
.cx5p-sub { margin: .15rem 0 0; color: #64748b; font-size: .7rem; }
.cx5p-body { padding: 1.1rem 1.25rem 1.25rem; }

.cx5p-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .85rem 1rem; }
.cx5p-section {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: .2rem;
  margin-top: .35rem; padding-top: .85rem;
  border-top: 1px solid rgba(212, 175, 55, .16);
}
.cx5p-section-title {
  color: #d4af37; font-size: .68rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase;
}
.cx5p-section-sub { color: #64748b; font-size: .7rem; line-height: 1.4; }
.cx5p-field { display: flex; flex-direction: column; gap: .35rem; }
.cx5p-label {
  color: #94a3b8; font-size: .64rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.cx5p-hint { color: #475569; font-size: .66rem; line-height: 1.35; }
.cx5p-input, .cx5p-select {
  width: 100%; box-sizing: border-box; min-height: 2.5rem;
  padding: .5rem .7rem;
  color: #f1f5f9; font: inherit; font-size: .82rem;
  background: rgba(5, 7, 11, .82);
  border: 1px solid #26303f; border-radius: 10px;
}
.cx5p-input:focus, .cx5p-select:focus {
  outline: none; border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .16);
}
.cx5p-select option { background: #0b111a; color: #e2e8f0; }

.cx5p-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }
.cx5p-live-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .25rem 0 1rem; }
.cx5p-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.45rem; padding: .55rem 1rem;
  border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; font: inherit; font-size: .78rem; font-weight: 750;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.cx5p-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.cx5p-btn:hover { transform: translateY(-1px); }
.cx5p-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cx5p-btn-gold {
  color: #0b0d10;
  background: linear-gradient(140deg, #f0d585, #d4af37 62%, #b8912b);
  box-shadow: 0 10px 26px rgba(212, 175, 55, .28);
}
.cx5p-btn-ghost {
  color: #cbd5e1; background: rgba(30, 41, 59, .55); border-color: #334155;
}
.cx5p-btn-start { color: #06210f; background: linear-gradient(140deg, #7ef0a1, #34c25f); box-shadow: 0 10px 24px rgba(52, 194, 95, .25); }
.cx5p-btn-pause { color: #f7dfa6; background: rgba(120, 86, 20, .28); border-color: rgba(212, 175, 55, .45); }
.cx5p-btn-resume { color: #b7f5cd; background: rgba(24, 90, 55, .28); border-color: rgba(52, 194, 95, .45); }
.cx5p-btn-stop { color: #fca5a5; background: rgba(120, 30, 30, .28); border-color: rgba(239, 68, 68, .45); }

.cx5p-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid transparent;
}
.cx5p-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cx5p-pill.idle { color: #94a3b8; background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .28); }
.cx5p-pill.running { color: #4ade80; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35); }
.cx5p-pill.paused { color: #d4af37; background: rgba(212, 175, 55, .12); border-color: rgba(212, 175, 55, .35); }
.cx5p-pill.error { color: #f87171; background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); }
.cx5p-pill.running::before { animation: cx5p-blink 1.2s ease-in-out infinite; }
@keyframes cx5p-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.cx5p-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.cx5p-stat {
  padding: .7rem .85rem; border-radius: 11px;
  background: rgba(5, 7, 11, .65);
  border: 1px solid #1e293b; border-left-width: 3px;
}
.cx5p-stat.dialing { border-left-color: #f59e0b; }
.cx5p-stat.connected { border-left-color: #22c55e; }
.cx5p-stat.pressed1 { border-left-color: #d4af37; }
.cx5p-stat.failed { border-left-color: #ef4444; }
.cx5p-stat.pending { border-left-color: #64748b; }
.cx5p-stat.voicemail { border-left-color: #eab308; }
.cx5p-stat.cancelled { border-left-color: #fb7185; }
.cx5p-stat.agents { border-left-color: #34d399; }
.cx5p-stat.oncalls { border-left-color: #22d3ee; }
.cx5p-stat.talktime { border-left-color: #a78bfa; }
.cx5p-stat-num { color: #f8fafc; font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cx5p-stat-cap { margin-top: .3rem; color: #64748b; font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.cx5p-progress { height: 6px; border-radius: 999px; background: rgba(30, 41, 59, .8); overflow: hidden; margin-bottom: 1rem; }
.cx5p-progress > span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #d4af37, #f0d585); transition: width .5s ease; }

.cx5p-livebar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cx5p-livebar .cx5p-label { margin: 0; }
.cx5p-phones { display: flex; flex-wrap: wrap; gap: .55rem; min-height: 2.6rem; align-items: center; }
.cx5p-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .7rem; border-radius: 10px;
  background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35);
  color: #fcd34d; font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cx5p-phone svg { width: 14px; height: 14px; animation: cx5p-ring 1.1s ease-in-out infinite; }
@keyframes cx5p-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.cx5p-phone.idle-pulse { opacity: .5; }

.cx5p-list { display: flex; flex-direction: column; gap: .3rem; max-height: 320px; overflow-y: auto; margin-top: .4rem; }
.cx5p-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: 9px;
  background: rgba(5, 7, 11, .55); border: 1px solid #16202e;
  font-size: .76rem;
}
.cx5p-row-num { color: #e2e8f0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx5p-row-time { color: #475569; font-size: .66rem; font-variant-numeric: tabular-nums; }
.cx5p-badge {
  padding: .16rem .5rem; border-radius: 999px;
  font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.cx5p-badge.pending { color: #94a3b8; background: rgba(148, 163, 184, .14); }
.cx5p-badge.dialing { color: #fbbf24; background: rgba(245, 158, 11, .16); }
.cx5p-badge.connected { color: #4ade80; background: rgba(34, 197, 94, .16); }
.cx5p-badge.pressed1 { color: #f0d585; background: rgba(212, 175, 55, .18); }
.cx5p-badge.completed { color: #7dd3a0; background: rgba(34, 197, 94, .1); }
.cx5p-badge.failed { color: #f87171; background: rgba(239, 68, 68, .16); }
.cx5p-badge.cancelled { color: #fda4af; background: rgba(251, 113, 133, .16); }
.cx5p-empty { color: #475569; font-size: .74rem; padding: .6rem .1rem; }

.cx5p-trunks { display: flex; flex-wrap: wrap; gap: .55rem; min-height: 2.6rem; align-items: center; }
.cx5p-trunk {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .45rem .7rem; border-radius: 10px;
  background: rgba(212, 175, 55, .08); border: 1px solid rgba(212, 175, 55, .35);
  color: #e2e8f0; font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cx5p-trunk-name { letter-spacing: .02em; }
.cx5p-trunk-n { color: #d4af37; font-weight: 800; }

.cx5p-note { margin: 1rem 0 0; color: #64748b; font-size: .7rem; line-height: 1.5; }
.cx5p-note code { color: #cbd5e1; background: rgba(30, 41, 59, .6); padding: .05rem .3rem; border-radius: 5px; }

/* ---------------------------------------------------- campaign control form */
.cx5p-pill.gold { color: #f0d585; background: rgba(212, 175, 55, .14); border-color: rgba(212, 175, 55, .38); }

.cx5c-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }

.cx5c-progress {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1rem; border-radius: 12px;
  background: rgba(5, 7, 11, .6); border: 1px solid #1e293b;
  margin-bottom: .9rem;
}
.cx5c-pct {
  display: flex; align-items: baseline; flex: 0 0 auto;
  color: #f0d585; font-size: 2rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cx5c-pct-sign { font-size: 1rem; margin-left: .1rem; color: #b8912b; }
.cx5c-progress-main { flex: 1 1 auto; min-width: 0; }
.cx5c-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.cx5c-progress-title { color: #e2e8f0; font-size: .78rem; font-weight: 700; }
.cx5c-progress-rate { color: #64748b; font-size: .66rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx5c-bar { margin-bottom: 0; }

.cx5c-cps { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.cx5c-cps-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.cx5c-cps-head .cx5p-label { margin: 0; }
.cx5c-cps-num { width: 5rem; min-height: 2.25rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.cx5c-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px; outline: none;
  background: linear-gradient(90deg, #d4af37, #f0d585);
}
.cx5c-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 6px;
  background: #0b0d10; border: 2px solid #d4af37; cursor: pointer;
  box-shadow: 0 4px 12px rgba(212, 175, 55, .35);
}
.cx5c-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 6px;
  background: #0b0d10; border: 2px solid #d4af37; cursor: pointer;
}

.cx5c-schedule {
  margin-top: .35rem; padding: 1rem;
  border-radius: 12px;
  background: rgba(212, 175, 55, .045);
  border: 1px solid rgba(212, 175, 55, .18);
  display: flex; flex-direction: column; gap: .8rem;
}
.cx5c-schedule-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.cx5c-schedule-title {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  color: #f8fafc; font-size: .82rem; font-weight: 750;
}
.cx5c-schedule-title svg { width: 16px; height: 16px; color: #d4af37; }
.cx5c-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cx5c-schedule-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; }
.cx5c-inline { display: flex; gap: .5rem; align-items: stretch; }
.cx5c-inline .cx5p-input { flex: 1 1 auto; min-width: 0; }
.cx5c-inline .cx5p-btn { flex: 0 0 auto; white-space: nowrap; }
.cx5c-cancel { align-self: flex-start; }
.cx5c-warn { color: #fcd34d; }

@media (max-width: 560px) {
  .cx5c-progress { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .cx5c-progress-main { width: 100%; }
  .cx5c-pct { font-size: 1.7rem; }
  .cx5c-cps-head { flex-direction: column; align-items: flex-start; }
  .cx5c-cps-num { width: 100%; }
  .cx5c-inline { flex-direction: column; }
  .cx5c-inline .cx5p-btn { width: 100%; }
}

/* ------------------------------------------------------- sip trunk health */
.cx5t-block {
  margin-top: 1.15rem; padding-top: 1rem;
  border-top: 1px solid rgba(212, 175, 55, .16);
}
.cx5t-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.cx5t-recheck { min-height: 2rem; padding: .35rem .8rem; font-size: .7rem; }
.cx5t-list { display: flex; flex-direction: column; gap: .45rem; }
.cx5t-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border-radius: 10px;
  background: rgba(5, 7, 11, .6); border: 1px solid #1e293b;
}
.cx5t-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px;
  background: currentColor;
}
.cx5t-dot.ok { color: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .7); }
.cx5t-dot.bad { color: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, .7); }
.cx5t-main { flex: 1 1 auto; min-width: 0; }
.cx5t-name {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  color: #e2e8f0; font-size: .78rem; font-weight: 750;
}
.cx5t-mode {
  padding: .1rem .45rem; border-radius: 999px;
  color: #94a3b8; background: rgba(148, 163, 184, .12);
  font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.cx5t-reason { margin-top: .2rem; color: #64748b; font-size: .68rem; line-height: 1.35; }
.cx5t-state {
  flex: 0 0 auto; padding: .25rem .6rem; border-radius: 999px;
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid transparent;
}
.cx5t-state.ok { color: #4ade80; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35); }
.cx5t-state.bad { color: #f87171; background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); }

@media (max-width: 560px) {
  .cx5t-row { flex-wrap: wrap; }
  .cx5t-state { margin-left: auto; }
}

/* ------------------------------------------------------- audio prompts */
.cx5a-slots { display: flex; flex-direction: column; gap: .9rem; }
.cx5a-slot {
  border-radius: 12px;
  border: 1px solid #1e293b;
  background: rgba(5, 7, 11, .62);
  padding: .9rem 1rem 1rem;
}
.cx5a-slot-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .7rem; flex-wrap: wrap; margin-bottom: .8rem;
}
.cx5a-slot-title { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.cx5a-slot-name { color: #f1f5f9; font-size: .84rem; font-weight: 750; }
.cx5a-slot-meta { color: #64748b; font-size: .7rem; }
.cx5a-slot-actions { display: flex; align-items: center; gap: .4rem; }

.cx5a-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0;
  color: #cbd5e1; background: rgba(30, 41, 59, .5);
  border: 1px solid #334155; border-radius: 10px;
  cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cx5a-icon svg { width: 15px; height: 15px; }
.cx5a-icon:hover:not(:disabled) { color: #f0d585; border-color: rgba(212, 175, 55, .5); }
.cx5a-icon:disabled { opacity: .4; cursor: not-allowed; }
.cx5a-icon.playing { color: #d4af37; border-color: #d4af37; background: rgba(212, 175, 55, .16); }
.cx5a-danger:hover:not(:disabled) { color: #fca5a5; border-color: rgba(239, 68, 68, .5); }

.cx5a-upload {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.1rem; padding: 0 .75rem;
  color: #cbd5e1; background: rgba(30, 41, 59, .5);
  border: 1px solid #334155; border-radius: 10px;
  font-size: .74rem; font-weight: 750; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.cx5a-upload svg { width: 15px; height: 15px; }
.cx5a-upload:hover { color: #f0d585; border-color: rgba(212, 175, 55, .5); }

.cx5a-body { display: flex; flex-direction: column; gap: .6rem; }
.cx5a-text { min-height: 3.6rem; resize: vertical; font-family: inherit; line-height: 1.45; }
.cx5a-controls { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(220px, 2fr); gap: .6rem; }
.cx5a-voice-hint { margin: 0; font-size: .7rem; line-height: 1.4; color: #64748b; min-height: 1em; }
.cx5a-voice-hint.studio { color: #c9b06a; }
.cx5a-voice-hint.tip { color: #94a3b8; }

.cx5a-tune {
  display: flex; flex-direction: column; gap: .55rem;
  padding: .75rem .85rem;
  border: 1px solid #1e293b; border-radius: 12px;
  background: rgba(2, 6, 12, .5);
}
.cx5a-tune-top { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; }
.cx5a-tune-title {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #8a7a3f;
}
.cx5a-preset { max-width: 15rem; }

.cx5a-slider { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 3.2rem; align-items: center; gap: .6rem; }
.cx5a-slider label { font-size: .7rem; color: #94a3b8; }
.cx5a-slider output { font-size: .7rem; font-weight: 700; color: #d4af37; text-align: right; font-variant-numeric: tabular-nums; }
.cx5a-slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(212, 175, 55, .55), rgba(212, 175, 55, .12));
  outline: none; cursor: pointer;
}
.cx5a-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f4e3a1, #d4af37);
  border: 1px solid #0b0e14;
  box-shadow: 0 0 8px rgba(212, 175, 55, .6);
  cursor: pointer;
}
.cx5a-slider input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: #d4af37; border: 1px solid #0b0e14;
  box-shadow: 0 0 8px rgba(212, 175, 55, .6);
  cursor: pointer;
}
.cx5a-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cx5a-state { color: #64748b; font-size: .7rem; }
.cx5a-state.working { color: #d4af37; }
.cx5a-state.ok { color: #4ade80; }
.cx5a-state.error { color: #f87171; }

/* ------------------------------------------------------------- call lists */
.cx5l-editor { display: flex; flex-direction: column; gap: .7rem; }
.cx5l-text {
  min-height: 11rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; line-height: 1.6; letter-spacing: .01em;
}
.cx5l-upload { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cx5l-upload-name {
  color: #64748b; font-size: .7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30rem;
}
.cx5l-force {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .75rem; border-radius: 10px;
  border: 1px solid #1e293b; background: rgba(2, 6, 12, .5);
  color: #94a3b8; font-size: .7rem; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.cx5l-force:hover { border-color: rgba(212, 175, 55, .45); color: #cbd5e1; }
.cx5l-force input { width: 15px; height: 15px; accent-color: #d4af37; cursor: pointer; flex: 0 0 auto; }

.cx5l-parse { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-height: 1.9rem; }
.cx5l-idle { color: #475569; font-size: .7rem; }
.cx5l-chip {
  display: inline-flex; align-items: baseline; gap: .35rem;
  padding: .28rem .6rem; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  border: 1px solid transparent; white-space: nowrap;
}
.cx5l-chip b { font-size: .78rem; font-variant-numeric: tabular-nums; }
.cx5l-chip.total { color: #94a3b8; background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .26); }
.cx5l-chip.ready { color: #f0d585; background: rgba(212, 175, 55, .14); border-color: rgba(212, 175, 55, .38); }
.cx5l-chip.dup { color: #fbbf24; background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); }
.cx5l-chip.skip { color: #f87171; background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .3); }

.cx5l-preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  padding: .6rem .7rem; border-radius: 10px;
  border: 1px dashed #1e293b; background: rgba(2, 6, 12, .4);
}
.cx5l-preview-label {
  color: #8a7a3f; font-size: .62rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; margin-right: .2rem;
}
.cx5l-num {
  color: #e2e8f0; font-size: .7rem; font-variant-numeric: tabular-nums;
  background: rgba(30, 41, 59, .6); border: 1px solid #24334a;
  padding: .16rem .45rem; border-radius: 7px;
}
.cx5l-more { color: #64748b; font-size: .66rem; padding-left: .2rem; }

.cx5l-actions { margin-top: .2rem; }
.cx5l-danger { color: #fca5a5; border-color: rgba(239, 68, 68, .35); }
.cx5l-danger:hover { color: #fecaca; border-color: rgba(239, 68, 68, .6); background: rgba(120, 30, 30, .22); }

/* customer card preview */
.cx5l-preview.card-mode { display: block; padding: .75rem .8rem; }
.cx5l-card {
  margin-top: .5rem;
  display: flex; flex-direction: column; gap: 1px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid #1e293b; background: rgba(2, 6, 12, .55);
}
.cx5l-row {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .4rem .65rem;
  background: rgba(15, 23, 42, .4);
}
.cx5l-row + .cx5l-row { border-top: 1px solid rgba(148, 163, 184, .08); }
.cx5l-row-num { background: rgba(212, 175, 55, .08); }
.cx5l-key {
  flex: 0 0 auto; width: 8.5rem;
  color: #8a7a3f; font-size: .62rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.cx5l-row-num .cx5l-key { color: #d4af37; }
.cx5l-val {
  flex: 1 1 auto; min-width: 0;
  color: #e2e8f0; font-size: .74rem;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.cx5l-row-num .cx5l-val { color: #f8fafc; font-weight: 700; }

/* list viewer */
.cx5l-viewer { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }
.cx5l-viewer-bar { display: flex; align-items: center; gap: .7rem; }
.cx5l-viewer-bar .cx5p-input { flex: 1 1 auto; min-width: 0; }
.cx5l-viewer-count { color: #64748b; font-size: .68rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx5l-leads { display: flex; flex-direction: column; gap: .5rem; }
.cx5l-empty {
  padding: 1.3rem .8rem; text-align: center;
  color: #475569; font-size: .74rem;
  border: 1px dashed #1e293b; border-radius: 10px; background: rgba(2, 6, 12, .4);
}
.cx5l-lead {
  padding: .65rem .75rem; border-radius: 10px;
  border: 1px solid #1e293b; background: rgba(15, 23, 42, .45);
  transition: border-color .15s ease;
}
.cx5l-lead:hover { border-color: rgba(212, 175, 55, .35); }
.cx5l-lead-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.cx5l-lead-num { color: #f8fafc; font-size: .82rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.cx5l-lead-name { margin-top: .2rem; color: #cbd5e1; font-size: .74rem; font-weight: 600; }
.cx5l-lead-fields { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.cx5l-lead-field {
  display: inline-flex; align-items: baseline; gap: .3rem;
  padding: .16rem .45rem; border-radius: 7px;
  background: rgba(30, 41, 59, .6); border: 1px solid #24334a;
  color: #cbd5e1; font-size: .66rem; overflow-wrap: anywhere;
}
.cx5l-lead-field b {
  color: #8a7a3f; font-size: .58rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.cx5l-status {
  flex: 0 0 auto; padding: .18rem .5rem; border-radius: 999px;
  font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent;
}
.cx5l-status.pending { color: #94a3b8; background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .28); }
.cx5l-status.dialing { color: #f0d585; background: rgba(212, 175, 55, .14); border-color: rgba(212, 175, 55, .38); }
.cx5l-status.connected { color: #7dd3fc; background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .3); }
.cx5l-status.pressed1 { color: #86efac; background: rgba(74, 222, 128, .14); border-color: rgba(74, 222, 128, .34); }
.cx5l-status.completed { color: #86efac; background: rgba(52, 194, 95, .14); border-color: rgba(52, 194, 95, .34); }
.cx5l-status.failed { color: #fca5a5; background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .3); }
.cx5l-viewer-foot { display: flex; justify-content: center; }
.cx5l-view.active { color: #f0d585; border-color: rgba(212, 175, 55, .6); background: rgba(212, 175, 55, .12); }

@media (max-width: 560px) {
  .cx5a-controls { grid-template-columns: 1fr; }
  .cx5a-slot-actions { width: 100%; }
  .cx5a-actions .cx5p-btn { flex: 1 1 auto; justify-content: center; }
  .cx5l-actions .cx5p-btn { flex: 1 1 auto; justify-content: center; }
  .cx5l-text { min-height: 9rem; }
  .cx5l-viewer-bar { flex-direction: column; align-items: stretch; }
  .cx5l-viewer-count { white-space: normal; }
  .cx5l-key { width: 6.5rem; }
}

/* ---------------------------------------------- settings (rooms / trunks / caller / danger) */
.cx5s-stack { display: flex; flex-direction: column; gap: 1.25rem; }

.cx5s-addrow { display: flex; gap: .6rem; align-items: stretch; margin-bottom: 1rem; }
.cx5s-addrow .cx5p-input { flex: 1 1 auto; min-width: 0; }
.cx5s-addrow .cx5p-btn { flex: 0 0 auto; white-space: nowrap; }

.cx5s-list { display: flex; flex-direction: column; gap: .5rem; }

.cx5s-row {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .65rem .8rem; border-radius: 11px;
  background: rgba(5, 7, 11, .6); border: 1px solid #1e293b;
}
.cx5s-row-main { flex: 1 1 auto; min-width: 0; }
.cx5s-row-name {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  color: #f8fafc; font-size: .82rem; font-weight: 750;
}
.cx5s-row-id {
  margin-top: .2rem; color: #64748b; font-size: .68rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
.cx5s-row-actions { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }

.cx5s-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; background: currentColor; }
.cx5s-dot.on { color: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .7); }
.cx5s-dot.off { color: #eab308; box-shadow: 0 0 8px rgba(234, 179, 8, .6); }

.cx5s-mini { min-height: 2.05rem; padding: .35rem .7rem; font-size: .7rem; }
.cx5s-icon-btn { padding: .35rem .55rem; }
.cx5s-icon-btn svg { width: 14px; height: 14px; }

.cx5t-dot.unknown { color: #475569; box-shadow: none; }
.cx5t-state {
  color: #94a3b8; background: rgba(148, 163, 184, .12);
  border-color: rgba(148, 163, 184, .28);
}

.cx5s-form {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1rem; margin-bottom: 1.1rem;
  border-radius: 12px;
  background: rgba(5, 7, 11, .55);
  border: 1px solid #1e293b;
}
.cx5s-form-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.cx5s-radios { display: flex; gap: 1rem; flex-wrap: wrap; }
.cx5s-radio {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #cbd5e1; font-size: .74rem; font-weight: 650; cursor: pointer;
}
.cx5s-radio input { accent-color: #d4af37; }
.cx5s-textarea { min-height: 6rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; }

.cx5s-caller-field { max-width: 26rem; }

.cx5s-danger { border-color: rgba(239, 68, 68, .35); }
.cx5s-danger::after { background: linear-gradient(90deg, transparent, rgba(239, 68, 68, .7), transparent); }
.cx5s-danger-title { color: #f87171; }
.cx5s-danger-title svg { color: #ef4444; }
.cx5s-danger-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1rem; border-radius: 11px;
  background: rgba(239, 68, 68, .06); border: 1px solid rgba(239, 68, 68, .2);
}
.cx5s-danger-name { color: #f8fafc; font-size: .82rem; font-weight: 750; }
.cx5s-danger-note { margin-top: .2rem; color: #94a3b8; font-size: .72rem; }

@media (max-width: 560px) {
  .cx5s-addrow { flex-direction: column; }
  .cx5s-addrow .cx5p-btn { width: 100%; justify-content: center; }
  .cx5s-row-actions { width: 100%; }
  .cx5s-row-actions .cx5p-btn { flex: 1 1 auto; justify-content: center; }
  .cx5s-icon-btn { flex: 0 0 auto; }
  .cx5s-danger-row { flex-direction: column; align-items: stretch; }
  .cx5s-danger-row .cx5p-btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------ softphone / zoiper setup */
.cx5sf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: .5rem; }
.cx5sf-row {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: 10px;
  background: rgba(5, 7, 11, .62); border: 1px solid #1e293b;
}
.cx5sf-key {
  color: #8a7a3f; font-size: .62rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.cx5sf-val {
  min-width: 0; color: #f8fafc; font-size: .8rem; font-weight: 650;
  overflow-wrap: anywhere;
}
.cx5sf-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0;
  color: #94a3b8; background: rgba(30, 41, 59, .55);
  border: 1px solid #334155; border-radius: 9px;
  cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cx5sf-copy svg { width: 15px; height: 15px; }
.cx5sf-copy:hover { color: #f0d585; border-color: rgba(212, 175, 55, .5); }
.cx5sf-copy.cx5sf-copied {
  color: #4ade80; border-color: rgba(34, 197, 94, .55); background: rgba(34, 197, 94, .12);
}

.cx5sf-state { margin: .85rem 0 0; color: #94a3b8; font-size: .72rem; line-height: 1.45; }

/* one card per phone */
.cx5sf-phones {
  margin-top: 1.15rem; padding-top: 1rem;
  border-top: 1px solid rgba(212, 175, 55, .16);
}
.cx5sf-phones-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.cx5sf-addrow { display: flex; gap: .6rem; margin: .75rem 0 .9rem; flex-wrap: wrap; }
.cx5sf-addrow .cx5p-input { flex: 1 1 13rem; min-width: 0; }
.cx5sf-list { display: flex; flex-direction: column; gap: .7rem; }
.cx5sf-acc {
  padding: .75rem .85rem .8rem; border-radius: 12px;
  background: rgba(5, 7, 11, .62); border: 1px solid #1e293b;
  transition: border-color .15s ease, opacity .15s ease;
}
.cx5sf-acc.off { opacity: .6; }
.cx5sf-acc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem;
}
.cx5sf-acc-id { display: flex; align-items: center; gap: .5rem; min-width: 0; flex-wrap: wrap; }
.cx5sf-acc-name { color: #f8fafc; font-size: .85rem; font-weight: 750; overflow-wrap: anywhere; }
.cx5sf-tag {
  padding: .16rem .45rem; border-radius: 6px;
  color: #e5c96b; background: rgba(212, 175, 55, .12);
  border: 1px solid rgba(212, 175, 55, .3);
  font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.cx5sf-acc-tools { display: flex; align-items: center; gap: .55rem; }
.cx5sf-acc-state { margin: .6rem 0 0; color: #64748b; font-size: .68rem; line-height: 1.4; }
.cx5sf-acc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* shared on/off switch */
.cx5sw { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.cx5sw input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.cx5sw-track {
  position: relative; display: block; box-sizing: border-box;
  width: 2.6rem; height: 1.45rem; border-radius: 999px;
  background: rgba(51, 65, 85, .8); border: 1px solid #334155;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cx5sw-thumb {
  position: absolute; top: 50%; left: .13rem;
  width: 1.05rem; height: 1.05rem; border-radius: 999px;
  background: #94a3b8; transform: translateY(-50%);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background .18s ease;
}
.cx5sw input:checked + .cx5sw-track {
  background: linear-gradient(140deg, rgba(52, 194, 95, .92), rgba(30, 150, 74, .92));
  border-color: rgba(52, 194, 95, .8);
  box-shadow: 0 0 14px rgba(52, 194, 95, .3);
}
.cx5sw input:checked + .cx5sw-track .cx5sw-thumb { transform: translate(1.27rem, -50%); background: #06210f; }
.cx5sw input:disabled + .cx5sw-track { opacity: .5; }
.cx5sw input:focus-visible + .cx5sw-track { outline: 2px solid #d4af37; outline-offset: 2px; }

/* trunk rotation row */
.cx5tr-rot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .9rem; margin-bottom: 1rem; padding: .8rem .9rem;
  border-radius: 12px; background: rgba(5, 7, 11, .62); border: 1px solid #1e293b;
}
.cx5tr-rot-text { min-width: 0; }
.cx5tr-rot-text .cx5p-hint { margin: .3rem 0 0; }

.cx5sf-steps {
  margin-top: 1.15rem; padding-top: .9rem;
  border-top: 1px solid rgba(212, 175, 55, .16);
}
.cx5sf-steps ol {
  margin: .5rem 0 0; padding-left: 1.15rem;
  color: #94a3b8; font-size: .74rem; line-height: 1.6;
}
.cx5sf-steps li { margin-bottom: .2rem; }
.cx5sf-steps strong { color: #e2e8f0; }

@media (max-width: 560px) {
  .cx5sf-grid { grid-template-columns: 1fr; }
  .cx5sf-row { grid-template-columns: 4.75rem minmax(0, 1fr) auto; }
  .cx5sf-state { font-size: .7rem; }
}

/* ------------------------------- dnc / recordings / activity / account */
.cx5s-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }

.cx5s-headtools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.cx5s-toolbar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.cx5s-search {
  position: relative; display: flex; align-items: center; flex: 1 1 auto;
  color: #64748b;
}
.cx5s-search svg { position: absolute; left: .7rem; width: 15px; height: 15px; pointer-events: none; }
.cx5s-search input {
  width: 100%; box-sizing: border-box; min-height: 2.5rem;
  padding: .5rem .7rem .5rem 2.15rem;
  color: #f1f5f9; font: inherit; font-size: .82rem;
  background: rgba(5, 7, 11, .82);
  border: 1px solid #26303f; border-radius: 10px;
}
.cx5s-search input:focus { outline: none; border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212, 175, 55, .16); }

.cx5s-avatar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 11px;
  color: #d4af37; background: rgba(212, 175, 55, .1); border: 1px solid rgba(212, 175, 55, .22);
}
.cx5s-avatar svg { width: 17px; height: 17px; }

.cx5s-tag {
  display: inline-block; margin-left: .5rem; padding: .1rem .45rem;
  border-radius: 6px; font-family: inherit; font-size: .6rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: #94a3b8; background: #1e293b;
}

.cx5s-row.cx5s-act { align-items: flex-start; }
.cx5s-act-dot { flex: 0 0 auto; margin-top: .45rem; width: 9px; height: 9px; border-radius: 3px; background: currentColor; }
.cx5s-act-dot.auth { color: #d4af37; box-shadow: 0 0 8px rgba(212, 175, 55, .6); }
.cx5s-act-dot.call { color: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .6); }
.cx5s-act-dot.campaign { color: #eab308; box-shadow: 0 0 8px rgba(234, 179, 8, .55); }
.cx5s-act-dot.system { color: #94a3b8; }
.cx5s-act-text { color: #f8fafc; font-size: .82rem; font-weight: 600; line-height: 1.4; }

a.cx5p-btn { text-decoration: none; }

.cx5s-note {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .7rem .8rem; border-radius: 10px;
  color: #fbbf24; background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .22);
  font-size: .72rem; line-height: 1.45;
}
.cx5s-note svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: .1rem; }
.cx5s-note strong { color: #fde68a; }

.cx5s-acc-form { max-width: 32rem; }

/* Account → Connected devices */
.cx5s-devices-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.cx5s-devices-title { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cx5s-devices-title .cx5p-section-title { display: inline-flex; align-items: center; gap: .45rem; }
.cx5s-devices-title .cx5p-section-title svg { width: 12px; height: 12px; flex: 0 0 auto; }
.cx5s-device .cx5s-avatar { flex: 0 0 auto; }
.cx5s-device-user { font-weight: 800; white-space: nowrap; }
.cx5s-device .cx5s-row-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.cx5s-device .cx5s-row-name { flex-wrap: wrap; }
.cx5s-dot.gone { color: #64748b; box-shadow: none; }
.cx5s-device.cx5s-device-off .cx5s-avatar,
.cx5s-device.cx5s-device-off .cx5s-row-main { opacity: .55; }

@media (max-width: 560px) {
  .cx5s-devices-head { align-items: flex-start; }
  .cx5s-devices-head .cx5s-headtools { width: 100%; justify-content: space-between; }
  .cx5s-device-user { white-space: normal; }
}

/* ------------------------------------------------------------- leads (/campaigns) */
.cx5s-chips { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .9rem; }
.cx5s-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .7rem; border-radius: 9px;
  color: #94a3b8; font: inherit; font-size: .7rem; font-weight: 700;
  background: rgba(30, 41, 59, .5); border: 1px solid #26303f;
  cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cx5s-chip:hover { color: #e2e8f0; border-color: #3b4a60; }
.cx5s-chip.on {
  color: #f0d585; background: rgba(212, 175, 55, .12); border-color: rgba(212, 175, 55, .5);
}
.cx5s-chip b {
  color: inherit; font-size: .68rem; font-weight: 800;
  padding-left: .1rem; opacity: .85; font-variant-numeric: tabular-nums;
}

.cx5s-row.cx5s-lead { align-items: flex-start; }
.cx5s-row.cx5s-lead .cx5s-avatar { margin-top: .1rem; }
.cx5s-lead-name {
  padding: .1rem .45rem; border-radius: 6px;
  color: #cbd5e1; background: #1e293b;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .68rem; font-weight: 700; letter-spacing: 0;
}
.cx5s-lead-fields { display: flex; gap: .35rem .5rem; flex-wrap: wrap; margin-top: .4rem; }
.cx5s-lead-field {
  display: inline-flex; align-items: baseline; gap: .3rem; max-width: 16rem;
  padding: .15rem .45rem; border-radius: 7px;
  color: #94a3b8; background: rgba(30, 41, 59, .45); border: 1px solid rgba(148, 163, 184, .14);
  font-size: .66rem; overflow-wrap: anywhere;
}
.cx5s-lead-field b { color: #64748b; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .58rem; }

.cx5s-out {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  padding: .28rem .6rem; border-radius: 8px;
  font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #94a3b8; background: rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .28);
}
.cx5s-out-pending { color: #94a3b8; background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .3); }
.cx5s-out-dialing { color: #38bdf8; background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .35); }
.cx5s-out-connected { color: #4ade80; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .38); }
.cx5s-out-pressed1 { color: #f0d585; background: rgba(212, 175, 55, .14); border-color: rgba(212, 175, 55, .45); }
.cx5s-out-completed { color: #cbd5e1; background: rgba(148, 163, 184, .14); border-color: rgba(148, 163, 184, .32); }
.cx5s-out-failed { color: #f87171; background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .38); }

.cx5s-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .85rem;
  border-top: 1px solid rgba(148, 163, 184, .12);
}
.cx5s-foot-note { color: #64748b; font-size: .7rem; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .cx5s-chip { flex: 1 1 auto; justify-content: center; }
  .cx5s-lead-field { max-width: none; }
  .cx5s-foot .cx5p-btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------ password gate (protected panels) */
.cx5p-lock {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem 2.4rem;
}
.cx5p-lock-box {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  width: 100%; max-width: 330px; text-align: center;
}
.cx5p-lock-icon { color: #d4af37; display: inline-flex; }
.cx5p-lock-icon svg { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(212, 175, 55, .45)); }
.cx5p-lock-title { margin: .1rem 0 0; color: #f8fafc; font-size: .95rem; font-weight: 750; }
.cx5p-lock-sub { margin: 0; color: #64748b; font-size: .72rem; line-height: 1.4; }
.cx5p-lock-input { text-align: center; }
.cx5p-lock-box .cx5p-btn { width: 100%; justify-content: center; }
.cx5p-lock-err { margin: 0; color: #fca5a5; font-size: .7rem; font-weight: 700; }

/* disabled SIP trunk row */
.cx5s-trunk.off { opacity: .55; }
.cx5s-trunk .cx5sw { flex: 0 0 auto; }