:root {
  --app-purple: #6f2dbd;
  --app-purple-dark: #51158f;
  --app-pink: #e91e8f;
  --app-navy: #111a38;
  --app-bg: #f5f7fb;
  --app-border: #e4e8f0;
  --app-muted: #667085;
  --tblr-primary: #6f2dbd;
  --tblr-primary-rgb: 111, 45, 189;
}

body { background: var(--app-bg); color: #20263a; font-size: 14px; }
a { text-decoration: none; }
.app-container { width: 100%; max-width: none; margin: 0; padding-right: 26px; padding-left: 26px; }
.app-shell { min-height: 100vh; }
.app-sidebar { overflow: visible !important; background: linear-gradient(180deg, #141936 0%, #20204a 58%, #421457 100%); border: 0; box-shadow: 10px 0 35px rgba(22, 22, 55, .08); }
.app-sidebar .container-fluid { min-height: 100%; overflow: hidden; }
.app-sidebar .navbar-collapse, .app-sidebar #sidebar-menu { max-height: none !important; overflow-x: hidden !important; overflow-y: hidden !important; scrollbar-width: none; }
.app-sidebar .navbar-collapse::-webkit-scrollbar, .app-sidebar #sidebar-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }
.app-brand { height: auto; min-height: 84px; display: flex; align-items: center; gap: 11px; color: #fff !important; padding: 12px 8px; }
.app-brand-logo { width: 47px; height: 47px; border-radius: 13px; padding: 5px; object-fit: contain; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.app-brand > span { display: flex; flex-direction: column; font-size: 17px; line-height: 1.15; letter-spacing: -.02em; }
.app-brand > span strong { display: inline; color: #f2b7df; }
.app-brand small { margin-top: 5px; color: rgba(255,255,255,.5); font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.app-sidebar .nav-link { margin: 3px 0; border-radius: 9px; color: rgba(255,255,255,.68); min-height: 43px; display: flex; align-items: center; transition: .18s ease; }
.app-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(2px); }
.app-sidebar .nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(233,30,143,.28), rgba(111,45,189,.32)); box-shadow: inset 3px 0 var(--app-pink); }
.app-sidebar .nav-link-icon { width: 24px; margin-right: 9px; text-align: center; font-size: 17px; }
.app-sidebar-footer { margin-top: auto; padding: 20px 0 12px; width: 100%; }
.app-sidebar-footer .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.sidebar-toggle { position: absolute; top: 22px; right: -14px; z-index: 3; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: #272050; color: #fff; box-shadow: 0 4px 14px rgba(13,14,35,.22); transition: transform .2s ease; }
.sidebar-toggle:hover { background: var(--app-purple); }
.nav-group-toggle { width: 100%; border: 0; background: transparent; text-align: left; }
.nav-group-chevron { margin-left: auto; font-size: 11px; transition: transform .18s ease; }
.nav-group-toggle[aria-expanded="true"] .nav-group-chevron { transform: rotate(180deg); }
.nav-submenu { display: grid; gap: 1px; padding: 2px 0 5px 21px; }
.nav-submenu .nav-link { min-height: 35px; font-size: 12px; }
.nav-submenu .nav-link-icon { font-size: 13px; }
.system-online { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.06); }
.system-online > span { width: 9px; height: 9px; flex: 0 0 9px; background: #3dd598; border-radius: 50%; box-shadow: 0 0 0 5px rgba(61,213,152,.12); }
.system-online div { display: flex; flex-direction: column; }
.system-online strong { color: #fff; font-size: 12px; }
.system-online small { color: rgba(255,255,255,.48); font-size: 10px; }
.app-content { padding: 32px 0 48px; }
.app-alert { display: flex; align-items: flex-start; gap: 10px; border: 0; box-shadow: 0 5px 18px rgba(22,30,60,.06); }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-header > div:first-child { margin-right: auto; margin-left: 0; text-align: left; }
.page-header h1, .page-title { margin: 2px 0 5px; color: #20263a; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.page-header p { margin: 0; color: var(--app-muted); font-size: 14px; }
.page-pretitle, .eyebrow { margin: 0 0 3px !important; color: var(--app-purple) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.app-page-header { align-items: center; }
.page-illustration { width: 64px; height: 64px; object-fit: contain; opacity: .9; }

.panel, .channel-card, .metrics article { background: #fff; border: 1px solid var(--app-border); border-radius: 12px; box-shadow: 0 5px 22px rgba(24, 35, 70, .045); }
.panel { margin-bottom: 20px; padding: 21px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.panel h2, .panel-title h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.panel h3 { margin: 24px 0 9px; font-size: 14px; font-weight: 700; }
.panel p, .panel-title p { margin: 3px 0 0; color: var(--app-muted); font-size: 13px; }

.metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.dashboard-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
.usage-metrics { grid-template-columns: repeat(5,minmax(0,1fr)); }
.usage-metrics strong { font-size: 21px; }
.section-heading { display: flex; justify-content: space-between; margin: 30px 0 14px; }
.section-heading h2 { margin: 1px 0 3px; font-size: 19px; }
.section-heading p { margin: 0; color: var(--app-muted); font-size: 12px; }
.dashboard-header { align-items: center; }
.period-filter { display: inline-flex; align-items: center; gap: 3px; border: 1px solid #e0e4ec; border-radius: 12px; padding: 4px; background: #fff; box-shadow: 0 5px 18px rgba(32,38,58,.05); }
.period-filter > span { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: var(--app-muted); font-size: 11px; font-weight: 600; }
.period-option { border-radius: 8px; padding: 7px 11px; color: #596174; font-size: 11px; font-weight: 650; transition: .16s ease; }
.period-option:hover { background: #f2edf9; color: var(--app-purple); }
.period-option.active { background: var(--app-purple); color: #fff; box-shadow: 0 4px 10px rgba(111,45,189,.2); }
.dashboard-chart-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(300px,1fr); gap: 18px; }
.chart-panel { min-width: 0; }
.chart-box { position: relative; height: 290px; }
.chart-wide .chart-box { height: 310px; }
.metrics article { position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden; padding: 18px; }
.metrics article::before { position: absolute; top: 0; left: 0; width: 100%; height: 3px; content: ""; background: #d9dce7; }
.metrics article:nth-child(1)::before { background: var(--app-purple); }
.metrics article:nth-child(2)::before { background: #f0a028; }
.metrics article:nth-child(3)::before { background: #3085d6; }
.metrics article.success-metric::before { background: #18a773; }
.metrics article.danger-metric::before { background: #d64c63; }
.metrics span { display: block; color: var(--app-muted); font-size: 12px; font-weight: 600; }
.metrics strong { display: block; margin-top: 5px; color: #242a3d; font-size: 27px; line-height: 1; }
.success-metric strong { color: #13815b; }
.danger-metric strong { color: #bd3b52; }
.metric-icon { display: grid !important; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; font-size: 17px !important; }
.metric-icon.purple { background: #efe7fa; color: var(--app-purple) !important; }
.metric-icon.amber { background: #fff1d8; color: #a3680b !important; }
.metric-icon.blue { background: #e5f1ff; color: #2879c8 !important; }
.metric-icon.green { background: #e1f6ed; color: #13815b !important; }
.metric-icon.red { background: #fde8ec; color: #bd3b52 !important; }

.button, button.primary, button.secondary, .contact-actions button, .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; border: 0; border-radius: 7px; padding: 8px 13px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.button.primary, button.primary { background: var(--app-purple); color: #fff; box-shadow: 0 4px 11px rgba(111,45,189,.18); }
.button.primary:hover, button.primary:hover { background: var(--app-purple-dark); color: #fff; }
.button.secondary, button.secondary { border: 1px solid #dce0e8; background: #fff; color: #343b4f; }
.button.secondary:hover, button.secondary:hover { border-color: #c8cdda; background: #f8f9fc; color: var(--app-purple); }
.icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; min-width: 34px; border: 1px solid #dce0e8; border-radius: 7px; padding: 0; background: #fff; color: #343b4f; cursor: pointer; transition: .15s ease; }
.icon-button:hover { border-color: #bda8da; background: #f8f4fc; color: var(--app-purple); }
.icon-button:disabled { cursor: not-allowed; opacity: .45; }
.provider-table-logo { width: 38px; height: 28px; object-fit: contain; }
.provider-fallback-logo { display: grid; place-items: center; width: 38px; height: 30px; border-radius: 7px; background: #efe7fa; color: var(--app-purple); font-size: 17px; }
.wide { width: 100%; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.channel-card { position: relative; padding: 20px; color: #242a3d; transition: .18s ease; }
.channel-card::after { position: absolute; right: 18px; bottom: 18px; font-family: bootstrap-icons; color: var(--app-purple); content: "\f138"; }
.channel-card:hover { border-color: rgba(111,45,189,.3); box-shadow: 0 12px 30px rgba(45,30,90,.09); transform: translateY(-2px); }
.channel-card h2 { margin: 14px 0 5px; font-size: 17px; }
.channel-card p { color: var(--app-muted); font-size: 13px; }
.channel-card small { color: var(--app-purple); font-weight: 600; }
.channel-card-top { display: flex; align-items: center; justify-content: space-between; }
.channel-image { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #fde7f3; }
.channel-image img { width: 25px; height: 25px; object-fit: contain; }
.channel-status { color: var(--app-muted); font-size: 11px; font-weight: 600; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #a9afbc; }
.status-dot.on { background: #18a773; box-shadow: 0 0 0 4px rgba(24,167,115,.1); }

.form-grid { max-width: 1080px; }
.form-section { display: grid; gap: 14px; }
.form-section > h2 { margin-bottom: 0; }
.form-grid label:not(.check), .inline-form label { display: grid; gap: 6px; color: #444c60; font-size: 12px; font-weight: 600; }
.form-grid input, .form-grid textarea, .form-grid select, .inline-form input, .webhook-box input { width: 100%; border: 1px solid #d9dee8; border-radius: 7px; padding: 9px 11px; background: #fff; color: #20263a; font: inherit; }
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus, .inline-form input:focus { border-color: var(--app-purple); outline: 0; box-shadow: 0 0 0 3px rgba(111,45,189,.1); }
.form-grid textarea { resize: vertical; }
.form-grid .row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 0; }
.form-grid .row > * { width: auto; margin: 0; padding: 0; }
.form-grid .row.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.check input { width: auto; }
.codec-fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.codec-fieldset legend { margin-bottom: 7px; color: #444c60; font-size: 12px; font-weight: 600; }
.codec-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-bottom: 7px; }
.codec-option { display: flex !important; align-items: center; gap: 9px !important; border: 1px solid #dce0e8; border-radius: 9px; padding: 11px 12px; background: #fff; cursor: pointer; }
.codec-option:has(input:checked) { border-color: var(--app-purple); background: #faf7fe; box-shadow: 0 0 0 2px rgba(111,45,189,.08); }
.codec-option input { width: auto !important; accent-color: var(--app-purple); }
.codec-option span { display: grid; gap: 1px; }
.codec-option strong { color: #343b4f; font-size: 12px; }
.codec-option small { color: var(--app-muted); font-size: 10px; font-weight: 400; }
.help, .form-hint { color: var(--app-muted); font-size: 11px; font-weight: 400; }
.actions { display: flex; justify-content: flex-end; gap: 9px; margin: 15px 0 38px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; }
table:not(.dataTable) { border-collapse: collapse; }
table th { color: #747c8f; font-size: 10px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
table th, table td { padding: 11px 9px; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
table td { font-size: 13px; }
table td a { color: #2b3245; font-weight: 600; }
.badge { display: inline-flex; align-items: center; border-radius: 99px; padding: 4px 8px; background: #eef1f5; color: #5e6678; font-size: 10px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.badge.large { padding: 7px 12px; font-size: 11px; }
.badge.notified { background: #dff7ed; color: #087451; }
.badge.failed, .badge.originate_error { background: #fde8ec; color: #ad304a; }
.badge.calling, .badge.preparing { background: #e9e5ff; color: #5732a3; }
.badge.queued, .badge.retry { background: #fff1d8; color: #8c5b0a; }

.webhook-box label { display: grid; gap: 5px; margin-top: 12px; color: #4b5365; font-size: 12px; font-weight: 600; }
pre { overflow: auto; border-radius: 8px; padding: 14px; background: #151a2e; color: #d9e3f2; font: 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.contact-list { display: grid; gap: 8px; }
.contact { display: flex; align-items: center; gap: 12px; border: 1px solid var(--app-border); border-radius: 9px; padding: 10px; }
.contact .order { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; background: #f0e9fb; color: var(--app-purple); font-weight: 700; }
.contact div:nth-child(2) { display: grid; }
.contact small { color: var(--app-muted); }
.contact-actions { display: flex; gap: 5px; margin-left: auto; }
.contact-actions form { margin: 0; }
.contact-actions button { min-height: 30px; padding: 5px 9px; background: #f3f5f8; }
.contact-actions .danger { color: #c03952; }
.inline-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; margin-top: 15px; }
.empty { padding: 24px; color: var(--app-muted); text-align: center; }
.detail-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.spoken { color: #293044 !important; font-size: 16px !important; line-height: 1.65; }
.notification-audio { display: flex; align-items: center; gap: 10px; margin: 17px 0 8px; }
.notification-audio audio { width: min(100%,420px); height: 42px; }
.table-audio-list { display: grid; min-width: 245px; gap: 5px; }
.table-audio-list label { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--app-purple); }
.table-audio-list audio { width: 220px; height: 32px; }
.event-audio-grid { display: grid; gap: 10px; }
.event-audio-card { display: grid; grid-template-columns: minmax(230px,1fr) minmax(260px,420px) auto; align-items: center; gap: 14px; border: 1px solid #e5e8ef; border-radius: 11px; padding: 12px; background: #fbfcfe; }
.event-audio-card > div { display: flex; align-items: center; gap: 10px; }
.event-audio-card > div > div { display: grid; }
.event-audio-card small, .empty-audio { color: var(--app-muted); font-size: 11px; }
.event-audio-card audio { width: 100%; height: 38px; }
.audio-audit { display: flex; align-items: center; gap: 6px; color: var(--app-muted); font-size: 10px; overflow-wrap: anywhere; }
.event-timeline-panel { overflow: hidden; }
.timeline-totals { display: flex; gap: 10px; flex-wrap: wrap; }
.timeline-totals span { display: grid; gap: 2px; border-radius: 8px; padding: 7px 10px; background: #f3eef9; color: var(--app-muted); font-size: 10px; }
.timeline-totals strong { color: var(--app-purple); font-size: 13px; }
.event-timeline { display: grid; grid-template-columns: repeat(9,minmax(115px,1fr)); margin-top: 20px; overflow-x: auto; padding: 8px 2px 16px; }
.timeline-step { position: relative; min-width: 115px; padding-right: 12px; }
.timeline-step::before { position: absolute; top: 18px; right: 0; left: 0; height: 2px; content: ""; background: #e0e3ea; }
.timeline-step.completed::before { background: linear-gradient(90deg,var(--app-purple),#bca2dc); }
.timeline-step:last-child::before { right: 50%; }
.timeline-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid #fff; border-radius: 50%; background: #e8eaf0; color: #9299a8; box-shadow: 0 0 0 1px #dce0e8; }
.timeline-step.completed .timeline-marker { background: var(--app-purple); color: #fff; box-shadow: 0 0 0 3px rgba(111,45,189,.12); }
.timeline-step > div { display: grid; gap: 3px; margin-top: 10px; padding-right: 6px; }
.timeline-step strong { color: #303649; font-size: 11px; line-height: 1.25; }
.timeline-step small { color: var(--app-muted); font-size: 9px; line-height: 1.3; }
.timeline-step time { color: #555d70; font-size: 9px; font-style: normal; }
.timeline-step em { color: var(--app-purple); font-size: 10px; font-style: normal; font-weight: 700; }
.timing-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.timing-metrics strong { font-size: 21px; }
.timeline { display: grid; gap: 16px; margin: 20px 0; }
.timeline > div { position: relative; display: grid; padding-left: 20px; }
.timeline > div > span { position: absolute; top: 6px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--app-purple); box-shadow: 0 0 0 4px rgba(111,45,189,.1); }
.timeline small { color: var(--app-muted); }
.attempt-list { display: grid; gap: 9px; }
.attempt-card { display: flex; align-items: center; gap: 12px; border: 1px solid #e5e8ef; border-radius: 11px; padding: 12px; color: #293044; background: #fff; transition: .16s ease; }
.attempt-card:hover { border-color: #bda8da; box-shadow: 0 7px 20px rgba(59,38,100,.08); transform: translateY(-1px); }
.attempt-card-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: #eee7f8; color: var(--app-purple); }
.attempt-card-body { display: grid; min-width: 0; gap: 2px; }
.attempt-card-body strong { font-size: 13px; }
.attempt-card-body small { overflow: hidden; color: var(--app-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.attempt-card-end { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.attempt-card-end > i { color: #9aa1af; }
.call-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.call-kv { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 12px 16px; align-items: start; }
.call-kv > span { color: var(--app-muted); font-size: 11px; font-weight: 600; }
.call-kv > code { overflow-wrap: anywhere; color: #4d326f; font-size: 11px; }
.dtmf-result { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; }
.dtmf-result > div { display: grid; gap: 5px; border: 1px solid #e3e6ed; border-radius: 10px; padding: 14px; background: #fafbfc; }
.dtmf-result > div.confirmed { border-color: #bfe6d3; background: #edf9f3; color: #0b7552; }
.dtmf-result > i { align-self: center; color: #a2a8b5; }
.dtmf-result span { color: var(--app-muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.recording-placeholder { display: grid; place-items: center; min-height: 190px; border: 1px dashed #cfd4df; border-radius: 11px; padding: 24px; background: #fafbfc; text-align: center; }
.recording-placeholder > i { margin-bottom: 7px; color: var(--app-purple); font-size: 32px; }
.recording-placeholder span { max-width: 420px; margin-top: 5px; color: var(--app-muted); font-size: 11px; }

.login-shell { display: flex; width: 100%; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 15% 10%, rgba(233,30,143,.14), transparent 30%), radial-gradient(circle at 90% 80%, rgba(111,45,189,.16), transparent 35%), #f4f5fa; }
.login-content { width: min(420px,100%); margin: auto; }
.login-card { overflow: hidden; border: 0; border-radius: 16px; box-shadow: 0 24px 70px rgba(36,25,74,.15); }
.login-card::before { display: block; height: 4px; content: ""; background: linear-gradient(90deg, var(--app-purple), var(--app-pink)); }
.login-logo { width: 132px; height: 88px; object-fit: contain; }

/* Wizard */
.wizard-form { max-width: 1120px; margin: 0 auto; }
.wizard-card { overflow: hidden; border: 1px solid var(--app-border); border-radius: 14px; box-shadow: 0 12px 34px rgba(35,28,72,.07); }
.wizard-header { display: block; padding: 24px 30px 18px; background: linear-gradient(180deg,#fff,#fbfaff); }
.wizard-steps { margin: 0; }
.wizard-steps .step-item { border: 0; background: transparent; color: #9a9fac; font: inherit; font-size: 11px; font-weight: 600; cursor: default; }
.wizard-steps .step-item span { display: block; margin-top: 8px; }
.wizard-steps .step-item.active { color: var(--app-purple); }
.wizard-steps .step-item.completed { color: #18a773; cursor: pointer; }
.wizard-steps .step-item.completed::before { background: #18a773; }
.wizard-body { min-height: 430px; padding: 34px 38px; }
.wizard-pane { animation: wizard-in .22s ease; }
.wizard-pane[hidden] { display: none !important; }
@keyframes wizard-in { from { opacity: 0; transform: translateX(7px); } to { opacity: 1; transform: none; } }
.wizard-pane-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 28px; }
.wizard-pane-heading h2 { margin: 0 0 3px; font-size: 19px; }
.wizard-pane-heading p { margin: 0; color: var(--app-muted); font-size: 13px; }
.wizard-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: #efe7fa; color: var(--app-purple); font-size: 20px; }
.wizard-icon img { width: 30px; height: 30px; object-fit: contain; }
.wizard-icon.pink { background: #fde7f3; color: var(--app-pink); }
.wizard-icon.blue { background: #e5f1ff; color: #2879c8; }
.wizard-icon.green { background: #e1f6ed; color: #13815b; }
.wizard-icon.amber { background: #fff1d8; color: #a3680b; }
.form-stack { display: grid; gap: 18px; }
.form-grid-2, .form-grid-4 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.form-grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.wizard-form .form-label { margin-bottom: 6px; color: #3f4658; font-size: 12px; font-weight: 600; }
.wizard-form .form-control, .wizard-form .form-select, .wizard-form .input-group-text { min-height: 40px; font-size: 13px; }
.wizard-form .form-control:focus, .wizard-form .form-select:focus { border-color: var(--app-purple); box-shadow: 0 0 0 3px rgba(111,45,189,.1); }
.provider-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.provider-option { cursor: pointer; }
.provider-option input { position: absolute; opacity: 0; pointer-events: none; }
.provider-card { position: relative; display: flex; align-items: center; gap: 11px; min-height: 82px; border: 1px solid #dfe3eb; border-radius: 11px; padding: 13px; background: #fff; transition: .16s ease; }
.provider-card:hover { border-color: #baa2d8; transform: translateY(-1px); }
.provider-logo { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; background: #f7f7fa; }
.provider-logo img { width: 31px; height: 31px; object-fit: contain; }
.provider-card > span:nth-child(2) { min-width: 0; display: grid; }
.provider-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.provider-card small { overflow: hidden; color: var(--app-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.provider-check { position: absolute; top: 8px; right: 8px; color: var(--app-purple); opacity: 0; }
.provider-option input:checked + .provider-card { border-color: var(--app-purple); background: #fbf8ff; box-shadow: 0 0 0 2px rgba(111,45,189,.1); }
.provider-option input:checked + .provider-card .provider-check { opacity: 1; }
.completion-note { display: flex; align-items: center; gap: 13px; margin-top: 26px; border: 1px solid #cfeede; border-radius: 10px; padding: 14px; background: #f1fbf6; color: #137451; }
.completion-note > i { font-size: 23px; }
.completion-note p { margin: 2px 0 0; color: #4e7565; font-size: 12px; }
.default-response-preview { display: flex; align-items: center; gap: 12px; border: 1px solid #cfeede; border-radius: 10px; padding: 14px; background: #f1fbf6; }
.default-response-preview > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #d8f3e6; color: #13815b; }
.default-response-preview div { display: grid; gap: 4px; }
.default-response-preview code { color: #4a665a; font-size: 11px; }
.voice-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.audio-settings-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; border-top: 1px solid #edf0f4; padding-top: 18px; }
.audio-setting-wide { grid-column: 1 / -1; }
.audio-setting[hidden] { display: none !important; }
.audio-settings-grid > .form-check { align-self: end; min-height: 40px; margin: 0; }
.voice-preview { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 16px; border: 1px solid #e2e6ee; border-radius: 11px; padding: 16px; background: #fafbfe; }
.voice-preview-controls { display: grid; min-width: 280px; gap: 9px; }
.voice-preview audio { width: 100%; height: 38px; }
.wizard-footer { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 13px 24px; background: #fbfcfe; }
.wizard-footer > div { display: flex; gap: 8px; }

@media (min-width: 992px) {
  .app-sidebar { width: 250px; transition: width .22s ease; }
  .app-shell > .page-wrapper { width: calc(100% - 250px); margin-left: 250px; transition: width .22s ease, margin-left .22s ease; }
  body.sidebar-compact .app-sidebar { width: 78px; }
  body.sidebar-compact .app-shell > .page-wrapper { width: calc(100% - 78px); margin-left: 78px; }
  body.sidebar-compact .app-brand { justify-content: center; padding-right: 0; padding-left: 0; }
  body.sidebar-compact .app-brand-logo { width: 42px; height: 42px; }
  body.sidebar-compact .app-brand > span, body.sidebar-compact .nav-link-title, body.sidebar-compact .nav-group-chevron, body.sidebar-compact .system-online div, body.sidebar-compact .logout-label { display: none; }
  body.sidebar-compact .app-sidebar .nav-link { justify-content: center; padding-right: 8px; padding-left: 8px; }
  body.sidebar-compact .app-sidebar .nav-link-icon { width: 28px; margin-right: 0; font-size: 18px; }
  body.sidebar-compact .nav-submenu { padding-left: 0; }
  body.sidebar-compact .sidebar-toggle { transform: rotate(180deg); }
  body.sidebar-compact .system-online { justify-content: center; padding: 10px 0; }
}
@media (max-width: 1100px) { .metrics { grid-template-columns: repeat(3,1fr); } .provider-grid { grid-template-columns: repeat(2,1fr); } .form-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 991px) { .app-brand { min-height: 58px; } .app-brand-logo { width: 38px; height: 38px; } .app-brand small { display: none; } .app-sidebar-footer { padding-bottom: 16px; } }
@media (max-width: 720px) {
  .app-content { padding-top: 22px; }
  .app-container { padding-right: 16px; padding-left: 16px; }
  .page-header { display: flex; align-items: center; }
  .page-header h1, .page-title { font-size: 22px; }
  .page-illustration { width: 48px; height: 48px; }
  .metrics, .cards, .detail-grid, .dashboard-chart-grid, .call-detail-grid, .form-grid .row, .form-grid .row.three, .inline-form, .form-grid-2, .form-grid-4, .provider-grid, .voice-preview, .audio-settings-grid, .codec-options { grid-template-columns: 1fr; }
  .audio-setting-wide { grid-column: auto; }
  .period-filter { width: 100%; margin-top: 12px; }
  .period-filter > span { display: none; }
  .period-option { flex: 1; text-align: center; }
  .dtmf-result { grid-template-columns: 1fr; }
  .dtmf-result > i { justify-self: center; transform: rotate(90deg); }
  .call-kv { grid-template-columns: 1fr; gap: 4px; }
  .voice-preview-controls { min-width: 0; }
  .wizard-header { padding: 18px 12px 12px; overflow-x: auto; }
  .wizard-steps { min-width: 680px; }
  .wizard-body { min-height: 0; padding: 24px 18px; }
  .wizard-pane-heading { align-items: flex-start; }
  .wizard-pane-heading h2 { font-size: 17px; }
  .wizard-footer { padding: 12px; }
  .wizard-cancel { display: none; }
  .wizard-footer > div { width: 100%; }
  .wizard-footer .btn { flex: 1; }
  .contact { align-items: flex-start; }
  .contact-actions { flex-wrap: wrap; }
  .event-audio-card { grid-template-columns: 1fr; }
  .event-audio-card audio { width: 100%; }
  .timing-metrics { grid-template-columns: 1fr; }
}