:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #08111f;
  color: #edf4ff;
  --bg: #08111f;
  --surface: #0e1a2b;
  --surface-raised: #13243a;
  --surface-soft: #0b1728;
  --border: #243a56;
  --border-strong: #365575;
  --text: #edf4ff;
  --muted: #8fa5c0;
  --accent: #58a6ff;
  --accent-soft: #173b63;
  --success: #6fe0a5;
  --warning: #f4cc72;
  --danger: #ff879c;
  --purple: #c8a9ff;
  --shadow: 0 20px 70px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, rgba(43, 99, 154, .15), transparent 36rem), var(--bg); }
.portal-loader { display: grid; place-items: center; align-content: center; gap: 9px; min-height: calc(100vh - 48px); color: var(--muted); font-size: .82rem; text-align: center; }
.portal-loader strong { color: var(--text); font-size: .95rem; }
.portal-loader-mark { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 4px; border: 1px solid rgba(126, 204, 255, .55); border-radius: 15px; background: linear-gradient(145deg, #287eb9, #183862 76%); box-shadow: 0 10px 28px rgba(30, 112, 177, .25), inset 0 1px 0 rgba(255, 255, 255, .18); color: #effaff; font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.portal-loader::after { content: ''; width: 20px; height: 20px; margin-top: 3px; border: 2px solid rgba(88, 166, 255, .25); border-top-color: var(--accent); border-radius: 50%; animation: portal-loader-spin .8s linear infinite; }
@keyframes portal-loader-spin { to { transform: rotate(360deg); } }
button, input, select, textarea { font: inherit; }
button, .button { border: 1px solid transparent; border-radius: 9px; padding: 10px 14px; background: linear-gradient(180deg, #5daaff, #3e82d5); color: white; font-weight: 750; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: transform .15s ease, filter .15s ease, border-color .15s ease; }
button:hover, .button:hover { filter: brightness(1.1); transform: translateY(-1px); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, .live-viewport:focus-visible { outline: 3px solid rgba(88, 166, 255, .45); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
button.secondary, .button.secondary { background: #1b304b; border-color: #355574; color: #d8e8fb; }
button.danger, .button.danger { background: #7f3046; border-color: #a84b63; }
button.small, .button.small { padding: 7px 10px; border-radius: 8px; font-size: .78rem; }

.shell { width: min(1440px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 72px; }
.topbar { position: static; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: -24px 0 20px; padding: 20px 0 16px; background: rgba(8, 17, 31, .9); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(54, 85, 117, .35); }
.topbar h1 { margin: 0 0 3px; letter-spacing: -.03em; }
.topbar .muted { font-size: .82rem; }
h1, h2, h3 { margin: 0 0 8px; letter-spacing: -.02em; }
h1 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
h2 { font-size: 1.16rem; }
h3 { font-size: 1rem; }
p { line-height: 1.5; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 5px; color: #79b8f8; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 800; }
.error { color: var(--danger); min-height: 1.2em; }
.notice { min-height: 1.2em; margin: 8px 0 16px; color: var(--success); }
.notice.bad { color: var(--danger); }
.toast-region { position: fixed; top: 18px; right: 18px; z-index: 100; display: grid; gap: 10px; width: min(390px, calc(100vw - 28px)); pointer-events: none; }
.toast { display: grid; grid-template-columns: 28px 1fr 24px; align-items: center; gap: 10px; padding: 12px 12px 12px 10px; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(15, 31, 50, .97); box-shadow: 0 18px 45px rgba(0, 0, 0, .42); color: var(--text); pointer-events: auto; animation: toast-in .2s ease-out; }
.toast-success { border-color: rgba(111, 224, 165, .58); }
.toast-error { border-color: rgba(255, 135, 156, .7); }
.toast-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(111, 224, 165, .2); color: var(--success); font-weight: 900; }
.toast-error .toast-icon { background: rgba(255, 135, 156, .2); color: var(--danger); }
.toast-message { font-size: .82rem; line-height: 1.35; word-break: break-word; }
.toast-close { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 1.25rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.report-selection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .025); }
.check-label { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: .82rem; }
.check-label input, .select-report, .select-voicemail, .select-contact-set { width: auto; accent-color: var(--accent); }
.contact-stats strong, .contact-stats small { display: block; }
.contact-file-details { display: grid; gap: 8px; min-width: 220px; }
.contact-file-entry { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.contact-file-entry + .contact-file-entry { padding-top: 8px; border-top: 1px solid rgba(54, 85, 117, .35); }
.contact-file-entry > span:first-child { display: grid; gap: 2px; min-width: 0; }
.contact-file-entry strong { overflow-wrap: anywhere; }
.contact-file-entry .actions { align-items: center; flex: 0 0 auto; }
.contact-list-description { display: block; margin-top: 4px; }
@media (max-width: 700px) { .report-selection-toolbar { align-items: flex-start; flex-direction: column; } }

.recording-hero { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-bottom: 18px; padding: 26px 28px; border: 1px solid #2d5679; border-radius: 17px; background: linear-gradient(130deg, rgba(17, 54, 80, .95), rgba(12, 27, 45, .98)); box-shadow: var(--shadow); }
.recording-hero h2 { margin-bottom: 5px; font-size: clamp(1.35rem, 3vw, 1.9rem); }
.recording-hero p:last-child { max-width: 760px; margin: 0; color: #a9bfd5; }
.recording-hero-badge { display: grid; justify-items: end; gap: 3px; min-width: 105px; color: var(--muted); font-size: .72rem; text-align: right; }
.recording-hero-badge strong { color: var(--success); font-size: 1.3rem; }
.recording-layout { align-items: start; }
.recording-layout .panel { min-width: 0; }
.recording-layout form { display: grid; gap: 15px; }
.recording-layout form > button { width: 100%; margin-top: 2px; }
.recording-scenario-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.recording-scenario-picker .actions { margin: 0; }
.recording-ivr-settings { border: 1px solid rgba(54, 85, 117, .75); border-radius: 10px; padding: 10px 12px; background: rgba(4, 15, 28, .2); }
.recording-ivr-settings summary { cursor: pointer; color: #c7d9eb; font-size: .79rem; font-weight: 700; }
.recording-ivr-settings .form-grid { margin-top: 12px; }
.recording-notice { display: grid; gap: 3px; padding: 12px 13px; border: 1px solid rgba(244, 204, 114, .35); border-radius: 10px; background: rgba(244, 204, 114, .08); color: #e5d5a6; font-size: .76rem; line-height: 1.45; }
.recording-notice strong { color: var(--warning); font-size: .78rem; }
.recording-history { min-height: 300px; }
.recording-empty { padding: 28px 4px; text-align: center; }
.recording-card { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid rgba(54, 85, 117, .6); }
.recording-card:first-child { padding-top: 0; border-top: 0; }
.recording-card-main { min-width: 0; }
.recording-card-heading { display: flex; align-items: start; gap: 16px; }
.recording-card-heading h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.recording-card-heading .eyebrow { margin-bottom: 3px; }
.recording-status { flex: 0 0 auto; padding: 4px 7px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--muted); font-size: .67rem; white-space: nowrap; }
.recording-status.recording, .recording-status.completed { border-color: rgba(111, 224, 165, .45); color: var(--success); }
.recording-status.failed, .recording-status.rejected { border-color: rgba(255, 135, 156, .55); color: var(--danger); }
.recording-status.ringing, .recording-status.dialing, .recording-status.preparing, .recording-status.stopping { border-color: rgba(244, 204, 114, .5); color: var(--warning); }
.recording-route { margin: 7px 0 8px; color: #a7bed5; font-size: .77rem; overflow-wrap: anywhere; }
.recording-facts { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--muted); font-size: .69rem; }
.recording-error, .recording-reason { margin: 7px 0 0; font-size: .73rem; line-height: 1.4; overflow-wrap: anywhere; }
.recording-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 7px; }
.recording-dtmf-controls { display: grid; gap: 8px; margin-top: 13px; padding: 11px 12px; border: 1px solid rgba(70, 135, 190, .5); border-radius: 11px; background: rgba(18, 63, 94, .2); }
.recording-dtmf-heading { display: flex; align-items: center; gap: 9px; font-size: .78rem; }
.recording-dtmf-entry { display: flex; gap: 7px; }
.recording-dtmf-entry input { min-width: 0; flex: 1; }
.recording-keypad { display: grid; grid-template-columns: repeat(6, minmax(30px, 1fr)); gap: 6px; max-width: 360px; }
.recording-keypad button { min-height: 30px; padding: 4px 6px; }
.recording-timeline { margin-top: 12px; border-top: 1px solid rgba(54, 85, 117, .55); padding-top: 9px; }
.recording-timeline summary { cursor: pointer; color: #a9c9e5; font-size: .74rem; font-weight: 700; }
.recording-timeline ol { display: grid; gap: 5px; max-height: 210px; overflow: auto; margin: 9px 0 0; padding: 0; list-style: none; }
.recording-timeline li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; color: var(--muted); font-size: .69rem; }
.recording-timeline time { color: #7db7e6; font-variant-numeric: tabular-nums; }
.recording-step-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, max-content)); align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(54, 85, 117, .55); font-size: .7rem; }
.recording-step-files strong { color: #c8dbec; }
.recording-step-files > .muted { grid-column: 1 / -1; }
@media (max-width: 780px) { .recording-hero { align-items: flex-start; flex-direction: column; } .recording-hero-badge { justify-items: start; text-align: left; } .recording-card { align-items: flex-start; flex-direction: column; } .recording-actions { width: 100%; justify-content: flex-start; } }
@media (max-width: 560px) { .recording-scenario-picker { grid-template-columns: 1fr; } .recording-scenario-picker .actions { justify-content: flex-start; } .recording-keypad { grid-template-columns: repeat(4, minmax(42px, 1fr)); } }

.card, .panel { background: linear-gradient(145deg, rgba(19, 36, 58, .96), rgba(12, 26, 43, .96)); border: 1px solid var(--border); border-radius: 15px; padding: 22px; box-shadow: var(--shadow); }
.login-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); align-items: center; gap: clamp(36px, 7vw, 100px); width: min(1080px, 100%); min-height: calc(100vh - 96px); margin: 0 auto; padding: 34px 0; }
.login-layout::before { content: ''; position: absolute; z-index: -1; top: 8%; left: -12%; width: 380px; height: 380px; border-radius: 50%; background: rgba(53, 126, 196, .14); filter: blur(70px); pointer-events: none; }
.login-brand { display: grid; gap: 30px; max-width: 560px; padding: 18px 0; }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; width: fit-content; color: var(--text); }
.brand-lockup strong { display: block; font-size: 1.16rem; letter-spacing: .08em; }
.brand-lockup small { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; letter-spacing: .04em; }
.brand-mark, .login-card-icon { display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(113, 190, 255, .45); background: linear-gradient(145deg, #266da5, #183b68); box-shadow: 0 10px 28px rgba(22, 89, 143, .3); }
.brand-mark { width: 44px; height: 44px; border-radius: 13px; }
.brand-mark svg { width: 25px; height: 25px; fill: none; stroke: #e6f5ff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.login-brand-copy { display: grid; gap: 13px; }
.login-brand-copy .eyebrow { margin-bottom: 0; }
.login-brand-copy h1 { max-width: 520px; margin: 0; color: #f5f9ff; font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: .99; letter-spacing: -.055em; }
.login-brand-copy p:last-child { max-width: 480px; margin: 0; color: #a9bdd4; font-size: 1.02rem; line-height: 1.7; }
.login-trust-list { display: grid; gap: 11px; color: #b9cbe0; font-size: .83rem; }
.login-trust-list span { display: flex; align-items: center; gap: 10px; }
.login-trust-list i { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(111, 224, 165, .35); border-radius: 50%; background: rgba(111, 224, 165, .12); color: var(--success); font-size: .72rem; font-style: normal; font-weight: 900; }
.login-build { margin: 2px 0 0; color: #6f89a5; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.login-card { width: 100%; max-width: 430px; margin: 0; padding: 30px; border-color: rgba(65, 101, 139, .9); background: linear-gradient(155deg, rgba(21, 41, 66, .98), rgba(10, 23, 39, .98)); box-shadow: 0 28px 85px rgba(0, 0, 0, .38), 0 0 0 1px rgba(111, 170, 224, .05); }
.login-card-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; }
.login-card-heading h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.035em; }
.login-card-heading .eyebrow { margin-bottom: 4px; }
.login-card-icon { width: 40px; height: 40px; border-radius: 11px; }
.login-card-icon svg { width: 21px; height: 21px; fill: none; stroke: #dff3ff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.login-intro { margin: 0 0 24px; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.login-card form { gap: 15px; }
.login-card label { gap: 7px; color: #c8d7e8; font-size: .8rem; font-weight: 650; }
.login-card input { min-height: 45px; padding: 11px 12px; border-color: #345371; background: rgba(5, 15, 27, .72); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.login-card input:hover { border-color: #4a7094; }
.login-card input:focus { border-color: var(--accent); background: rgba(7, 20, 35, .9); box-shadow: 0 0 0 4px rgba(88, 166, 255, .12); outline: none; }
.login-card input[name="totp"] { letter-spacing: .22em; font-variant-numeric: tabular-nums; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.label-row small { color: #7891ac; font-size: .68rem; font-weight: 500; }
.login-help { margin: -3px 0 0; color: #7991ac; font-size: .73rem; line-height: 1.45; }
.login-card button[type="submit"] { min-height: 46px; margin-top: 3px; border-color: #72baff; background: linear-gradient(135deg, #4c9aed, #3174c5); box-shadow: 0 10px 22px rgba(32, 111, 190, .2); }
.login-card button[type="submit"]:hover { box-shadow: 0 12px 28px rgba(32, 111, 190, .35); }
.button-arrow { margin-left: auto; font-size: 1.1rem; line-height: 1; }
.login-card button.is-loading .button-arrow { display: none; }
.login-card button.is-loading::before { content: ''; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: white; border-radius: 50%; animation: login-spin .7s linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }
.login-card .error { margin: -2px 0 0; font-size: .78rem; line-height: 1.45; }
.login-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 25px; padding-top: 17px; border-top: 1px solid rgba(54, 85, 117, .6); color: #7891ac; font-size: .68rem; }
.secure-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(111, 224, 165, .11); }
.login-footer-separator { color: #48627e; }
.hero-panel { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 18px; padding: 28px; border: 1px solid #2c4e70; border-radius: 18px; background: linear-gradient(130deg, #102944, #0c192b 65%, #132a43); box-shadow: var(--shadow); }
.hero-panel h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.hero-panel p { max-width: 720px; margin-bottom: 0; }
.hero-status, .live-header-status { display: grid; justify-items: end; gap: 8px; white-space: nowrap; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgba(244, 194, 85, .12); }
.status-dot.ok { background: var(--success); box-shadow: 0 0 0 4px rgba(111, 224, 165, .12); }
.section-heading, .row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.section-heading { margin-bottom: 16px; }
.section-heading > :first-child p:last-child { margin: 0; }
.panel-action { display: flex; width: fit-content; margin: 12px 0 16px; }
.panel-action + p { margin-top: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.live-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.metric { min-width: 0; padding: 17px; border: 1px solid rgba(54, 85, 117, .62); border-radius: 12px; background: rgba(23, 43, 68, .72); }
.metric.accent { border-color: rgba(88, 166, 255, .7); background: linear-gradient(145deg, rgba(28, 71, 113, .72), rgba(20, 45, 72, .72)); }
.metric strong { display: block; margin-top: 7px; color: var(--text); font-size: clamp(1.45rem, 2.5vw, 2rem); letter-spacing: -.04em; }
.metric strong small { font-size: .82rem; color: var(--muted); letter-spacing: 0; }
.metric-label { display: block; color: #b6c9df; font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.metric small { display: block; margin-top: 4px; }
.overview-live-panel { border-color: #2a7058; background: linear-gradient(145deg, rgba(18, 54, 58, .82), rgba(13, 30, 46, .96)); }
.panel { margin-bottom: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

.tabs { position: sticky; top: 82px; z-index: 15; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; padding: 7px; border: 1px solid rgba(54, 85, 117, .65); border-radius: 12px; background: rgba(14, 26, 43, .9); backdrop-filter: blur(12px); }
.tabs button { padding: 9px 12px; background: transparent; border-color: transparent; color: #9fb4ce; font-size: .82rem; }
.tabs button:hover { background: rgba(35, 66, 99, .55); }
.tabs button.active { background: var(--accent-soft); border-color: #3b6c9e; color: white; }
.status { color: var(--success); }
.status.failed, .status.stopped, .status.blocked, .status.quarantined { color: var(--danger); }
.connection-pill, .live-status, .campaign-tag { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 9px; font-size: .72rem; font-weight: 800; }
.connection-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.connection-pill.online { background: rgba(40, 133, 91, .22); color: var(--success); }
.connection-pill.warning { background: rgba(148, 107, 35, .22); color: var(--warning); }
.connection-pill.danger { background: rgba(157, 48, 75, .22); color: var(--danger); }

form { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: #b9cbe0; font-size: .86rem; }
input, textarea, select { width: 100%; border: 1px solid var(--border-strong); border-radius: 9px; padding: 10px 11px; background: #091525; color: var(--text); }
input::placeholder, textarea::placeholder { color: #607892; }
textarea { min-height: 220px; resize: vertical; font-family: ui-monospace, monospace; font-size: .82rem; }
details { border-top: 1px solid var(--border); padding: 14px 0; }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; color: var(--text); font-weight: 750; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 13px; }
.form-grid > label { min-width: 0; }
.check-label { display: flex; align-items: center; gap: 8px; }
.check-label input { width: auto; }
fieldset { min-width: 0; }
fieldset.trunk-card, .campaign-type-box, .campaign-details-box, .recipient-box, .regular-voicemail-box, .test-voicemail-box, .test-delivery-box { border: 1px solid var(--border-strong); border-radius: 11px; margin: 0 0 13px; padding: 15px; }
.trunk-card legend { padding: 0 7px; color: var(--accent); font-weight: 800; }
.trunk-card-heading, .did-manager-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.trunk-card-heading { margin-bottom: 12px; }
.trunk-card-heading p, .did-manager-heading p { margin: 0; }
.trunk-provider-note, .single-provider-note { grid-column: 1 / -1; margin: 0; padding: 9px 11px; border: 1px solid rgba(84, 143, 194, .45); border-radius: 8px; background: rgba(20, 58, 91, .28); font-size: .76rem; }
.single-provider-note { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; }
.trunk-enabled-field { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; }
.trunk-enabled-status { min-width: 0; }
.trunk-card.trunk-disabled { border-color: rgba(214, 163, 75, .55); background: rgba(72, 52, 18, .12); }
.trunk-card.trunk-disabled .trunk-enabled-status { color: #e8c477; }
.did-manager { display: grid; gap: 9px; margin: 13px 0; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: rgba(7, 18, 32, .42); }
.did-manager-heading { align-items: center; }
.did-manager-heading strong { font-size: .84rem; }
.did-list { display: grid; gap: 8px; }
.did-row { display: flex; align-items: center; gap: 8px; }
.did-row input { flex: 1; }
.trunk-advanced { margin-top: 10px; }
.trunk-card[data-trunk-locked="true"] input:disabled, .trunk-card[data-trunk-locked="true"] select:disabled { cursor: not-allowed; opacity: .72; }
fieldset legend { padding: 0 7px; color: var(--text); font-weight: 750; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.inline-form input { width: auto; }

table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { padding: 12px 10px; border-bottom: 1px solid rgba(54, 85, 117, .5); text-align: left; vertical-align: top; }
th { color: #9fb4ce; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
tbody tr:hover { background: rgba(33, 64, 96, .25); }
.code { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, monospace; font-size: .78rem; }
.campaign-progress { display: grid; min-width: 0; gap: 22px; white-space: normal; }
.campaign-progress strong { color: var(--text); }
.campaign-dashboard-panel { min-width: 0; margin: 0 0 18px; border-color: rgba(78, 190, 142, .5); background: linear-gradient(145deg, rgba(13, 48, 55, .72), rgba(12, 29, 45, .96)); }
.campaign-stat-group { display: grid; min-width: 0; gap: 10px; margin-top: 13px; }
.campaign-stat-group:first-child { margin-top: 0; }
.campaign-stat-group h3 { margin: 0; color: #b9cbe0; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.campaign-stat-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.campaign-stat-heading > span { color: var(--muted); font-size: .72rem; text-align: right; }
.campaign-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.campaign-stat-card { display: grid; min-width: 0; min-height: 92px; align-content: space-between; gap: 6px; padding: 13px 14px; border: 1px solid rgba(54, 85, 117, .65); border-radius: 10px; background: rgba(5, 14, 25, .42); overflow: hidden; }
.campaign-stat-card small { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; overflow-wrap: anywhere; }
.campaign-stat-card strong { color: var(--text); font-size: 1.48rem; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.campaign-stat-card span { color: #8ba2ba; font-size: .7rem; line-height: 1.3; overflow-wrap: anywhere; }
.campaign-stat-card.active { border-color: rgba(102, 183, 255, .65); background: rgba(32, 103, 163, .18); }
.campaign-stat-card.success { border-color: rgba(112, 227, 174, .55); background: rgba(29, 115, 80, .17); }
.campaign-stat-card.danger { border-color: rgba(255, 135, 156, .52); background: rgba(139, 45, 65, .16); }
.campaign-stage-stats .campaign-stat-card, .campaign-outcome-stats .campaign-stat-card { min-height: 76px; }
.campaign-carrier-table, .campaign-history-table { min-width: 0; overflow-x: auto; border: 1px solid rgba(54, 85, 117, .5); border-radius: 10px; }
.campaign-carrier-table table, .campaign-history-table table { min-width: 980px; }
.campaign-carrier-table small, .campaign-history-table small { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; white-space: normal; overflow-wrap: anywhere; }
.campaign-carrier-table td, .campaign-history-table td { vertical-align: middle; }
.carrier-last-error { min-width: 150px; max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
.carrier-last-error strong { display: block; font-size: .76rem; font-weight: 700; line-height: 1.35; }
.campaign-diagnostic-grid { display: grid; min-width: 0; gap: 12px; }
.campaign-diagnostic-panel { display: grid; min-width: 0; gap: 10px; padding: 13px; border: 1px solid rgba(71, 111, 148, .52); border-radius: 10px; background: rgba(5, 14, 25, .34); }
.campaign-diagnostic-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.campaign-diagnostic-heading > strong { font-size: .82rem; }
.campaign-diagnostic-heading > span { color: var(--muted); font-size: .72rem; }
.campaign-diagnostic-table { min-width: 0; overflow-x: auto; border: 1px solid rgba(54, 85, 117, .42); border-radius: 8px; }
.campaign-diagnostic-table table { min-width: 760px; }
.campaign-diagnostic-table small { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; white-space: normal; overflow-wrap: anywhere; }
.diagnostic-clear { margin: 0; padding: 14px; color: var(--success); font-size: .76rem; }
.diagnostic-scope { display: inline-flex; border: 1px solid rgba(245, 207, 118, .45); border-radius: 999px; padding: 4px 7px; color: var(--warning); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.diagnostic-scope.critical { border-color: rgba(255, 143, 165, .5); color: var(--danger); }
.campaign-dashboard-status { display: flex; align-items: flex-end; flex-direction: column; gap: 8px; text-align: right; }
.carrier-health-alerts { display: grid; gap: 8px; }
.carrier-health-alert { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 1px solid rgba(214, 163, 75, .52); border-left: 4px solid var(--warning); border-radius: 9px; background: rgba(109, 76, 22, .18); }
.carrier-health-alert.critical { border-color: rgba(255, 116, 140, .48); border-left-color: var(--danger); background: rgba(133, 37, 59, .18); }
.carrier-health-alert > div { display: grid; min-width: 0; gap: 3px; }
.carrier-health-alert strong { font-size: .82rem; }
.carrier-health-alert span { color: #d7bfc5; font-size: .74rem; line-height: 1.4; overflow-wrap: anywhere; }
.carrier-health-alert button { flex: 0 0 auto; white-space: nowrap; }
.campaign-history-panel { min-width: 0; }
.campaign-layout, .campaign-workspace { min-width: 0; }
.campaign-workspace { grid-column: 1 / -1; }
.campaign-list-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.campaign-list-heading h2 { margin-bottom: 5px; }
.campaign-list-heading p { max-width: 680px; margin: 0; }
.campaign-list-heading .panel-action { margin: 0; white-space: nowrap; }
.campaign-capacity-box { min-width: 0; }
.campaign-capacity-total { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.campaign-capacity-total > div { display: grid; min-width: 0; gap: 4px; padding: 12px; border: 1px solid rgba(74, 132, 177, .5); border-radius: 9px; background: rgba(8, 26, 44, .48); }
.campaign-capacity-total span { color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.campaign-capacity-total strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.campaign-capacity-total strong small { color: var(--muted); font-size: .65rem; }
.campaign-capacity-table { min-width: 0; overflow-x: auto; border: 1px solid rgba(54, 85, 117, .5); border-radius: 9px; }
.campaign-capacity-table table { min-width: 720px; }
.campaign-capacity-table small { display: block; margin-top: 3px; color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; white-space: normal; }
.campaign-advanced-settings { margin-top: 12px; }
.campaign-actions { display: flex; min-width: 180px; gap: 6px; flex-wrap: wrap; }
.campaign-restart-badge { display: block; margin-top: 5px; color: #9fc9ee; font-size: .69rem; text-transform: capitalize; }
.campaign-alert { display: grid; gap: 4px; margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(255, 135, 156, .55); border-radius: 9px; background: rgba(139, 45, 65, .16); color: #ffd3dc; }
.campaign-alert span { overflow-wrap: anywhere; font-size: .78rem; }
.campaign-empty-stats { padding: 8px 0; }
.campaign-outcome-grid { display: grid; grid-template-columns: repeat(7, minmax(62px, 1fr)); gap: 5px; margin: 5px 0 2px; }
.campaign-outcome { display: grid; gap: 2px; min-width: 0; padding: 5px 6px; border: 1px solid rgba(54, 85, 117, .65); border-radius: 7px; background: rgba(5, 14, 25, .34); }
.campaign-outcome small { overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.campaign-outcome strong { font-size: .86rem; line-height: 1; }
.campaign-error { margin-top: 7px; font-size: .78rem; }
.health-inline { font-weight: 750; }
.health-inline.health-status-green { color: var(--success); }
.health-inline.health-status-yellow { color: var(--warning); }
.health-inline.health-status-red, .health-failure-preview { color: #ffb6c5; }
.health-failure-preview { overflow-wrap: anywhere; }
.startup-progress { display: grid; gap: 4px; }
.startup-progress strong { color: #b9e2ff; text-transform: capitalize; }
.did-health-summary { display: grid; gap: 3px; margin-top: 7px; padding: 7px 9px; border: 1px solid rgba(74, 132, 177, .45); border-radius: 8px; background: rgba(8, 26, 44, .45); font-size: .74rem; line-height: 1.35; }
.did-health-summary strong { color: #b9e2ff; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.did-health-summary > span { color: var(--muted); }
.did-health-reasons { display: grid; gap: 2px; color: #ffb6c5; font-size: .68rem; }
.is-muted { opacity: .68; }

.live-activity-panel { border-color: #2f9b70; background: linear-gradient(145deg, rgba(13, 48, 55, .96), rgba(12, 29, 45, .96)); }
.live-indicator { color: var(--success); font-size: .75rem; font-weight: 850; letter-spacing: .05em; }
.compact-kpis { margin-bottom: 17px; }
.compact-kpis .metric { padding: 13px; }
.compact-kpis .metric strong { font-size: 1.45rem; }
.live-toolbar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; padding: 12px; border: 1px solid rgba(54, 85, 117, .6); border-radius: 11px; background: rgba(7, 18, 31, .38); }
.live-toolbar label { min-width: 150px; flex: 0 1 190px; font-size: .75rem; }
.live-toolbar .search-control { flex: 1 1 270px; }
.live-toolbar .live-count { margin-left: auto; padding-bottom: 10px; font-size: .75rem; }
.route-breakdown { display: flex; gap: 7px; flex-wrap: wrap; min-height: 36px; margin-bottom: 13px; }
.route-chip { display: grid; gap: 2px; padding: 7px 10px; border: 1px solid #315473; border-radius: 9px; background: rgba(18, 43, 67, .75); }
.route-chip strong { font-size: .75rem; }
.route-chip small { color: var(--muted); font-size: .67rem; }
.live-viewport { overflow: auto; contain: strict; border: 1px solid rgba(54, 85, 117, .7); border-radius: 11px; background: rgba(5, 14, 25, .52); }
.live-call-rows { min-height: 100%; }
.live-call-row { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 15px; border-bottom: 1px solid rgba(54, 85, 117, .44); }
.live-call-row:hover { background: rgba(39, 79, 115, .2); }
.live-call-main, .live-call-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-call-main { min-width: 0; }
.live-call-main strong { min-width: 112px; }
.live-call-meta { justify-content: flex-end; color: #b7c9de; font-size: .76rem; }
.live-call-meta > span { white-space: nowrap; }
.live-status { background: #243b60; color: #c0e1ff; }
.live-status.playing { background: rgba(35, 116, 79, .7); color: #c2f6d1; }
.live-status.ringing, .live-status.dialing, .live-status.preparing, .live-status.retry-wait { background: rgba(117, 87, 31, .7); color: #f5dc94; }
.live-status.detecting, .live-status.answered, .live-status.waiting-for-beep { background: rgba(77, 53, 119, .75); color: #ddcaff; }
.live-empty { padding: 18px; }
.live-call-dialog { width: min(680px, 94vw); }
.live-call-dialog pre { max-height: 62vh; overflow: auto; }
.live-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.live-detail-item { display: grid; gap: 4px; min-width: 0; padding: 10px; border: 1px solid rgba(54, 85, 117, .55); border-radius: 8px; background: rgba(5, 14, 25, .35); }
.live-detail-item span, .audit-timing-list span { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.live-detail-item strong { overflow-wrap: anywhere; color: var(--text); font-size: .78rem; }
.audit-dialog { width: min(1040px, 95vw); max-height: 92vh; }
.audit-summary-note { display: grid; gap: 4px; margin-bottom: 14px; padding: 11px 13px; border-left: 3px solid var(--success); border-radius: 8px; background: rgba(40, 133, 91, .13); color: #b9efd0; font-size: .78rem; line-height: 1.45; }
.audit-summary-note strong { color: var(--success); }
.audit-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.audit-kpi-grid .metric { padding: 13px; }
.audit-kpi-grid .metric strong { font-size: 1.35rem; }
.audit-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 15px; }
.audit-columns h3, .audit-call-heading h3 { margin: 0 0 9px; font-size: .82rem; }
.audit-count-list, .audit-timing-list { display: grid; gap: 6px; }
.audit-count-row, .audit-timing-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid rgba(54, 85, 117, .55); border-radius: 8px; background: rgba(5, 14, 25, .35); color: #bfd0e3; font-size: .76rem; }
.audit-count-row strong, .audit-timing-list strong { color: var(--text); white-space: nowrap; }
.audit-timing-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.audit-timing-list > div { display: grid; gap: 4px; }
.audit-timing-list strong { font-size: .78rem; }
.audit-table-wrap { overflow-x: auto; border: 1px solid rgba(54, 85, 117, .55); border-radius: 9px; }
.audit-table-wrap table { min-width: 780px; margin: 0; font-size: .76rem; }
.audit-table-wrap th, .audit-table-wrap td { padding: 9px 8px; }
.audit-table-wrap td small { display: block; margin-top: 3px; }
.audit-gate { display: block; max-width: 220px; color: #cce7ff; font-weight: 700; }
.audit-empty { padding: 18px; }
.health-center { border-color: #315473; background: linear-gradient(145deg, rgba(16, 42, 65, .96), rgba(10, 25, 42, .96)); }
.health-center.health-status-green { border-color: #2f9b70; }
.health-center.health-status-yellow { border-color: #9b7a35; }
.health-center.health-status-red { border-color: #a74c61; }
.health-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: .74rem; font-weight: 850; }
.health-badge.health-status-green { background: rgba(40, 133, 91, .22); color: var(--success); }
.health-badge.health-status-yellow { background: rgba(148, 107, 35, .22); color: var(--warning); }
.health-badge.health-status-red { background: rgba(157, 48, 75, .22); color: var(--danger); }
.health-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 14px; }
.health-kpi-grid .metric { padding: 13px; }
.health-kpi-grid .metric strong { font-size: 1.35rem; }
.health-alerts { display: grid; gap: 7px; margin: 0 0 15px; }
.health-alert { display: flex; gap: 9px; align-items: baseline; padding: 9px 11px; border-left: 3px solid var(--warning); border-radius: 7px; background: rgba(148, 107, 35, .14); color: #f3db9c; font-size: .8rem; }
.health-alert.critical { border-left-color: var(--danger); background: rgba(157, 48, 75, .16); color: #ffc2cf; }
.health-alert strong { font-size: .68rem; letter-spacing: .08em; }
.health-clear { margin: 0 0 15px; padding: 9px 11px; border-left: 3px solid var(--success); border-radius: 7px; background: rgba(40, 133, 91, .13); color: #b9efd0; font-size: .8rem; }
.health-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.health-detail-grid h3 { margin: 0 0 9px; font-size: .82rem; }
.health-failure-list, .health-route-list { display: grid; gap: 6px; }
.health-failure-row, .health-route-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid rgba(54, 85, 117, .55); border-radius: 8px; background: rgba(5, 14, 25, .35); color: #bfd0e3; font-size: .76rem; }
.health-failure-row span { min-width: 0; overflow-wrap: anywhere; }
.health-failure-row strong { color: var(--text); white-space: nowrap; }
.health-route-row { align-items: baseline; }
.health-route-row strong { color: #cce7ff; }
.health-route-row span { color: var(--muted); text-align: right; }

.tts-status, .operation-status { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tts-status { min-width: 220px; flex-direction: column; align-items: flex-start; gap: 2px; }
.tts-status strong { color: var(--text); }
.operation-status { margin: 0; padding: 10px 12px; border: 1px solid rgba(88, 166, 255, .5); border-radius: 9px; background: rgba(23, 59, 99, .35); color: #cce7ff; font-size: .82rem; }
.live-tts-panel { border-color: rgba(88, 166, 255, .62); background: linear-gradient(145deg, rgba(20, 48, 78, .96), rgba(12, 26, 43, .96)); }
.panel-heading, .live-tts-result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.panel-heading h2 { margin: 2px 0 0; }
.badge { display: inline-flex; align-items: center; border: 1px solid rgba(111, 224, 165, .4); border-radius: 999px; padding: 5px 9px; background: rgba(40, 133, 91, .16); color: var(--success); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.live-tts-form { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.live-tts-form > label:not(.live-tts-script) {
  min-width: 0;
  grid-template-rows: minmax(1.2em, auto) 42px minmax(1em, auto);
  align-content: start;
}
.live-tts-form > label > input,
.live-tts-form > label > select {
  height: 42px;
  min-height: 42px;
}
.live-tts-form label small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.live-tts-script { grid-column: 1 / -1; }
.live-tts-script textarea { min-height: 140px; resize: vertical; font-family: inherit; font-size: .9rem; }
.live-tts-actions { grid-column: 1 / -1; }
.live-tts-result { display: grid; gap: 12px; margin-top: 17px; padding-top: 16px; border-top: 1px solid rgba(54, 85, 117, .7); }
.live-tts-result-heading strong, .live-tts-result-heading .muted { display: block; }
.live-tts-result-heading .muted { margin-top: 4px; }
.tts-preview-audio { width: min(520px, 100%); height: 42px; }
.button-spinner { display: inline-block; width: 15px; height: 15px; flex: 0 0 auto; border: 2px solid rgba(204, 231, 255, .35); border-top-color: #cce7ff; border-radius: 50%; animation: operation-spin .7s linear infinite; }
@keyframes operation-spin { to { transform: rotate(360deg); } }
.tts-error { margin-top: 4px; font-size: .78rem; }
.preflight-panel, .preflight-dialog { border-color: var(--accent); }
.preflight-dialog { width: min(860px, 94vw); }
.preflight-commands { display: grid; gap: 12px; padding-left: 24px; }
.preflight-commands li { color: #b8c7dc; }
pre { margin: 6px 0; padding: 12px; overflow-x: auto; border: 1px solid var(--border); border-radius: 9px; background: #091525; color: #b9e2ff; white-space: pre-wrap; word-break: break-word; font: .8rem ui-monospace, monospace; }

.modal-dialog { width: min(760px, 92vw); max-height: 90vh; padding: 0; border: 1px solid var(--border-strong); border-radius: 15px; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(0, 0, 0, .55); }
.modal-dialog.form-modal { width: min(1080px, 94vw); overflow: auto; }
.modal-dialog.form-modal > .panel { margin: 0; border: 0; border-radius: 0; }
.modal-dialog::backdrop { background: rgba(3, 8, 18, .78); backdrop-filter: blur(4px); }
.modal-card { display: grid; gap: 16px; max-height: 90vh; overflow: auto; padding: 24px; }
.restart-dialog { width: min(900px, 94vw); }
.restart-mode-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.restart-mode-list legend { grid-column: 1 / -1; margin-bottom: 2px; color: var(--text); font-size: .82rem; font-weight: 800; }
.restart-mode-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: rgba(7, 20, 35, .54); cursor: pointer; }
.restart-mode-card:has(input:checked) { border-color: var(--accent); background: rgba(31, 84, 137, .2); box-shadow: inset 0 0 0 1px rgba(88, 166, 255, .2); }
.restart-mode-card input { width: auto; margin: 3px 0 0; accent-color: var(--accent); }
.restart-mode-card span { display: grid; gap: 5px; }
.restart-mode-card small { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.restart-exclusions textarea { min-height: 92px; resize: vertical; }
.restart-preview { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: rgba(5, 14, 25, .36); }
.restart-preview > p { margin: 0; }
.restart-preview-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.restart-preview-grid .metric { min-width: 0; padding: 10px; }
.restart-preview-grid .metric strong { font-size: 1.25rem; }
.restart-assignment-summary { font-size: .76rem; }
.restart-blocked-list { display: grid; gap: 7px; }
.restart-blocked-list > strong { color: var(--warning); font-size: .76rem; }
.restart-blocked-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 9px 10px; border: 1px solid rgba(244, 204, 114, .35); border-radius: 8px; background: rgba(117, 87, 31, .12); font-size: .74rem; }
.restart-blocked-list small { grid-column: 1 / -1; color: var(--muted); }
.restart-preview-error { border-color: rgba(255, 135, 156, .48); color: var(--danger); }
@media (max-width: 760px) {
  .restart-mode-list { grid-template-columns: 1fr; }
  .restart-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.modal-close { margin-bottom: 4px; }
.modal-actions { justify-content: flex-end; }
.danger-zone { border: 1px solid #7f3d4e; border-radius: 9px; padding: 12px; margin-top: 12px; background: rgba(166, 64, 85, .08); }
.danger-zone summary { color: var(--danger); }
.wizard-progress { display: grid; gap: 7px; padding: 12px; border: 1px solid #2c4668; border-radius: 9px; background: #0d192b; }
.wizard-progress-label { font-size: .86rem; font-weight: 700; }
.wizard-progress-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--border); }
.wizard-progress-bar { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .18s ease; }
.wizard-steps { display: grid; gap: 14px; }
.wizard-step[hidden] { display: none; }
.wizard-step-heading { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 6px; }
.wizard-step-number { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: #b9e2ff; font-size: .8rem; font-weight: 800; }
.wizard-footer { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.wizard-footer .wizard-submit { margin-left: auto; }
.campaign-tag { margin-top: 5px; border: 1px solid #2f9b70; background: rgba(47, 155, 112, .16); color: var(--success); }
.voicemail-choice-list { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; margin-top: 12px; padding: 10px; border: 1px solid #2c4668; border-radius: 7px; background: #091525; }
.voicemail-choice { padding: 6px 8px; border-radius: 6px; }
.voicemail-choice:hover { background: var(--surface-raised); }
.voicemail-choice span { display: grid; gap: 2px; }
.voicemail-choice small { font-size: .76rem; }
.callback-page { display: grid; gap: 18px; }
.contact-details-page { display: grid; gap: 18px; }
.contact-details-hero { background: radial-gradient(circle at 85% 20%, rgba(67, 142, 205, .2), transparent 34%), linear-gradient(130deg, #102944, #0c192b 68%, #132a43); }
.contact-details-hero h2 { margin: 5px 0 7px; }
.contact-details-hero p:not(.eyebrow) { max-width: 720px; margin: 0; color: #abc0d7; line-height: 1.55; }
.contact-details-layout { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); align-items: start; }
.contact-details-config-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 17px 0 13px; }
.contact-details-config-status > div { display: grid; gap: 5px; min-width: 0; padding: 11px; border: 1px solid rgba(54, 85, 117, .56); border-radius: 8px; background: rgba(5, 14, 25, .35); }
.contact-details-config-status strong { overflow-wrap: anywhere; color: var(--text); font-size: .82rem; }
.contact-details-lookup-form { display: flex; align-items: end; gap: 10px; }
.contact-details-lookup-form label { flex: 1; }
.contact-details-lookup-form button { white-space: nowrap; }
.contact-details-results { display: grid; gap: 7px; margin-top: 17px; }
.contact-details-result-section { border: 1px solid var(--border); border-radius: 9px; background: rgba(7, 18, 32, .42); }
.contact-details-result-section summary { padding: 11px 13px; color: #cce7ff; cursor: pointer; font-size: .8rem; font-weight: 750; }
.contact-details-result-section pre { margin: 0 11px 11px; max-height: 340px; overflow: auto; }
.contact-details-result-grid { display: grid; gap: 10px; margin-top: 17px; }
.contact-details-result-card { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--border-strong); border-radius: 11px; background: linear-gradient(145deg, rgba(17, 36, 58, .82), rgba(8, 20, 35, .72)); }
.contact-details-result-card h4 { margin: 0; color: var(--text); font-size: .92rem; }
.contact-details-usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.contact-details-usage > div { display: grid; gap: 3px; padding: 10px; border: 1px solid rgba(54, 85, 117, .56); border-radius: 8px; background: rgba(5, 14, 25, .35); }
.contact-details-usage span, .contact-details-usage small { color: var(--muted); font-size: .68rem; }
.contact-details-usage strong { color: var(--success); font-size: 1.25rem; line-height: 1; }
.contact-details-fields { display: grid; gap: 7px; padding: 0 11px 11px; }
.contact-details-field { display: grid; grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 9px; border: 1px solid rgba(54, 85, 117, .5); border-radius: 7px; background: rgba(5, 14, 25, .3); }
.contact-details-field > span, .contact-details-field-group > span { color: var(--muted); font-size: .72rem; }
.contact-details-field strong { overflow-wrap: anywhere; color: var(--text); font-size: .8rem; font-weight: 650; }
.contact-details-field-group { display: grid; gap: 7px; padding: 9px; border: 1px solid rgba(54, 85, 117, .5); border-radius: 7px; background: rgba(5, 14, 25, .22); }
.contact-details-card-list { display: grid; gap: 8px; padding: 0 11px 11px; }
.contact-details-data-card { display: grid; gap: 7px; padding: 10px; border: 1px solid rgba(54, 85, 117, .55); border-radius: 8px; background: rgba(5, 14, 25, .3); }
.contact-details-data-card .contact-details-fields { padding: 0; }
.callback-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; border: 1px solid #2d5276; border-radius: 17px; background: radial-gradient(circle at 85% 20%, rgba(67, 142, 205, .2), transparent 34%), linear-gradient(130deg, #102944, #0c192b 68%, #132a43); box-shadow: var(--shadow); }
.callback-hero h2 { margin: 5px 0 7px; font-size: clamp(1.45rem, 3vw, 2.05rem); letter-spacing: -.04em; }
.callback-hero p { max-width: 720px; margin: 0; color: #abc0d7; line-height: 1.55; }
.callback-hero-note { display: grid; flex: 0 0 auto; min-width: 105px; justify-items: center; padding: 13px 17px; border: 1px solid rgba(111, 224, 165, .35); border-radius: 12px; background: rgba(8, 27, 39, .5); }
.callback-hero-note strong { color: var(--success); font-size: 1.65rem; line-height: 1; }
.callback-hero-note span { margin-top: 5px; color: #a9bdd1; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.callback-layout { grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); align-items: start; }
.callback-builder, .callback-runs-panel { min-width: 0; }
.callback-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.callback-panel-heading h3 { margin: 5px 0 5px; font-size: 1.15rem; letter-spacing: -.02em; }
.callback-panel-heading p { margin: 0; line-height: 1.45; }
.callback-step-badge { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid rgba(88, 166, 255, .55); border-radius: 9px; background: var(--accent-soft); color: #b9e2ff; font-size: .72rem; font-weight: 850; }
.callback-primary-fields { margin-top: 0; }
.callback-import-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; margin: 16px 0 19px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: rgba(7, 18, 32, .42); }
.callback-import-copy { display: grid; gap: 3px; min-width: 0; }
.callback-import-copy strong { color: var(--text); font-size: .82rem; }
.callback-import-copy .muted { margin: 0; font-size: .74rem; }
.field-kicker { color: #7fa7c9; font-size: .65rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.callback-file-picker { display: flex; align-items: center; justify-content: center; min-width: 116px; min-height: 38px; padding: 0 11px; border: 1px solid #3b6891; border-radius: 8px; background: rgba(35, 84, 128, .32); color: #cce7ff; cursor: pointer; font-size: .75rem; font-weight: 750; text-align: center; }
.callback-file-picker:hover { border-color: var(--accent); background: rgba(43, 103, 155, .45); }
.callback-file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.button-link { white-space: nowrap; }
.callback-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 0 10px; }
.callback-section-heading h3 { margin: 4px 0 3px; font-size: .96rem; }
.callback-section-heading p { margin: 0; font-size: .76rem; }
.callback-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; gap: 9px; padding: 13px; border: 1px solid #2c4b6d; border-radius: 11px; background: linear-gradient(145deg, rgba(13, 31, 51, .76), rgba(7, 18, 32, .54)); }
.callback-row + .callback-row { margin-top: 9px; }
.callback-row label { min-width: 0; color: #b9cbe0; font-size: .75rem; }
.callback-row input, .callback-row select { min-width: 0; padding: 9px 9px; font-size: .8rem; }
.callback-row .remove-callback-row { height: 38px; white-space: nowrap; }
.callback-rows-imported { opacity: .48; }
.callback-rows-imported .callback-row { border-style: dashed; }
.callback-settings { margin-top: 18px; padding: 0; border: 1px solid var(--border); border-radius: 10px; }
.callback-settings summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; list-style: none; }
.callback-settings summary::-webkit-details-marker { display: none; }
.callback-settings summary > span:first-child { display: grid; gap: 3px; }
.callback-settings summary small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.summary-chevron { color: var(--accent); font-size: 1rem; }
.callback-settings[open] .summary-chevron { transform: rotate(180deg); }
.callback-settings > .form-grid { margin: 0; padding: 0 13px 13px; }
.callback-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.callback-submit-row > div { display: grid; gap: 3px; }
.callback-submit-row .muted { font-size: .74rem; }
.callback-submit-row button { white-space: nowrap; }
.callback-run-stack { display: grid; gap: 12px; }
.callback-run-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: linear-gradient(145deg, rgba(17, 36, 58, .9), rgba(8, 20, 35, .78)); }
.callback-run-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.callback-run-card h3 { margin: 5px 0 3px; color: var(--text); font-size: 1rem; }
.callback-run-card-header p { margin: 0; font-size: .74rem; }
.callback-state { display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid #3b5c7d; border-radius: 999px; padding: 5px 9px; color: #c6d9ed; font-size: .67rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.callback-state.running { border-color: rgba(111, 224, 165, .5); background: rgba(40, 133, 91, .2); color: var(--success); }
.callback-state.starting, .callback-state.stopping { border-color: rgba(244, 194, 85, .5); background: rgba(148, 107, 35, .18); color: var(--warning); }
.callback-state.failed, .callback-state.stopped { border-color: rgba(255, 135, 156, .55); background: rgba(157, 48, 75, .18); color: var(--danger); }
.callback-run-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.callback-run-kpis > div { display: grid; gap: 4px; min-width: 0; padding: 9px; border: 1px solid rgba(54, 85, 117, .56); border-radius: 8px; background: rgba(5, 14, 25, .35); }
.callback-run-kpis span { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; }
.callback-run-kpis strong { overflow: hidden; color: var(--text); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.callback-live-panel { display: grid; gap: 8px; padding: 11px; border: 1px solid rgba(47, 155, 112, .55); border-radius: 9px; background: rgba(13, 48, 55, .42); }
.callback-card-section-title { display: flex; align-items: center; gap: 8px; color: #b8d8d1; font-size: .72rem; font-weight: 750; }
.callback-live-list { display: grid; gap: 6px; }
.callback-live-call { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 9px; padding: 8px 9px; border: 1px solid rgba(54, 123, 105, .45); border-radius: 7px; background: rgba(5, 18, 27, .38); font-size: .72rem; }
.callback-live-call strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callback-live-call > span:last-child { grid-column: 1 / -1; color: var(--muted); }
.callback-run-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(54, 85, 117, .45); }
.callback-run-card-footer p { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .72rem; }
.callback-empty-state { display: grid; justify-items: center; gap: 7px; padding: 42px 20px; border: 1px dashed #345674; border-radius: 11px; background: rgba(7, 18, 32, .3); text-align: center; }
.callback-empty-state p { max-width: 240px; margin: 0; font-size: .76rem; line-height: 1.45; }
.callback-empty-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #3b6891; border-radius: 10px; color: #b9e2ff; font-size: 1.2rem; }
.callback-live-preview { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); color: #b9e2ff; font-size: .76rem; line-height: 1.45; }
@media (max-width: 1120px) { .callback-layout { grid-template-columns: 1fr; } .callback-runs-panel { order: 2; } .callback-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .callback-row .remove-callback-row { width: fit-content; } }
@media (max-width: 620px) { .callback-hero { align-items: flex-start; flex-direction: column; padding: 20px; } .callback-hero-note { align-self: stretch; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 8px; } .callback-hero-note span { margin: 0; } .callback-import-row, .callback-row { grid-template-columns: 1fr; } .callback-section-heading, .callback-submit-row, .callback-run-card-footer { align-items: stretch; flex-direction: column; } .callback-section-heading .button, .callback-section-heading button, .callback-submit-row button { width: 100%; } .callback-submit-row button { justify-content: center; } .callback-run-kpis { grid-template-columns: 1fr; } .callback-live-call { grid-template-columns: 1fr; } .callback-live-call > span:last-child { grid-column: auto; } }

@media (max-width: 1000px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabs { top: 79px; }
  .contact-details-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .shell { width: min(100% - 24px, 680px); padding-top: 12px; }
  .login-layout { grid-template-columns: 1fr; gap: 28px; min-height: auto; padding: 32px 0 48px; }
  .login-brand { gap: 22px; padding: 8px 0; }
  .login-brand-copy h1 { max-width: 600px; font-size: clamp(2.2rem, 9vw, 3.4rem); }
  .login-brand-copy p:last-child { font-size: .92rem; }
  .login-trust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .login-trust-list span { align-items: flex-start; gap: 7px; font-size: .72rem; line-height: 1.35; }
  .login-trust-list i { flex: 0 0 auto; }
  .login-card { max-width: 560px; }
  .topbar { position: static; margin: -12px 0 14px; padding-top: 14px; }
  .tabs { position: sticky; top: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
  .tabs button { white-space: nowrap; }
  .hero-panel { align-items: flex-start; flex-direction: column; padding: 20px; }
  .hero-status, .live-header-status { justify-items: start; }
  .metric-grid, .live-kpi-grid, .health-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-outcome-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .campaign-stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
  .campaign-capacity-total { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-detail-grid { grid-template-columns: 1fr; }
  .audit-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-detail-grid, .audit-columns, .audit-timing-list { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .live-tts-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .live-call-row { min-height: 88px; display: grid; gap: 8px; }
  .live-call-meta { justify-content: flex-start; }
  .live-toolbar .live-count { width: 100%; margin-left: 0; padding-bottom: 0; }
  .contact-details-config-status { grid-template-columns: 1fr; }
  .contact-details-lookup-form { align-items: stretch; flex-direction: column; }
  .contact-details-usage { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .shell { width: calc(100% - 18px); }
  .login-layout { gap: 22px; padding-top: 22px; }
  .login-brand { gap: 20px; }
  .login-brand-copy h1 { font-size: 2.35rem; }
  .login-trust-list { grid-template-columns: 1fr; gap: 9px; }
  .login-build { display: none; }
  .login-card { padding: 24px 20px; border-radius: 14px; }
  .topbar { align-items: flex-start; }
  .topbar button { padding: 8px 10px; }
  .metric-grid, .live-kpi-grid { gap: 9px; }
  .campaign-outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-stat-heading, .campaign-dashboard-panel .section-heading, .carrier-health-alert { align-items: flex-start; flex-direction: column; }
  .campaign-dashboard-status { align-items: flex-start; text-align: left; }
  .campaign-list-heading { display: grid; }
  .live-tts-form { grid-template-columns: 1fr; }
  .live-tts-script, .live-tts-actions { grid-column: auto; }
  .metric { padding: 13px; }
  .metric strong { font-size: 1.35rem; }
  .audit-kpi-grid { grid-template-columns: 1fr; }
  .live-call-main strong { min-width: 96px; }
  .live-call-meta { gap: 7px; font-size: .7rem; }
  .wizard-footer { position: sticky; bottom: 0; padding-bottom: 4px; background: var(--surface); }
  .wizard-footer .wizard-submit { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------------------------
   Outbound portal visual system
   The application is intentionally selector-compatible with the existing
   portal JavaScript. This layer upgrades the shell and components without
   changing any workflow or data hooks.
   ------------------------------------------------------------------------- */
:root {
  --bg: #07101c;
  --surface: #0c1828;
  --surface-raised: #12243a;
  --surface-soft: #091524;
  --border: rgba(111, 145, 181, .22);
  --border-strong: rgba(126, 166, 207, .42);
  --text: #f2f7fd;
  --muted: #91a7bf;
  --accent: #66b7ff;
  --accent-soft: rgba(47, 129, 207, .2);
  --success: #70e3ae;
  --warning: #f5cf76;
  --danger: #ff8fa5;
  --purple: #c9b0ff;
  --shadow: 0 22px 70px rgba(0, 0, 0, .28);
}

html { scroll-behavior: smooth; }
body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% -12%, rgba(51, 137, 204, .2), transparent 32rem),
    radial-gradient(circle at 98% 18%, rgba(36, 83, 153, .14), transparent 30rem),
    linear-gradient(180deg, #07101c 0%, #091421 48%, #07101c 100%);
}
body::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(117, 171, 214, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(117, 171, 214, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.shell { width: min(1540px, calc(100% - 48px)); padding: 28px 0 76px; }

#app:not([hidden]) {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  grid-template-areas:
    "topbar topbar"
    "nav content";
  column-gap: 24px;
  align-items: start;
}
#app > .topbar {
  grid-area: topbar;
  position: static;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-width: 0;
  margin: 0 0 19px;
  padding: 15px 4px 17px;
  background: transparent;
  border-bottom: 1px solid rgba(117, 158, 198, .24);
  backdrop-filter: none;
}
.topbar-title { display: flex; align-items: center; gap: 13px; min-width: 0; }
.topbar-title > div { min-width: 0; }
.topbar-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(126, 204, 255, .55);
  border-radius: 14px;
  background: linear-gradient(145deg, #287eb9, #183862 76%);
  box-shadow: 0 10px 28px rgba(30, 112, 177, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #effaff;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
}
#app .topbar h1 { margin: 0 0 4px; font-size: clamp(1.25rem, 2vw, 1.58rem); letter-spacing: -.045em; }
.topbar .eyebrow { margin-bottom: 3px; }
.identity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: #a7bbd1;
  font-size: .75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.identity-pill:not(:empty)::before { content: ''; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(112, 227, 174, .1); }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 0 0 auto; }
.topbar-health {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(112, 227, 174, .22);
  border-radius: 999px;
  background: rgba(29, 111, 79, .12);
  color: #b7e8cf;
  font-size: .71rem;
  font-weight: 750;
  white-space: nowrap;
}
.topbar-health .status-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(112, 227, 174, .1); }
.signout-icon { color: #9fc7e9; font-size: 1rem; line-height: 1; }

#app > .tabs {
  grid-area: nav;
  position: sticky;
  top: 112px;
  z-index: 20;
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(113, 153, 193, .28);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(15, 31, 50, .94), rgba(8, 19, 33, .9));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(18px);
}
.nav-rail-brand { display: flex; align-items: center; gap: 10px; padding: 5px 6px 14px; margin-bottom: 5px; border-bottom: 1px solid rgba(112, 151, 190, .18); }
.nav-rail-brand > span:last-child { display: grid; gap: 2px; }
.nav-rail-brand strong { color: #f2f8ff; font-size: .84rem; letter-spacing: .11em; }
.nav-rail-brand small { color: #7896b4; font-size: .65rem; letter-spacing: .05em; }
.nav-rail-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(104, 188, 255, .42); border-radius: 10px; background: rgba(50, 132, 204, .2); color: #9bd7ff; font-size: .9rem; }
.nav-rail-label { margin: 7px 7px 5px; color: #6684a3; font-size: .63rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
#app > .tabs button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #9aafc6;
  font-size: .78rem;
  font-weight: 720;
  text-align: left;
}
#app > .tabs button:hover { border-color: rgba(112, 170, 216, .18); background: rgba(61, 111, 157, .18); color: #e4f1fd; }
#app > .tabs button.active {
  border-color: rgba(102, 183, 255, .5);
  background: linear-gradient(100deg, rgba(40, 119, 190, .42), rgba(35, 75, 126, .25));
  color: #f4f9ff;
  box-shadow: inset 3px 0 0 #69bdff, 0 7px 18px rgba(18, 74, 126, .16);
}
.tab-icon { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border: 1px solid rgba(123, 157, 191, .22); border-radius: 7px; color: #86a6c4; font-size: .86rem; line-height: 1; }
#app > .tabs button.active .tab-icon { border-color: rgba(121, 202, 255, .48); background: rgba(89, 177, 241, .16); color: #bce6ff; }
.nav-rail-footer { display: flex; align-items: center; gap: 9px; margin: 12px 5px 2px; padding: 11px 7px 2px; border-top: 1px solid rgba(112, 151, 190, .18); color: #8da7bf; }
.nav-rail-footer > span:last-child { display: grid; gap: 2px; min-width: 0; }
.nav-rail-footer strong { color: #bad8cd; font-size: .69rem; }
.nav-rail-footer small { color: #637e9a; font-size: .62rem; }
.nav-rail-status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(112, 227, 174, .1); }

#app > #notice, #app > .tab { grid-column: 2; min-width: 0; }
#app > #notice { margin: 0 0 14px; }
.notice:empty { display: none !important; }

.card, .panel {
  border-color: rgba(112, 151, 190, .26);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(17, 35, 57, .96), rgba(9, 22, 38, .97));
  box-shadow: 0 18px 52px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .035);
}
#app .panel { padding: 24px; }
#app .panel > h2:first-child, #app .panel > h3:first-child { letter-spacing: -.035em; }
.section-heading { margin-bottom: 18px; }
.section-heading h2, .section-heading h3 { letter-spacing: -.035em; }
.hero-panel, .recording-hero, .callback-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(101, 171, 224, .4);
  border-radius: 21px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hero-panel::after, .recording-hero::after, .callback-hero::after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -130px;
  width: 330px;
  height: 260px;
  border: 1px solid rgba(102, 183, 255, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(102, 183, 255, .035), 0 0 0 44px rgba(102, 183, 255, .025);
  pointer-events: none;
}
.hero-panel > *, .recording-hero > *, .callback-hero > * { position: relative; z-index: 1; }
.metric {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  border-color: rgba(112, 151, 190, .27);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(25, 50, 79, .72), rgba(12, 29, 48, .74));
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.metric::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 2px; border-radius: 0 0 999px 999px; background: rgba(133, 190, 236, .22); }
.metric:hover { transform: translateY(-2px); border-color: rgba(111, 190, 245, .48); background: linear-gradient(145deg, rgba(29, 61, 94, .82), rgba(13, 32, 52, .78)); }
.metric.accent::before { background: linear-gradient(90deg, #6bc8ff, #8aafff); }
.metric strong { font-variant-numeric: tabular-nums; }
.overview-live-panel, .live-activity-panel { border-color: rgba(78, 190, 142, .5); box-shadow: 0 18px 52px rgba(12, 82, 62, .14), inset 0 1px 0 rgba(176, 255, 218, .05); }

button, .button {
  min-height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #62b5ff, #3e7fd1);
  box-shadow: 0 8px 18px rgba(24, 99, 166, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .16s ease, filter .16s ease, border-color .16s ease, box-shadow .16s ease;
}
button:hover, .button:hover { box-shadow: 0 11px 24px rgba(24, 99, 166, .27), inset 0 1px 0 rgba(255, 255, 255, .18); }
button.secondary, .button.secondary { background: linear-gradient(145deg, rgba(35, 64, 94, .98), rgba(24, 46, 71, .98)); border-color: rgba(114, 157, 198, .42); }
button.danger, .button.danger { background: linear-gradient(145deg, #913c55, #6d2d43); border-color: rgba(255, 143, 165, .5); }
button.small, .button.small { min-height: 33px; border-radius: 9px; }

form { gap: 16px; }
label { color: #bdd0e3; font-size: .81rem; font-weight: 650; }
input, textarea, select {
  min-height: 42px;
  border-color: rgba(115, 156, 198, .42);
  border-radius: 10px;
  background: rgba(5, 15, 27, .72);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:hover, textarea:hover, select:hover { border-color: rgba(129, 181, 228, .64); }
input:focus, textarea:focus, select:focus { border-color: rgba(102, 183, 255, .9); background: rgba(7, 21, 37, .9); box-shadow: 0 0 0 4px rgba(102, 183, 255, .12), inset 0 1px 2px rgba(0, 0, 0, .18); outline: none; }
fieldset.trunk-card, .campaign-type-box, .campaign-details-box, .recipient-box, .regular-voicemail-box, .test-voicemail-box, .test-delivery-box {
  border-color: rgba(116, 158, 199, .35);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(13, 30, 50, .62), rgba(7, 18, 32, .42));
}
fieldset legend { color: #d8e9f8; }
details { border-color: rgba(112, 151, 190, .24); }
details > summary { padding: 1px 0; color: #d9eaf9; }
#app form > details {
  border: 1px solid rgba(116, 158, 199, .3);
  border-radius: 14px;
  padding: 0 14px;
  background: rgba(7, 18, 32, .28);
}
#app form > details > summary { padding: 14px 0; }
#app form > details[open] > summary { margin-bottom: 2px; color: #eff7ff; }
#app form > details > .form-grid { padding-bottom: 14px; }
.actions { gap: 9px; }

table { font-size: .81rem; border-collapse: separate; border-spacing: 0; }
th { padding: 13px 11px; border-bottom-color: rgba(120, 163, 204, .3); background: rgba(6, 16, 29, .3); color: #8eabc7; font-size: .66rem; letter-spacing: .1em; }
td { padding: 14px 11px; border-bottom-color: rgba(112, 151, 190, .17); color: #c1d2e4; }
tbody tr { transition: background .14s ease; }
tbody tr:hover { background: rgba(64, 126, 175, .16); }
tbody tr:last-child td { border-bottom: 0; }
.status { font-weight: 760; }

.live-toolbar { border-color: rgba(108, 160, 198, .28); border-radius: 13px; background: rgba(5, 16, 28, .34); }
.live-viewport { border-color: rgba(108, 160, 198, .35); border-radius: 14px; background: rgba(4, 13, 24, .56); }
.live-call-row { min-height: 78px; padding: 14px 16px; border-bottom-color: rgba(112, 151, 190, .18); }
.live-call-row:hover { background: rgba(55, 115, 163, .18); }
.live-call-main strong { color: #e8f3fc; font-variant-numeric: tabular-nums; }
.live-status { border: 1px solid rgba(139, 180, 219, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.live-status.playing { border-color: rgba(112, 227, 174, .42); }
.live-status.ringing, .live-status.dialing, .live-status.preparing, .live-status.retry-wait { border-color: rgba(245, 207, 118, .36); }
.live-status.detecting, .live-status.answered, .live-status.waiting-for-beep { border-color: rgba(190, 160, 255, .38); }
.route-chip { border-color: rgba(107, 164, 207, .35); border-radius: 10px; background: rgba(19, 49, 77, .56); }
.health-center, .preflight-panel, .live-tts-panel { border-radius: 18px; }
.toast-region { top: 92px; right: 24px; }
.toast { border-radius: 14px; border-color: rgba(126, 166, 207, .5); background: rgba(12, 28, 46, .97); }

@media (max-width: 1120px) {
  #app:not([hidden]) { grid-template-columns: 214px minmax(0, 1fr); column-gap: 18px; }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .shell { width: min(100% - 30px, 820px); padding-top: 15px; }
  #app:not([hidden]) { display: block; }
  #app > .topbar { position: static; margin: -15px 0 12px; padding: 12px 0 13px; }
  #app > .tabs {
    position: sticky;
    top: 75px;
    z-index: 25;
    display: flex;
    align-items: center;
    overflow-x: auto;
    gap: 5px;
    margin-bottom: 15px;
    padding: 7px;
    border-radius: 14px;
    scrollbar-width: thin;
  }
  .nav-rail-brand, .nav-rail-label, .nav-rail-footer { display: none; }
  #app > .tabs button { width: auto; flex: 0 0 auto; min-height: 39px; padding: 8px 10px; white-space: nowrap; }
  #app > .tabs button.active { box-shadow: inset 0 -3px 0 #69bdff, 0 6px 15px rgba(18, 74, 126, .14); }
  #app > #notice, #app > .tab { grid-column: auto; }
  .topbar-health { padding: 7px 9px; }
  .topbar-actions { gap: 8px; }
}
@media (max-width: 760px) {
  .shell { width: min(100% - 22px, 680px); }
  #app > .topbar { align-items: flex-start; }
  .topbar-mark { width: 38px; height: 38px; border-radius: 12px; }
  #app .topbar h1 { font-size: 1.2rem; }
  .topbar-health { display: none; }
  .topbar-actions { margin-top: 2px; }
  #app .panel { padding: 19px; border-radius: 16px; }
  .hero-panel, .recording-hero, .callback-hero { border-radius: 17px; }
  .hero-panel { padding: 21px; }
  .metric-grid, .live-kpi-grid, .health-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
  .live-call-row { display: grid; gap: 8px; }
  .live-call-meta { justify-content: flex-start; }
  .toast-region { top: 14px; right: 12px; width: min(390px, calc(100vw - 24px)); }
}
@media (max-width: 520px) {
  .shell { width: calc(100% - 16px); padding-bottom: 44px; }
  #app > .topbar { margin-top: -8px; padding-top: 10px; }
  .topbar-title { gap: 9px; }
  .topbar-mark { width: 34px; height: 34px; border-radius: 10px; font-size: .62rem; }
  #app .topbar h1 { font-size: 1.05rem; }
  .identity-pill { font-size: .69rem; }
  .topbar-actions button { min-height: 34px; padding: 7px 9px; font-size: .73rem; }
  #app > .tabs { top: 66px; margin-bottom: 11px; }
  #app > .tabs button { min-height: 36px; padding: 7px 9px; font-size: .72rem; }
  .tab-icon { width: 20px; height: 20px; font-size: .75rem; }
  .metric-grid, .live-kpi-grid { gap: 8px; }
  .metric { min-height: 92px; padding: 13px; }
  .metric strong { font-size: 1.28rem; }
  #app .panel { padding: 16px; }
  .section-heading { align-items: flex-start; }
  .section-heading > .actions { width: 100%; }
  .section-heading > .actions button, .section-heading > button { width: 100%; }
}

/* Edge-safe layout and a consistent select control across browsers. */
body { overflow-x: auto; }
.shell {
  width: min(1600px, 100%);
  max-width: 100%;
  padding-right: clamp(10px, 2vw, 28px);
  padding-left: clamp(10px, 2vw, 28px);
}
#app:not([hidden]), #app > .tab, #app > #notice, #app .split, #app .panel, #app fieldset, #app form, #app .hero-panel, #app .recording-hero, #app .callback-hero {
  min-width: 0;
  max-width: 100%;
}
#app .split > *, #app .form-grid > *, #app .section-heading > *, #app .row > *, #app .live-call-main, #app .live-call-meta { min-width: 0; }
#app .panel { overflow-x: auto; }
th, td { overflow-wrap: anywhere; }
pre { max-width: 100%; }

select {
  color-scheme: dark;
  cursor: pointer;
}
select:not([multiple]) {
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, #9db9d3 50%), linear-gradient(135deg, #9db9d3 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}
select:not([multiple]):hover { background-image: linear-gradient(45deg, transparent 50%, #c5e6ff 50%), linear-gradient(135deg, #c5e6ff 50%, transparent 50%); }
select:not([multiple]):focus { background-image: linear-gradient(45deg, transparent 50%, #d9f1ff 50%), linear-gradient(135deg, #d9f1ff 50%, transparent 50%); }
select[multiple], select[size]:not([size="1"]) { appearance: auto; padding-right: 11px; background-image: none; cursor: default; }
select option, select optgroup { background: #0d1d30; color: #edf5fd; }
select:disabled { cursor: not-allowed; opacity: .62; }
input[type="file"] { padding: 7px; }
input[type="file"]::file-selector-button {
  margin-right: 9px;
  padding: 7px 10px;
  border: 1px solid rgba(119, 170, 213, .4);
  border-radius: 8px;
  background: rgba(43, 91, 137, .48);
  color: #d8edff;
  font: inherit;
  font-size: .75rem;
  font-weight: 750;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: rgba(57, 119, 175, .62); }

@media (max-width: 960px) {
  #app .panel { overflow-x: auto; }
}

/* Full-canvas workspace layout. Keep the navigation and content in explicit
   grid areas so a transient notice cannot create an empty row above a tab. */
html, body { min-height: 100%; }
body { min-width: 320px; overflow-x: hidden; }
.shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: max(18px, env(safe-area-inset-top)) clamp(16px, 3vw, 48px) 58px;
}
#app:not([hidden]) {
  display: grid;
  width: 100%;
  min-height: calc(100vh - 76px);
  grid-template-columns: minmax(224px, 248px) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "topbar topbar"
    "nav notice"
    "nav content";
  column-gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}
#app > .topbar { grid-area: topbar; margin: 0 0 18px; padding: 14px 0 16px; }
#app > .tabs {
  grid-area: nav;
  position: sticky;
  top: 98px;
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}
#app > #notice { grid-area: notice; margin: 0 0 14px; min-height: 0; }
#app > .tab { grid-area: content; min-height: 0; }
#app .panel { overflow: hidden; }
#app .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#app .split > :only-child { grid-column: 1 / -1; }
#app .split.callback-layout { grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); }
#app .split.contact-details-layout { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); }
#campaign-list, #callback-run-list, #recording-list, #file-list, #contact-list, #voicemail-list, #tts-list { min-width: 0; overflow-x: auto; }
.hero-panel, .recording-hero, .callback-hero { width: 100%; }
.toast-region { top: calc(env(safe-area-inset-top) + 18px); right: clamp(12px, 2vw, 32px); }

@media (max-width: 1200px) {
  #app:not([hidden]) { grid-template-columns: 214px minmax(0, 1fr); column-gap: 20px; }
  #app .split { grid-template-columns: 1fr; }
  #app .split.callback-layout, #app .split.contact-details-layout { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .shell { width: 100%; min-height: 100vh; padding: 12px 15px 46px; }
  #app:not([hidden]) { display: block; min-height: 0; }
  #app > .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 70px;
    margin: -12px -15px 0;
    padding: 10px 15px;
    background: rgba(7, 16, 28, .96);
    border-bottom-color: rgba(117, 158, 198, .32);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    backdrop-filter: blur(18px);
  }
  #app > .topbar .eyebrow { display: none; }
  #app > .tabs {
    position: sticky;
    top: 70px;
    z-index: 29;
    display: flex;
    max-height: none;
    margin-bottom: 13px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
  #app > #notice { margin: 0 0 12px; }
  #app > .tab { min-height: 0; }
  #app .split { grid-template-columns: 1fr; }
  #app .split.callback-layout, #app .split.contact-details-layout { grid-template-columns: 1fr; }
  #app .panel { overflow: hidden; }
}

/* Short laptop screens need the complete rail to move with the page. On
   taller screens it remains sticky without creating a second scroll area. */
@media (min-width: 961px) and (max-height: 840px) {
  #app > .tabs { position: static; top: auto; }
}

@media (max-width: 560px) {
  .shell { padding-inline: 10px; padding-bottom: 34px; }
  #app > .topbar {
    height: 58px;
    margin: -12px -10px 0;
    padding: 8px 10px;
  }
  #app > .topbar h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #app > .topbar .identity-pill { display: none; }
  #app > .tabs { top: 58px; }
  #app .panel { padding: 17px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions button { min-height: 35px; padding: 7px 9px; }
  .toast-region { top: calc(env(safe-area-inset-top) + 10px); right: 10px; width: calc(100vw - 20px); }
}
.live-viewport.is-compact .live-call-row { min-height: 58px; padding-block: 9px; }

.beta-nav-label { display: inline-block; margin-left: 4px; padding: 2px 5px; border: 1px solid rgba(244, 204, 114, .45); border-radius: 999px; color: var(--warning); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.rvm-page { display: grid; gap: 18px; }
.rvm-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 27px 29px; border: 1px solid #745d31; border-radius: 17px; background: radial-gradient(circle at 85% 20%, rgba(205, 157, 59, .19), transparent 34%), linear-gradient(130deg, #28243a, #111b2d 68%, #302a1d); box-shadow: var(--shadow); }
.rvm-hero h2 { margin: 5px 0 7px; font-size: clamp(1.45rem, 3vw, 2.05rem); letter-spacing: -.04em; }
.rvm-hero p { max-width: 760px; margin: 0; color: #c2c4d6; line-height: 1.55; }
.rvm-hero-note { display: grid; flex: 0 0 auto; min-width: 105px; justify-items: center; padding: 13px 17px; border: 1px solid rgba(244, 204, 114, .4); border-radius: 12px; background: rgba(41, 34, 21, .48); }
.rvm-hero-note strong { color: var(--warning); font-size: 1.35rem; line-height: 1; letter-spacing: .08em; }
.rvm-hero-note span { margin-top: 6px; color: #c7c1ad; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.rvm-layout { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); }
.rvm-builder, .rvm-runs-panel, .rvm-safety-panel { min-width: 0; }
.rvm-authorization { margin: 16px 0; align-items: flex-start; }
.rvm-authorization input { margin-top: 3px; }
.rvm-capability { display: grid; gap: 7px; margin: 15px 0 17px; padding: 13px 14px; border: 1px solid rgba(255, 135, 156, .5); border-radius: 10px; background: rgba(93, 31, 52, .18); }
.rvm-capability.supported { border-color: rgba(111, 224, 165, .48); background: rgba(29, 91, 66, .18); }
.rvm-capability-heading { display: flex; align-items: center; gap: 8px; }
.rvm-capability-heading .status-dot { width: 8px; height: 8px; }
.rvm-capability-heading strong { color: var(--text); }
.rvm-capability p { margin: 0; color: #e2c5cc; line-height: 1.45; }
.rvm-capability.supported p { color: #bce8cd; }
.rvm-capability small { color: var(--muted); overflow-wrap: anywhere; }
.rvm-beta-chip { margin-left: auto; padding: 3px 6px; border: 1px solid rgba(244, 204, 114, .48); border-radius: 999px; color: var(--warning); font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.rvm-run-stack { display: grid; gap: 13px; }
.rvm-run-card { display: grid; gap: 14px; padding: 16px; border: 1px solid rgba(54, 85, 117, .7); border-radius: 13px; background: rgba(5, 14, 25, .3); }
.rvm-run-card-header, .rvm-run-card-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.rvm-run-card-header h3 { margin: 4px 0 4px; }
.rvm-run-card-header p { margin: 0; }
.rvm-run-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rvm-run-kpis > div { display: grid; gap: 4px; min-width: 0; padding: 9px; border: 1px solid rgba(54, 85, 117, .5); border-radius: 8px; background: rgba(8, 17, 31, .42); }
.rvm-run-kpis span, .rvm-run-kpis small { color: var(--muted); font-size: .68rem; }
.rvm-run-kpis strong { overflow-wrap: anywhere; color: var(--text); font-size: .78rem; line-height: 1.25; }
.rvm-run-note { display: grid; gap: 4px; padding: 10px 12px; border-left: 3px solid var(--success); background: rgba(29, 91, 66, .14); }
.rvm-run-note.warning { border-left-color: var(--warning); background: rgba(117, 87, 31, .14); }
.rvm-run-note strong { color: var(--text); font-size: .8rem; }
.rvm-run-note span { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.rvm-verification { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: .7rem; font-weight: 760; }
.rvm-verification.received { color: var(--success); background: rgba(47, 155, 112, .16); }
.rvm-verification.not-received { color: var(--warning); background: rgba(117, 87, 31, .18); }
.rvm-safety-panel { padding: 20px 22px; border-color: rgba(244, 204, 114, .3); }
.rvm-safety-panel h3 { margin-bottom: 6px; }
.rvm-safety-panel p { margin: 0; max-width: 900px; line-height: 1.55; }

@media (max-width: 760px) {
  .rvm-hero { align-items: flex-start; flex-direction: column; padding: 21px; }
  .rvm-hero-note { align-self: stretch; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 8px; }
  .rvm-hero-note span { margin: 0; }
  .rvm-layout { grid-template-columns: 1fr; }
  .rvm-run-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rvm-run-card-footer { align-items: stretch; flex-direction: column; }
  .rvm-run-card-footer .actions { flex-wrap: wrap; }
}

/* Let the navigation share the page canvas instead of reading as a dark card. */
#app > .tabs {
  background: #07101B !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Contextual portal guide ------------------------------------------------ */
.has-info-button { min-width: 0; }
h2.has-info-button, h3.has-info-button, legend.has-info-button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
}
summary.has-info-button { padding-right: 4px; }
label.has-info-button { position: relative; padding-right: 30px; }
label.has-info-button > .info-button { position: absolute; top: -2px; right: 0; }
.info-button,
button.info-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  min-height: 21px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(111, 183, 244, .62);
  border-radius: 50%;
  background: rgba(34, 91, 139, .28);
  box-shadow: none;
  color: #a9d9ff;
  font-family: ui-serif, Georgia, serif;
  font-size: .75rem;
  font-weight: 900;
  line-height: 1;
  text-transform: none;
  transform: none;
}
.info-button:hover { border-color: #8cd0ff; background: rgba(51, 121, 178, .48); color: white; transform: none; }
.info-button:focus-visible { outline: 3px solid rgba(102, 183, 255, .45); outline-offset: 2px; }
.help-dialog { width: min(620px, calc(100vw - 24px)); }
.help-card { gap: 16px; }
.help-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.help-card-heading h2 { margin: 0; font-size: 1.35rem; }
.help-summary { margin: 0; color: #d9e9f8; font-size: .94rem; line-height: 1.6; }
.help-details { display: grid; gap: 9px; margin: 0; }
.help-details > div { display: grid; grid-template-columns: minmax(112px, .34fr) minmax(0, 1fr); gap: 13px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: rgba(8, 21, 36, .55); }
.help-details dt { color: #9ecdf3; font-size: .72rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.help-details dd { min-width: 0; margin: 0; color: #bdcee0; font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
#help-warning-row { border-color: rgba(245, 207, 118, .38); background: rgba(101, 73, 23, .14); }
#help-warning-row dt { color: var(--warning); }

button.is-loading:not(.info-button)::before {
  content: '';
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .34);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: operation-spin .7s linear infinite;
}

@media (max-width: 560px) {
  .help-details > div { grid-template-columns: 1fr; gap: 5px; }
}