:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #0b1220; color: #e6edf7; }
* { box-sizing: border-box; } body { margin: 0; } .shell { width: min(1180px, 94vw); margin: 0 auto; padding: 28px 0 60px; }
h1, h2, h3 { margin: 0 0 8px; } h1 { font-size: 1.55rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
.card, .panel { background: #111c2e; border: 1px solid #263852; border-radius: 12px; padding: 20px; } .login-card { max-width: 420px; margin: 12vh auto; }
form { display: grid; gap: 13px; } label { display: grid; gap: 6px; color: #b8c7dc; font-size: .9rem; } input, textarea, select { width: 100%; border: 1px solid #405571; border-radius: 7px; padding: 10px; background: #0b1424; color: #e6edf7; font: inherit; } textarea { min-height: 220px; resize: vertical; font-family: ui-monospace, monospace; font-size: .82rem; }
details { border-top: 1px solid #283a52; padding: 12px 0; } details:first-of-type { border-top: 0; } summary { cursor: pointer; color: #e6edf7; font-weight: 700; margin-bottom: 12px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .form-grid > label { min-width: 0; } .check-label { display: flex; align-items: center; gap: 8px; } .check-label input { width: auto; } fieldset.trunk-card { border: 1px solid #405571; border-radius: 8px; margin: 0 0 12px; padding: 12px; } fieldset.trunk-card legend { color: #b8c7dc; padding: 0 6px; }
button, .button { border: 0; border-radius: 7px; padding: 10px 14px; background: #4f8cff; color: white; font-weight: 650; cursor: pointer; text-decoration: none; display: inline-block; } button:hover, .button:hover { filter: brightness(1.1); } button.secondary, .button.secondary { background: #273a56; } button.danger { background: #a64055; } button.small, .button.small { padding: 6px 9px; font-size: .8rem; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; } .tabs { display: flex; flex-wrap: wrap; gap: 7px; border-bottom: 1px solid #263852; padding-bottom: 12px; margin-bottom: 20px; } .tabs button { background: transparent; color: #9fb2cc; } .tabs button.active { background: #203b65; color: white; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; } .metric { padding: 18px; background: #17263d; border-radius: 10px; } .metric strong { display: block; font-size: 1.7rem; margin-top: 5px; }
.panel { margin-bottom: 16px; } .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .inline-form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; } .inline-form input { width: auto; } .actions { display: flex; gap: 8px; flex-wrap: wrap; } .muted { color: #8ea2bd; } .error { color: #ff899b; min-height: 1.2em; } .notice { min-height: 1.2em; color: #8fe0b3; } .notice.bad { color: #ff899b; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; } th, td { padding: 9px; border-bottom: 1px solid #283a52; text-align: left; vertical-align: top; } th { color: #9fb2cc; font-weight: 600; } .status { color: #9fe5b7; } .status.failed, .status.stopped { color: #ff9aaa; } .code { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, monospace; font-size: .78rem; }
.campaign-progress { display: grid; gap: 3px; white-space: normal; } .campaign-progress strong { color: #e6edf7; } .campaign-error { margin-top: 6px; font-size: .8rem; } .live-activity-panel { margin: 0 0 16px; border-color: #2f9b70; background: #102539; } .live-activity-panel table { font-size: .84rem; } .live-activity-panel td { vertical-align: middle; } .live-indicator { color: #8fe0b3; font-size: .78rem; font-weight: 700; letter-spacing: .04em; } .live-status { display: inline-block; padding: 4px 7px; border-radius: 999px; background: #203b65; color: #b9e2ff; font-size: .78rem; font-weight: 700; } .live-status.playing { background: #236244; color: #b8f1c9; } .live-status.ringing, .live-status.dialing, .live-status.preparing { background: #493e20; color: #f2d98d; } .live-status.detecting, .live-status.answered { background: #3b2c58; color: #d8bcff; } .live-status.retry-wait { background: #3e3540; color: #d8c8d8; } .live-empty { padding: 8px 0 0; } .voicemail-player-dialog { width: min(620px, 92vw); } .voicemail-player-dialog audio { width: 100%; }
.tts-progress { min-width: 180px; display: grid; gap: 5px; } .tts-progress .row { align-items: center; } .tts-progress progress { width: 100%; height: 10px; accent-color: #4f8cff; } .tts-error { margin-top: 4px; font-size: .78rem; }
.preflight-panel, .preflight-dialog { border-color: #4f8cff; } .preflight-dialog { width: min(860px, 94vw); } .preflight-commands { display: grid; gap: 12px; padding-left: 24px; } .preflight-commands li { color: #b8c7dc; } .preflight-commands strong { color: #e6edf7; } pre { margin: 6px 0; padding: 10px; overflow-x: auto; border: 1px solid #263852; border-radius: 7px; background: #0b1424; color: #b9e2ff; white-space: pre-wrap; word-break: break-word; font: .8rem ui-monospace, monospace; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .panel > h2 + button { margin-bottom: 12px; } .modal-dialog { width: min(760px, 92vw); max-height: 90vh; padding: 0; border: 1px solid #405571; border-radius: 14px; background: #111c2e; color: #e6edf7; 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, .76); backdrop-filter: blur(3px); } .modal-card { display: grid; gap: 16px; max-height: 90vh; overflow: auto; padding: 24px; } .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: #ff9aaa; } .danger-zone[open] { background: rgba(166, 64, 85, .13); } @media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } .topbar { align-items: flex-start; } table { display: block; overflow-x: auto; } }
.wizard-progress { display: grid; gap: 7px; padding: 12px; border: 1px solid #2c4668; border-radius: 9px; background: #0d192b; color: #dce8f7; } .wizard-progress-label { font-size: .86rem; font-weight: 700; } .wizard-progress-track { height: 6px; overflow: hidden; border-radius: 999px; background: #263852; } .wizard-progress-bar { display: block; height: 100%; border-radius: inherit; background: #4f8cff; 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: #203b65; color: #b9e2ff; font-size: .8rem; font-weight: 800; } .wizard-step-heading h3 { margin: 2px 0 4px; } .wizard-step-heading p { margin: 0; line-height: 1.45; } .wizard-review { padding: 14px; border: 1px solid #2f9b70; border-radius: 8px; background: rgba(47, 155, 112, .1); color: #b8f1c9; line-height: 1.5; } .wizard-footer { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid #283a52; } .wizard-footer .wizard-submit { margin-left: auto; } @media (max-width: 520px) { .wizard-footer { position: sticky; bottom: 0; padding-bottom: 4px; background: #111c2e; } .wizard-footer .wizard-submit { margin-left: 0; } }
.campaign-tag { display: inline-block; margin-top: 5px; padding: 3px 7px; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.2; } .wireguard-tag { border: 1px solid #2f9b70; background: rgba(47, 155, 112, .16); color: #9fe5b7; }
.campaign-type-box, .campaign-details-box, .recipient-box, .regular-voicemail-box, .test-voicemail-box, .test-delivery-box { border: 1px solid #405571; border-radius: 9px; padding: 14px; margin: 0; } .campaign-type-box legend, .campaign-details-box legend, .recipient-box legend, .regular-voicemail-box legend, .test-voicemail-box legend, .test-delivery-box legend { color: #e6edf7; padding: 0 6px; font-weight: 700; } .test-delivery-box { margin-top: 12px; border-color: #2c4668; } .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: #0b1424; } .voicemail-choice { padding: 5px 7px; border-radius: 5px; } .voicemail-choice:hover { background: #17263d; } .voicemail-choice span { display: grid; gap: 2px; } .voicemail-choice small { font-size: .76rem; }