.key-panel,
.message-composer,
.rules-panel,
.whatsapp-panel {
    min-width: 0;
}

.primary-key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    margin: 20px 0 14px;
    border: 1px solid #cfe0f3;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7fbff, #edf7ff);
}

.primary-key > div:first-child {
    min-width: 0;
}

.primary-key span,
.wa-session-grid span,
.fleet-card dt {
    display: block;
    margin-bottom: 7px;
    color: #67819e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.primary-key code {
    display: block;
    overflow: hidden;
    color: #0b3150;
    font-size: 17px;
    font-weight: 700;
    text-overflow: ellipsis;
}

.primary-key code[data-revealed="1"] {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    user-select: all;
}

.primary-key > div:last-child,
.fleet-actions,
.wa-actions,
.composer-tools {
    display: flex;
    gap: 8px;
}

.primary-key button,
.composer-tools button,
.fleet-actions button,
.ticket-list button,
.rule-list button {
    padding: 9px 12px;
    border: 1px solid #cbdbea;
    border-radius: 9px;
    background: #fff;
    color: #23435e;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.primary-key button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.key-security {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fff9ed;
    color: #81551e;
}

.key-security span {
    font-size: 24px;
}

.key-security p,
.gateway-explainer p,
.wa-status p,
.support-summary p {
    margin: 0;
}

.subsection-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin: 27px 0 12px;
}

.subsection-head h3,
.gateway-explainer h3 {
    margin: 0 0 5px;
}

.subsection-head p {
    margin: 0;
    color: #6a7c8d;
}

.key-list > div,
.ticket-list > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid #e5edf4;
}

.key-list small,
.ticket-list small,
.fleet-card small {
    display: block;
    margin-top: 4px;
    color: #748697;
}

.key-list code {
    color: #62778a;
}

.key-list b,
.ticket-state {
    padding: 5px 8px;
    border-radius: 999px;
    background: #e8faf2;
    color: #087a53;
    font-size: 10px;
    letter-spacing: .05em;
}

.key-app,
.support-symbol,
.rule-icon,
.wa-logo {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #e9f5ff;
    color: #0784df;
    font-weight: 800;
}

.key-app.violet {
    background: #f0eafe;
    color: #7759db;
}

.support-layout {
    display: grid;
    gap: 18px;
}

.support-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(125deg, #062b46, #075d91);
    color: #fff;
}

.support-summary > div {
    display: flex;
    align-items: center;
    gap: 17px;
}

.support-summary .panel-kicker,
.support-summary p {
    color: #c6e7fb;
}

.support-symbol {
    flex: 0 0 auto;
    background: rgba(255,255,255,.13);
    color: #fff;
    font-size: 22px;
}

.ticket-list em {
    color: #6d8193;
    font-size: 12px;
    font-style: normal;
}

.ticket-state.solved {
    background: #edf2f7;
    color: #607080;
}

.ticket-details {
    grid-column: 2 / -1;
    display: grid;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid #dbe7f0;
    border-radius: 11px;
    background: #f8fbfd;
    color: #4b6478;
}

.ticket-details[hidden] { display: none; }
.ticket-details strong { color: #17364f; font-size: 11px; }
.ticket-details p { margin: 7px 0; font-size: 11px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.ticket-details small { color: #718699; }
.ticket-entry:target {
    margin-inline: -12px;
    padding-inline: 12px;
    border-radius: 12px;
    background: #f3f9ff;
    box-shadow: inset 3px 0 #0868c7;
}
.ticket-message {
    padding: 13px 14px;
    border: 1px solid #dbe7f0;
    border-radius: 10px;
    background: #fff;
}
.ticket-message.support-message {
    border-color: #bfdbf4;
    background: #eef7ff;
}
.ticket-message header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ticket-message header time {
    color: #718699;
    font-size: 10px;
    font-weight: 600;
}
.ticket-message p:last-child { margin-bottom: 0; }

.listing-load-state {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 24px;
    background: linear-gradient(135deg, #f7fbff, #f1f8fd);
}
.listing-load-state > span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; background: #e1f1ff; color: #087cec; font-size: 20px; }
.listing-load-state > div { min-width: 0; flex: 1; }
.listing-load-state strong { color: #17364f; font-size: 12px; }
.listing-load-state p { margin: 4px 0 0; color: #6c8194; font-size: 10px; line-height: 1.5; }
@media (max-width: 620px) { .listing-load-state { align-items: stretch; flex-direction: column; } }

:where(a, button, input, textarea, select, summary):focus-visible {
    outline: 3px solid rgba(11, 131, 246, .28);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.message-composer form > label {
    display: block;
    margin-top: 17px;
}

.message-composer label > span {
    display: block;
    margin-bottom: 7px;
    color: #2d465d;
    font-size: 12px;
    font-weight: 800;
}

.message-composer textarea,
.message-composer select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cad9e6;
    border-radius: 11px;
    background: #fff;
    color: #17344b;
    font: inherit;
    resize: vertical;
}

.message-composer label > small {
    display: block;
    margin-top: 6px;
    color: #748697;
}

.composer-tools {
    padding: 14px 0 18px;
    border-bottom: 1px solid #e7eef4;
    flex-wrap: wrap;
}

.confirm-check {
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    color: #5f7385;
    font-size: 12px;
}

.device-overview-head,
.gateway-explainer,
.wa-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.device-overview-head {
    margin-bottom: 18px;
}

.device-overview-head h2 {
    margin: 2px 0 5px;
}

.device-overview-head p {
    margin: 0;
    color: #718496;
}

.device-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.fleet-card header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e4ecf3;
}

.phone-glyph {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #e7f5ff;
    color: #0089ed;
    font-size: 25px;
}

.fleet-card header b,
.wa-status > b {
    color: #0a8359;
    font-size: 10px;
    letter-spacing: .05em;
}

.fleet-card header b i,
.wa-status > b i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: #15bf80;
    box-shadow: 0 0 0 4px rgba(21,191,128,.12);
}

.fleet-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 19px 0;
}

.fleet-card dd {
    margin: 0;
    color: #14374f;
    font-weight: 700;
}

.fleet-actions {
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid #e4ecf3;
}

.fleet-actions a {
    color: #0588e5;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

/* Keep every form control visually consistent, regardless of its HTML input type. */
.form-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.message-composer input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #cad9e6;
    border-radius: 10px;
    background: #fff;
    color: #19374e;
    outline: none;
}

.form-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.message-composer input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus {
    border-color: #55a9f5;
    box-shadow: 0 0 0 3px rgba(11, 131, 246, .1);
}

/* Payment, compatibility and result panels have direct content instead of a child form. */
.form-panel > .panel-kicker:first-child {
    margin: 22px 22px 8px;
}

.form-panel > .panel-kicker:first-child ~ h2,
.form-panel > .panel-kicker:first-child ~ p:not(.panel-kicker) {
    margin-right: 22px;
    margin-left: 22px;
}

.form-panel > .panel-kicker:first-child ~ .status-chip {
    margin-left: 22px;
}

.form-panel > .panel-kicker:first-child ~ .key-security,
.form-panel > .panel-kicker:first-child ~ .plan-status {
    margin-right: 22px;
    margin-left: 22px;
}

.form-panel > .panel-kicker:first-child ~ .form-actions {
    margin: 0 22px 22px;
}

.form-panel > .panel-kicker:first-child ~ a.primary-button {
    margin: 6px 22px 22px;
}

.gateway-explainer {
    margin-top: 17px;
}

.gateway-explainer > span {
    color: #0490f4;
    font-size: 30px;
}

.gateway-explainer > div {
    flex: 1;
}

.rules-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.rule-list article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: start;
    padding: 19px 0;
    border-top: 1px solid #e4ecf3;
}

.rule-list article > a {
    color: #0877e8;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.rule-builder-form {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #a8d3f8;
    border-radius: 14px;
    background: #f3f9ff;
}

.rule-builder-form > label {
    display: block;
    margin-top: 13px;
}

.rule-builder-form label > span {
    display: block;
    margin-bottom: 6px;
    color: #38536a;
    font-size: 11px;
    font-weight: 800;
}

.rule-builder-form input,
.rule-builder-form select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #c7d8e6;
    border-radius: 10px;
    background: #fff;
    color: #19364c;
    font: inherit;
}

.rule-list small,
.rule-list p {
    display: block;
    margin: 5px 0 0;
    color: #708394;
}

.rule-list em {
    padding: 5px 8px;
    border-radius: 999px;
    background: #e8faf2;
    color: #087a53;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.rule-icon.orange {
    background: #fff2df;
    color: #e77b12;
}

.wa-status {
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid #e4ecf3;
}

.wa-status > div:nth-child(2) {
    flex: 1;
}

.wa-logo {
    flex: 0 0 auto;
    background: #e3faef;
    color: #087d55;
}

.wa-session-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.wa-session-grid > div {
    padding: 15px;
    border-radius: 12px;
    background: #f5f9fc;
}

.wa-session-grid strong {
    color: #173850;
}

.wa-actions {
    justify-content: flex-end;
}

.secondary-button.danger {
    border-color: #f0c6c6;
    color: #b83a3a;
}

@media (max-width: 1080px) {
    .device-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .primary-key,
    .support-summary,
    .device-overview-head,
    .gateway-explainer,
    .wa-status {
        align-items: stretch;
        flex-direction: column;
    }

    .key-list > div,
    .ticket-list > div,
    .rule-list article {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .key-list code,
    .key-list b,
    .ticket-list em,
    .ticket-list button,
    .rule-list em,
    .rule-list button {
        grid-column: 2;
        justify-self: start;
    }

    .wa-session-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-chat {
    position: fixed;
    z-index: 1200;
    right: 22px;
    bottom: 22px;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 12px;
}

/* Keep every dashboard toast clear of the persistent livechat launcher. */
.toast {
    right: 22px;
    bottom: 92px;
    z-index: 1300;
    width: max-content;
    max-width: min(360px, calc(100vw - 44px));
}

.status-chip.error {
    background: #fff0f2;
    color: #b43d4d;
}

.status-chip.warning {
    background: #fff8e8;
    color: #9a6413;
}

.fleet-card b.offline {
    background: #fff0f2;
    color: #b43d4d;
}

.data-panel footer a.disabled,
.data-panel footer button:disabled {
    opacity: .45;
    pointer-events: none;
}

.commerce-panel > form > label {
    display: block;
    margin: 0 0 14px;
}

.commerce-panel > form > label span {
    display: block;
    margin-bottom: 6px;
    color: #455f75;
    font-size: 9px;
    font-weight: 700;
}

.commerce-panel > form > label input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d8e3ec;
    border-radius: 10px;
    background: #fbfdff;
}

.dashboard-chat-launcher {
    position: relative;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 17px 8px 9px;
    border: 1px solid rgba(89,174,245,.42);
    border-radius: 17px;
    background: #06283f;
    box-shadow: 0 18px 45px rgba(2,22,37,.25);
    color: #fff;
    cursor: pointer;
    font: inherit;
}

.dashboard-chat-launcher > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(145deg,#168cff,#0868dd);
}

.dashboard-chat-launcher strong {
    font-size: 12px;
}

.dashboard-chat-launcher > i {
    position: absolute;
    top: 7px;
    left: 38px;
    width: 8px;
    height: 8px;
    border: 2px solid #06283f;
    border-radius: 50%;
    background: #40d7a7;
}

.dashboard-chat-panel[hidden] {
    display: none;
}

.dashboard-chat-panel {
    width: min(390px, calc(100vw - 28px));
    height: min(650px, calc(100vh - 90px));
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto auto auto;
    overflow: hidden;
    border: 1px solid #c9d8e5;
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(2,15,32,.29);
}

.dashboard-chat-panel > header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px;
    background: #071d2e;
    color: #fff;
}

.dashboard-chat-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-chat-identity img {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.dashboard-chat-identity strong,
.dashboard-chat-identity small {
    display: block;
}

.dashboard-chat-identity small {
    margin-top: 4px;
    color: #91abc0;
    font-size: 9px;
}

.dashboard-chat-identity small i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #40d7a7;
}

.dashboard-chat-panel > header > div:last-child {
    display: flex;
    gap: 4px;
}

.dashboard-chat-panel > header button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #9db1c3;
    cursor: pointer;
    font-size: 20px;
}

.dashboard-chat-panel > header button:hover {
    background: rgba(255,255,255,.09);
    color: #fff;
}

.dashboard-chat-register {
    min-height: 0;
    padding: 24px 21px 18px;
    overflow-y: auto;
    background: linear-gradient(180deg,#eef6fc,#fff 38%);
}

.dashboard-chat-register[hidden],
.dashboard-chat-messages[hidden],
.dashboard-chat-suggestions[hidden],
.dashboard-chat-compose[hidden] {
    display: none;
}

.dashboard-chat-intro {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.dashboard-chat-intro > span,
.dashboard-chat-avatar {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 12px;
    background: #e5f3ff;
    color: #0877e8;
    font-weight: 900;
}

.dashboard-chat-intro strong {
    color: #18364d;
}

.dashboard-chat-intro p {
    margin: 5px 0 0;
    color: #6c8193;
    font-size: 11px;
    line-height: 1.5;
}

.dashboard-chat-register form {
    display: grid;
    gap: 12px;
}

.dashboard-chat-register label span {
    display: block;
    margin-bottom: 6px;
    color: #334c61;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dashboard-chat-register input:not(.chat-trap) {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #c9d7e3;
    border-radius: 10px;
    color: #18354d;
    font: inherit;
}

.dashboard-chat-register form > button {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: #0877e8;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.dashboard-chat-register form > p {
    min-height: 14px;
    margin: -4px 0;
    color: #b33f3f;
    font-size: 10px;
    text-align: center;
}

.dashboard-chat-register form > small {
    color: #8394a4;
    font-size: 8px;
    line-height: 1.45;
    text-align: center;
}

.chat-trap {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.dashboard-chat-messages {
    min-height: 0;
    padding: 16px 14px;
    overflow-y: auto;
    background: linear-gradient(180deg,#f4f8fb,#fff 34%);
}

.dashboard-chat-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 13px;
}

.dashboard-chat-row.user {
    justify-content: flex-end;
}

.dashboard-chat-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 8px;
    font-size: 11px;
}

.dashboard-chat-row p {
    max-width: 83%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #d8e3ec;
    border-radius: 14px 14px 14px 5px;
    background: #fff;
    color: #334d63;
    font-size: 11px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.dashboard-chat-row.user p {
    border: 0;
    border-radius: 14px 14px 5px 14px;
    background: #0877e8;
    color: #fff;
}

.dashboard-chat-row.typing p {
    color: #8498aa;
    letter-spacing: .18em;
}

.dashboard-chat-suggestions {
    display: flex;
    gap: 6px;
    padding: 8px 13px;
    overflow-x: auto;
    border-top: 1px solid #e2eaf1;
}

.dashboard-chat-suggestions button {
    flex: 0 0 auto;
    padding: 7px 9px;
    border: 1px solid #cedce8;
    border-radius: 9px;
    background: #f8fbfe;
    color: #42617c;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
}

.dashboard-chat-compose {
    display: grid;
    grid-template-columns: minmax(0,1fr) 40px;
    gap: 7px;
    padding: 10px 13px 8px;
    border-top: 1px solid #dde6ee;
}

.dashboard-chat-compose textarea {
    max-height: 95px;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid #c9d7e3;
    border-radius: 11px;
    color: #18354d;
    font: inherit;
    font-size: 11px;
    line-height: 19px;
    resize: none;
}

.dashboard-chat-compose button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 11px;
    background: #0877e8;
    color: #fff;
    cursor: pointer;
}

.form-note {
    margin: 10px 0 0;
    padding: 11px 13px;
    border: 1px solid #d8e8f5;
    border-radius: 10px;
    background: #f4f9fd;
    color: #59738a;
    font-size: 9px;
    line-height: 1.55;
}

button:disabled,
.primary-button:disabled,
.secondary-button:disabled {
    cursor: not-allowed;
    opacity: .52;
    box-shadow: none;
}

.dashboard-chat-panel > footer {
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-top: 1px solid #edf1f5;
    background: #fafcfe;
    color: #8194a6;
    font-size: 8px;
}

.dashboard-chat-panel > footer span {
    color: #0877e8;
}

@media (max-width: 560px) {
    .dashboard-chat {
        right: 10px;
        bottom: 10px;
        left: 10px;
    }

    .dashboard-chat-panel {
        width: 100%;
        height: calc(100dvh - 20px);
    }

    .dashboard-chat.open .dashboard-chat-launcher {
        display: none;
    }

    .toast {
        right: 12px;
        bottom: 78px;
        max-width: calc(100vw - 24px);
    }
}

/* Call Dashboard analytics */
.call-analytics-command { display: grid; gap: 8px; }
.call-analytics-filters {
    display: grid;
    grid-template-columns: minmax(280px, 1.6fr) repeat(2, minmax(110px, .58fr)) minmax(200px, 1fr) repeat(2, minmax(100px, .5fr)) auto auto;
    gap: 9px;
    align-items: end;
    padding: 16px;
    border-color: #d2e2ec;
    background: linear-gradient(145deg, #fff, #f4f9fc);
}
.call-analytics-filter-title { display: flex; gap: 11px; align-items: flex-start; align-self: center; }
.call-analytics-filter-title > span { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #e5f4ff, #d7edfd); color: #0b84df; font-size: 16px; }
.call-analytics-filter-title h2 { margin: 3px 0 3px; color: #153c55; font: 800 15px Manrope, sans-serif; }
.call-analytics-filter-title p:not(.panel-kicker) { margin: 0; color: #738896; font-size: 8px; line-height: 1.45; }
.call-analytics-filters label > span { display: block; margin: 0 0 5px; color: #587083; font-size: 7px; font-weight: 800; }
.call-analytics-filters input,
.call-analytics-filters select { width: 100%; min-height: 36px; box-sizing: border-box; padding: 8px 9px; border: 1px solid #cfdee7; border-radius: 8px; background: #fff; color: #193d55; font-size: 8px; outline: none; }
.call-analytics-filters input:focus,
.call-analytics-filters select:focus { border-color: #3b9ae2; box-shadow: 0 0 0 3px rgba(15, 139, 229, .1); }
.call-analytics-filters > button,
.call-analytics-filters > a { min-height: 36px; box-sizing: border-box; white-space: nowrap; }
.call-analytics-context { display: flex; align-items: center; gap: 15px; padding: 0 5px; color: #718594; font-size: 7px; }
.call-analytics-context span:first-child { color: #178361; font-weight: 800; }
.call-analytics-context i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #2ac38a; box-shadow: 0 0 0 4px rgba(42, 195, 138, .11); }
.call-analytics-context b { color: #36566d; font-weight: 800; }

.call-analytics-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin: 18px 0 12px; }
.call-kpi { position: relative; min-width: 0; padding: 15px; overflow: hidden; }
.call-kpi::after { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #8da6b7; content: ''; }
.call-kpi.primary::after { background: #0b8ff0; }
.call-kpi.incoming::after,
.call-kpi.best::after { background: #25b47e; }
.call-kpi.outgoing::after { background: #8b6cf2; }
.call-kpi.missed::after,
.call-kpi.critical::after { background: #ef6471; }
.call-kpi.callback::after { background: #f59f32; }
.call-kpi > div { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.call-kpi span { color: #526d80; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.call-kpi > div b { padding: 3px 6px; border-radius: 999px; background: #f0f4f7; color: #6d8392; font-size: 6px; }
.call-kpi > div b.positive { background: #e6f7f0; color: #12815c; }
.call-kpi > div b.negative { background: #feedef; color: #b94e5a; }
.call-kpi > strong { display: block; margin: 9px 0 5px; overflow: hidden; color: #173b53; font: 800 23px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.call-kpi > small { display: block; color: #7c909e; font-size: 7px; line-height: 1.45; }

.call-analytics-export-bar { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 9px 12px; border: 1px solid #dce7ed; border-radius: 10px; background: #f8fbfd; }
.call-analytics-export-bar > div { margin-right: auto; }
.call-analytics-export-bar strong,
.call-analytics-export-bar span { display: block; }
.call-analytics-export-bar strong { color: #294c63; font-size: 9px; }
.call-analytics-export-bar span { margin-top: 2px; color: #82939f; font-size: 7px; }
.call-analytics-export-bar a { padding: 7px 9px; border: 1px solid #d3e0e8; border-radius: 7px; background: #fff; color: #2778b2; font-size: 7px; font-weight: 800; text-decoration: none; }
.call-analytics-export-bar a:hover { border-color: #6bb1e3; background: #eff8ff; }

.call-analytics-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.call-chart { min-width: 0; overflow: hidden; }
.call-chart.wide { grid-column: 1 / -1; }
.call-chart > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 15px 9px; border-bottom: 1px solid #edf2f5; }
.call-chart h3 { margin: 0; color: #183c53; font: 800 11px Manrope, sans-serif; }
.call-chart header p { margin: 3px 0 0; color: #81929e; font-size: 7px; }
.call-chart header > span { padding: 4px 6px; border-radius: 6px; background: #edf6fc; color: #4780a7; font-size: 6px; font-weight: 850; letter-spacing: .05em; }
.call-chart-stage { position: relative; min-height: 245px; padding: 8px 10px 7px; box-sizing: border-box; }
.call-chart-stage canvas { display: block; max-width: 100%; }
.call-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; min-height: 16px; margin: 3px 7px 0; color: #6c8190; font-size: 7px; }
.call-chart-legend span { display: inline-flex; align-items: center; gap: 4px; }
.call-chart-legend i { width: 7px; height: 7px; border-radius: 2px; }
.call-chart-legend b { margin-left: 2px; color: #284b62; }

.call-daily-table { margin-top: 14px; }
.call-daily-table table { min-width: 1120px; }
.call-analytics-table-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.call-top-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.call-top-grid article { min-width: 0; }
.call-top-grid table { min-width: 480px; }
.panel-kicker.danger { color: #d75060; }
.call-unresolved-table { margin-top: 14px; }
.call-priority { display: inline-block; padding: 4px 7px; border-radius: 999px; background: #edf3f7; color: #617b8d; font-size: 7px; font-weight: 850; }
.call-priority.medium { background: #fff4df; color: #a96c08; }
.call-priority.high { background: #fde9ec; color: #b64050; }
.call-analytics-method { margin-top: 12px; padding: 12px 14px; border: 1px solid #d9e7ef; border-left: 3px solid #198edc; border-radius: 9px; background: #f6fbfe; }
.call-analytics-method strong { color: #294e66; font-size: 8px; }
.call-analytics-method p { margin: 4px 0 0; color: #718795; font-size: 7px; line-height: 1.55; }

@media (max-width: 1250px) {
    .call-analytics-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .call-analytics-filter-title { grid-column: 1 / -1; }
    .call-analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .call-top-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .call-analytics-filters { grid-template-columns: 1fr 1fr; }
    .call-filter-search { grid-column: 1 / -1; }
    .call-analytics-context,
    .call-analytics-export-bar { align-items: stretch; flex-direction: column; }
    .call-analytics-context { gap: 5px; }
    .call-analytics-chart-grid,
    .call-analytics-table-grid { grid-template-columns: 1fr; }
    .call-chart.wide { grid-column: auto; }
}
@media (max-width: 520px) {
    .call-analytics-filters,
    .call-analytics-kpis { grid-template-columns: 1fr; }
    .call-filter-search { grid-column: auto; }
    .call-chart-stage { min-height: 220px; }
}

/* SMS Gateway capacity purchase */
.gateway-purchase-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: 18px;
    align-items: stretch;
}
.gateway-capacity-status,
.gateway-capacity-checkout { padding: 22px; overflow: hidden; }
.gateway-capacity-status {
    position: relative;
    background: linear-gradient(145deg, #092d46 0%, #0a4166 67%, #075580 100%);
    color: #fff;
}
.gateway-capacity-status::after {
    position: absolute;
    width: 220px;
    height: 220px;
    right: -75px;
    bottom: -110px;
    border: 32px solid rgba(24, 153, 255, .14);
    border-radius: 50%;
    content: '';
    pointer-events: none;
}
.gateway-capacity-status > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.gateway-capacity-status h2 { margin: 4px 0 6px; color: #fff; font: 800 21px Manrope, sans-serif; }
.gateway-capacity-status header p:not(.panel-kicker) { max-width: 560px; margin: 0; color: #acd0e5; font-size: 10px; line-height: 1.55; }
.gateway-capacity-status .panel-kicker { color: #56bfff; }
.gateway-capacity-status .status-chip { flex: 0 0 auto; border: 1px solid rgba(94, 231, 186, .24); background: rgba(18, 177, 124, .13); color: #7ef0c6; }
.gateway-capacity-status .status-chip i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #47daa5; box-shadow: 0 0 0 4px rgba(71, 218, 165, .12); }
.gateway-capacity-metrics { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 8px; margin: 24px 0 16px; }
.gateway-capacity-metrics > div { min-width: 0; padding: 14px; border: 1px solid rgba(164, 213, 242, .15); border-radius: 12px; background: rgba(255, 255, 255, .055); }
.gateway-capacity-metrics > div.primary { border-color: rgba(52, 167, 244, .42); background: rgba(19, 142, 225, .17); }
.gateway-capacity-metrics span,
.gateway-capacity-metrics small { display: block; }
.gateway-capacity-metrics span { color: #9ec6dc; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; }
.gateway-capacity-metrics strong { display: block; margin: 5px 0 2px; color: #fff; font: 800 26px Manrope, sans-serif; }
.gateway-capacity-metrics small { overflow: hidden; color: #82aac1; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.gateway-capacity-progress { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.gateway-capacity-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #159af4, #59dbbc); box-shadow: 0 0 12px rgba(27, 165, 246, .4); }
.gateway-capacity-status > footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 10px; color: #8eb8ce; font-size: 8px; }
.gateway-capacity-status > footer a { color: #6ac6ff; font-weight: 800; text-decoration: none; }

.gateway-capacity-checkout { border-color: #cbe2f1; background: linear-gradient(155deg, #fff 0%, #f4faff 100%); box-shadow: 0 16px 38px rgba(15, 69, 105, .09); }
.gateway-checkout-title { display: flex; gap: 12px; align-items: flex-start; }
.gateway-checkout-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #e4f3ff; color: #0785ec; font: 800 20px Manrope, sans-serif; }
.gateway-checkout-title h2 { margin: 3px 0 3px; color: #123a54; font: 800 18px Manrope, sans-serif; }
.gateway-checkout-title p:not(.panel-kicker) { margin: 0; color: #6d8291; font-size: 9px; }
.gateway-quick-choices { display: grid; grid-template-columns: repeat(4, 1fr) 1.45fr; gap: 7px; margin: 19px 0 14px; padding: 0; border: 0; }
.gateway-quick-choices legend { grid-column: 1 / -1; width: 100%; margin-bottom: 7px; color: #31546b; font-size: 9px; font-weight: 800; }
.gateway-quick-choices > button { min-height: 38px; border: 1px solid #d2e1eb; border-radius: 9px; background: #fff; color: #41637a; font: 800 10px Manrope, sans-serif; cursor: pointer; }
.gateway-quick-choices > button:hover,
.gateway-quick-choices > button.active { border-color: #0787ef; background: #eaf6ff; color: #067bd7; box-shadow: inset 0 0 0 1px #0787ef; }
.gateway-quick-choices label { position: relative; display: block; }
.gateway-quick-choices label span { position: absolute; z-index: 1; top: 4px; left: 10px; color: #80929f; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.gateway-quick-choices select { width: 100%; min-height: 38px; padding: 12px 9px 3px; border: 1px solid #d2e1eb; border-radius: 9px; background: #fff; color: #173d55; font-size: 10px; font-weight: 800; outline: none; }
.gateway-quick-choices select:focus { border-color: #0787ef; box-shadow: 0 0 0 3px rgba(7, 135, 239, .1); }
.gateway-order-summary { display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; gap: 8px; align-items: center; padding: 12px; border: 1px solid #dbe7ee; border-radius: 11px; background: #fff; }
.gateway-order-summary div { text-align: center; }
.gateway-order-summary span { display: block; color: #7d909e; font-size: 7px; font-weight: 750; }
.gateway-order-summary strong { display: block; margin-top: 3px; color: #254c64; font: 800 17px Manrope, sans-serif; }
.gateway-order-summary > b { color: #9cb0bd; font-size: 13px; }
.gateway-order-summary .new-capacity { padding: 7px; border-radius: 8px; background: #e9f6ff; }
.gateway-order-summary .new-capacity strong { color: #0785e9; }
.gateway-price-summary { display: flex; justify-content: space-between; gap: 15px; margin: 13px 0; padding: 0 2px; }
.gateway-price-summary span { display: block; color: #7b8e9b; font-size: 7px; }
.gateway-price-summary strong { display: block; margin-top: 3px; color: #294c62; font: 800 12px Manrope, sans-serif; }
.gateway-price-summary .total { text-align: right; }
.gateway-price-summary .total strong { color: #087ecf; font-size: 17px; }
.gateway-checkout-button { display: flex; width: 100%; min-height: 43px; align-items: center; justify-content: space-between; padding: 0 17px; border: 0; cursor: pointer; }
.gateway-checkout-button:disabled { cursor: wait; opacity: .65; }
.gateway-secure-note { margin: 10px 0 0; color: #82949f; font-size: 7px; line-height: 1.5; text-align: center; }
.gateway-secure-note span { color: #159065; }
.gateway-capacity-checkout .form-feedback { min-height: 0; margin: 7px 0 0; text-align: center; }

.gateway-value-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 15px 0 24px; }
.gateway-value-strip > div { display: grid; grid-template-columns: 30px 1fr; padding: 12px 14px; border: 1px solid #dce7ee; border-radius: 12px; background: #fff; }
.gateway-value-strip > div > span { grid-row: 1 / 3; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: #eaf6ff; color: #0786ed; font-size: 11px; }
.gateway-value-strip strong { color: #24475e; font-size: 9px; }
.gateway-value-strip small { margin-top: 2px; color: #7e929f; font-size: 7px; line-height: 1.4; }
.gateway-pricing-section { margin-bottom: 24px; }
.gateway-pricing-section .section-heading h2 { margin: 4px 0 5px; color: #173c54; font: 800 19px Manrope, sans-serif; }
.gateway-pricing-section .section-heading p:not(.panel-kicker) { max-width: 780px; margin: 0 0 14px; color: #718696; font-size: 9px; line-height: 1.6; }
.gateway-tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.gateway-tier-grid article { position: relative; display: grid; gap: 5px; padding: 15px; }
.gateway-tier-grid article.active { border-color: #7fc5f5; background: linear-gradient(150deg, #fff, #edf8ff); box-shadow: inset 0 3px 0 #118ce9; }
.gateway-tier-grid span { color: #1986d5; font-size: 7px; font-weight: 850; letter-spacing: .06em; }
.gateway-tier-grid strong { color: #24485f; font: 800 12px Manrope, sans-serif; }
.gateway-tier-grid b { color: #0b7dcc; font: 800 21px Manrope, sans-serif; }
.gateway-tier-grid small { color: #82949f; font-size: 7px; }
.gateway-fleet-section { margin-top: 6px; }
.gateway-purchase-history { margin-top: 24px; }
.gateway-purchase-history code { color: #567186; font-size: 8px; }

@media (max-width: 1120px) {
    .gateway-purchase-workspace { grid-template-columns: 1fr; }
    .gateway-value-strip,
    .gateway-tier-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .gateway-capacity-status > header,
    .gateway-capacity-status > footer,
    .gateway-price-summary { align-items: flex-start; flex-direction: column; }
    .gateway-capacity-metrics { grid-template-columns: 1fr 1fr; }
    .gateway-quick-choices { grid-template-columns: repeat(2, 1fr); }
    .gateway-quick-choices label { grid-column: 1 / -1; }
    .gateway-order-summary { grid-template-columns: 1fr auto 1fr; }
    .gateway-order-summary > b:nth-of-type(2) { display: none; }
    .gateway-order-summary .new-capacity { grid-column: 1 / -1; }
    .gateway-price-summary .total { text-align: left; }
}
@media (max-width: 520px) {
    .gateway-capacity-status,
    .gateway-capacity-checkout { padding: 17px; }
    .gateway-capacity-metrics,
    .gateway-value-strip,
    .gateway-tier-grid { grid-template-columns: 1fr; }
}

.recipient-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 18px 0 2px;
    padding: 4px;
    border-radius: 11px;
    background: #edf3f8;
}

.recipient-tabs button {
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #607589;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
}

.recipient-tabs button.active {
    background: #fff;
    box-shadow: 0 3px 10px rgba(9,44,70,.09);
    color: #0877e8;
}

.advanced-options {
    margin: 4px 0 18px;
    border: 1px solid #dce6ee;
    border-radius: 12px;
    background: #f9fbfd;
}

.advanced-options summary {
    padding: 13px 15px;
    color: #36546d;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.advanced-options[open] {
    padding: 0 15px 15px;
}

.advanced-options[open] summary {
    margin: 0 -15px 12px;
    border-bottom: 1px solid #e0e8ef;
}

.advanced-options label {
    display: block;
    margin-top: 11px;
}

.advanced-options input,
.adaptive-field-grid input:not([type="checkbox"]),
.adaptive-field-grid select,
.adaptive-field-grid textarea,
.settings-section input:not([type="checkbox"]),
.settings-section select,
.settings-section textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #cad9e6;
    border-radius: 10px;
    background: #fff;
    color: #19374e;
    font: inherit;
}

.sms-review {
    margin-top: 19px;
    padding: 20px;
    border: 1px solid #a8d3f8;
    border-radius: 15px;
    background: linear-gradient(135deg,#edf7ff,#f8fcff);
}

.sms-review h3 {
    margin: 3px 0 15px;
}

.sms-review dl {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    margin: 0 0 17px;
}

.sms-review dl > div {
    padding: 11px;
    border-radius: 9px;
    background: rgba(255,255,255,.75);
}

.sms-review dt {
    color: #7890a4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sms-review dd {
    margin: 5px 0 0;
    color: #163c58;
    font-size: 12px;
    font-weight: 800;
}

.sms-review form {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.settings-stack {
    display: grid;
    gap: 18px;
}

.settings-section {
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid #e1eaf1;
}

.settings-section h3 {
    margin: 0 0 13px;
    color: #173b57;
}

.settings-section > label:not(.switch-row),
.adaptive-field-grid > label:not(.switch-row) {
    display: block;
    margin-top: 13px;
}

.settings-section label > span,
.adaptive-field-grid label > span {
    display: block;
    margin-bottom: 6px;
    color: #38526a;
    font-size: 11px;
    font-weight: 800;
}

.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 14px;
    border: 1px solid #dde7ef;
    border-radius: 11px;
    background: #f8fbfd;
}

.switch-row small {
    display: block;
    margin-top: 4px;
    color: #7c8e9e;
    font-weight: 400;
}

.switch-row input[type="checkbox"] {
    width: 36px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: #0877e8;
}

.check-grid,
.menu-choice-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

.check-grid label,
.menu-choice-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dce6ee;
    border-radius: 10px;
    color: #38536a;
    font-size: 11px;
    font-weight: 700;
}

.adaptive-field-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px;
    margin-top: 18px;
}

.adaptive-field-grid .switch-row,
.adaptive-field-grid label:has(textarea) {
    grid-column: 1 / -1;
}

.menu-choice-grid {
    margin: 18px 0;
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.menu-choice-grid label {
    min-height: 64px;
    cursor: pointer;
}

.menu-choice-grid input {
    accent-color: #0877e8;
}

.menu-choice-grid span,
.menu-choice-grid strong,
.menu-choice-grid small {
    display: block;
}

.menu-choice-grid small {
    margin-top: 3px;
    color: #8192a0;
    font-weight: 400;
}

.form-feedback {
    min-height: 18px;
    margin: 10px 0 0;
    color: #087b57;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.form-feedback.error {
    color: #b13b3b;
}

.form-feedback.success {
    color: #087b57;
}

.wa-send-note,
.sms-send-feedback {
    margin: 12px 0 0;
    text-align: left;
}

.sms-send-feedback {
    padding: 10px 12px;
    border: 1px solid #d8e8ef;
    border-radius: 10px;
    background: #f7fbfe;
}

.sms-send-feedback.success {
    border-color: #bce4cc;
    background: #f1fcf6;
}

.sms-send-feedback.error {
    border-color: #efc6cb;
    background: #fff4f5;
}

@media (max-width: 850px) {
    .menu-choice-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 620px) {
    .adaptive-field-grid,
    .check-grid,
    .menu-choice-grid,
    .sms-review dl {
        grid-template-columns: 1fr;
    }

    .adaptive-field-grid .switch-row,
    .adaptive-field-grid label:has(textarea) {
        grid-column: auto;
    }
}

.builder-layout {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(270px,.55fr);
    gap: 18px;
    align-items: start;
}

.landing-preview {
    position: sticky;
    top: 86px;
    min-height: 520px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 42px 28px;
    background: linear-gradient(160deg,#062b46,#0878c6);
    color: #fff;
    text-align: center;
}

.landing-preview > span {
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    color: #bfe6ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.landing-preview h3 {
    margin: 22px 0 10px;
    color: #fff;
    font-size: 25px;
}

.landing-preview p {
    color: #c9e6f7;
    line-height: 1.6;
}

.landing-preview a {
    margin-top: 15px;
    padding: 11px 16px;
    border-radius: 10px;
    background: #fff;
    color: #0874c1;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.landing-preview small {
    margin-top: 23px;
    color: #8ec8e9;
}

.connection-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px;
    padding-top: 18px;
}

.connection-grid article {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #dce6ee;
    border-radius: 12px;
    background: #f9fbfd;
}

.connection-grid article > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 11px;
    background: #e4f3ff;
    color: #0877e8;
    font-weight: 900;
}

.connection-grid small {
    display: block;
    margin-top: 4px;
    color: #798c9c;
}

.connection-grid em {
    color: #078057;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.connection-grid a {
    grid-column: 2 / -1;
    color: #0877e8;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.billing-preview {
    margin: 15px 0;
    padding: 15px;
    border: 1px solid #a7d4f8;
    border-radius: 12px;
    background: #eff8ff;
}

.billing-preview strong {
    color: #123d5d;
}

.billing-preview p {
    margin: 6px 0 12px;
    color: #60798d;
}

@media (max-width: 900px) {
    .builder-layout {
        grid-template-columns: 1fr;
    }

    .landing-preview {
        position: static;
        min-height: 380px;
    }
}

@media (max-width: 620px) {
    .connection-grid {
        grid-template-columns: 1fr;
    }
}

/* Unified dashboard surfaces -------------------------------------------------
   Feature panels use the same internal rhythm so their borders never look
   clipped or glued to their content. */
.main-content {
    width: 100%;
}

.panel {
    border-color: #dbe5ee;
    box-shadow: 0 12px 34px rgba(18, 49, 78, .07);
}

.key-panel,
.message-composer,
.rules-panel,
.whatsapp-panel {
    padding: 0 22px 22px;
    overflow: hidden;
}

.key-panel > header,
.message-composer > header,
.rules-panel > header {
    margin: 0 -22px;
    padding: 20px 22px;
}

.support-summary,
.gateway-explainer {
    padding: 22px 24px;
}

.gateway-explainer {
    overflow: hidden;
    border-color: #cfe3f3;
    background: linear-gradient(135deg, #f8fcff, #edf7ff);
}

/* Connected device cards */
.device-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    align-items: stretch;
    gap: 18px;
}

.fleet-card {
    min-width: 0;
    min-height: 250px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding: 0;
    border-color: #d6e3ed;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.fleet-card header {
    min-width: 0;
    margin: 0;
    padding: 19px 20px 17px;
    border-bottom: 1px solid #e5edf4;
    background: #fff;
}

.fleet-card header > div {
    min-width: 0;
}

.fleet-card header strong {
    display: block;
    overflow: hidden;
    color: #102f48;
    font-size: 14px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-card small {
    overflow-wrap: anywhere;
    font-size: 10px;
    line-height: 1.45;
}

.fleet-card header b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eaf9f3;
    white-space: nowrap;
}

.fleet-card header b.offline {
    background: #fff0f2;
}

.fleet-card dl {
    gap: 18px 22px;
    margin: 0;
    padding: 18px 20px 20px;
}

.fleet-card dl > div {
    min-width: 0;
}

.fleet-card dt {
    margin-bottom: 5px;
    font-size: 8px;
    letter-spacing: .11em;
}

.fleet-card dd {
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.45;
}

.fleet-actions {
    min-height: 50px;
    margin-top: auto;
    padding: 13px 20px 15px;
    border-top: 1px solid #e5edf4;
    background: #f8fbfe;
}

.fleet-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    font-size: 10px;
}

@media (max-width: 720px) {
    .key-panel,
    .message-composer,
    .rules-panel,
    .whatsapp-panel {
        padding-right: 17px;
        padding-bottom: 17px;
        padding-left: 17px;
    }

    .key-panel > header,
    .message-composer > header,
    .rules-panel > header {
        margin-right: -17px;
        margin-left: -17px;
        padding-right: 17px;
        padding-left: 17px;
    }

    .support-summary,
    .gateway-explainer {
        padding: 18px;
    }

    .fleet-card {
        min-height: 0;
    }

    .fleet-card header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .fleet-card header b {
        grid-column: 2;
        justify-self: start;
    }
}
.dashboard-language-switcher{min-width:142px;height:35px;display:flex;align-items:center;gap:7px;padding:0 8px;border:1px solid #dce5ed;border-radius:10px;background:#fff;color:#405a71}.dashboard-language-switcher>span{font-size:15px;line-height:1}.dashboard-language-switcher select{min-width:0;flex:1;border:0;outline:0;background:transparent;color:inherit;font-size:9px;font-weight:700;cursor:pointer}.login-language-switcher{position:fixed;right:22px;top:20px;z-index:20;box-shadow:0 8px 28px rgba(8,35,57,.12)}@media(max-width:760px){.dashboard-language-switcher{min-width:48px;width:48px}.dashboard-language-switcher select{width:19px;color:transparent}.dashboard-language-switcher select option{color:#102337}.login-language-switcher{width:150px;min-width:150px}.login-language-switcher select{width:auto;color:inherit}}

/* Main navigation pictograms */
.nav-group-icon {
    flex: 0 0 23px;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.nav-group-icon svg {
    display: block;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-group-toggle:hover .nav-group-icon,
.nav-group.open .nav-group-icon {
    color: #7bc7ff;
    background: #143d5e;
    box-shadow: inset 0 0 0 1px rgba(91, 178, 247, .16);
}

/* Centralized mobile gateway command center */
.system-gateway-link {
    padding: 4px 8px;
    border-radius: 7px;
    background: rgba(255,255,255,.62);
    color: inherit;
    font-weight: 800;
    white-space: nowrap;
}

.system-gateway-link:hover {
    background: #fff;
}

.gateway-command-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr);
    gap: 22px 28px;
    margin-bottom: 16px;
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid #123e5d;
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 0, rgba(11, 131, 246, .25), transparent 35%),
        linear-gradient(135deg, #061b2b, #0a2f49);
    box-shadow: 0 22px 55px rgba(7, 29, 47, .2);
    color: #fff;
}

.gateway-command-copy {
    align-self: center;
    max-width: 760px;
}

.gateway-command-copy .eyebrow {
    color: #68bcff;
}

.gateway-command-copy h1 {
    max-width: 720px;
    margin: 0;
    font: 800 clamp(28px, 3.4vw, 45px)/1.04 Manrope, sans-serif;
    letter-spacing: -.045em;
}

.gateway-command-copy > p:not(.eyebrow) {
    max-width: 690px;
    margin: 14px 0 0;
    color: #b3cadd;
    font-size: 12px;
    line-height: 1.7;
}

.gateway-command-actions {
    display: flex;
    gap: 9px;
    margin-top: 21px;
}

.gateway-command-actions .secondary-button {
    border-color: #31536c;
    background: rgba(255,255,255,.06);
    color: #e8f5ff;
}

.gateway-live-card {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 190px;
    padding: 22px;
    border: 1px solid rgba(102, 196, 255, .2);
    border-radius: 18px;
    background: rgba(4, 20, 33, .56);
    backdrop-filter: blur(12px);
}

.gateway-live-head {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #78e0bb;
    font-size: 9px;
    letter-spacing: .11em;
}

.gateway-live-card.attention .gateway-live-head {
    color: #ffc17f;
}

.gateway-live-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #24ca91;
    box-shadow: 0 0 0 5px rgba(36, 202, 145, .13);
    animation: pulse 1.8s infinite;
}

.gateway-live-card.attention .gateway-live-pulse {
    background: #f5a654;
    box-shadow: 0 0 0 5px rgba(245, 166, 84, .13);
}

.gateway-live-numbers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 22px 0 18px;
}

.gateway-live-numbers > div {
    min-width: 0;
    padding-right: 8px;
    border-right: 1px solid rgba(255,255,255,.1);
}

.gateway-live-numbers > div:last-child {
    border: 0;
}

.gateway-live-numbers strong,
.gateway-live-numbers span {
    display: block;
}

.gateway-live-numbers strong {
    font: 800 25px/1 Manrope, sans-serif;
}

.gateway-live-numbers span {
    margin-top: 7px;
    color: #8faabd;
    font-size: 8px;
}

.gateway-live-card > a {
    color: #69baff;
    font-size: 9px;
    font-weight: 800;
}

.gateway-bridge {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
}

.gateway-bridge > i {
    color: #4e7895;
    font-style: normal;
}

.gateway-node {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
}

.gateway-node-app {
    border-color: rgba(62, 163, 244, .35);
    background: rgba(11, 131, 246, .12);
}

.gateway-node > span,
.gateway-operation-card > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(43, 158, 248, .14);
    color: #5cb7ff;
}

.gateway-node svg,
.gateway-operation-card svg,
.device-shape svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gateway-node strong,
.gateway-node small {
    display: block;
}

.gateway-node strong {
    font-size: 10px;
}

.gateway-node small {
    margin-top: 4px;
    color: #86a1b5;
    font-size: 8px;
}

.gateway-metrics {
    margin-bottom: 16px;
}

.gateway-operations {
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid #dce7f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(18, 45, 74, .055);
}

.gateway-operations > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
}

.gateway-operations h2 {
    margin: 0;
    font: 750 17px/1.3 Manrope, sans-serif;
}

.gateway-operations header p:not(.panel-kicker) {
    margin: 5px 0 0;
    color: #6d8194;
    font-size: 9px;
}

.gateway-operations header > a {
    color: #087cec;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.gateway-operation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.gateway-operation-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 75px;
    padding: 12px;
    border: 1px solid #e2eaf1;
    border-radius: 13px;
    background: #f9fbfd;
}

.gateway-operation-card:hover {
    border-color: #87c4f6;
    background: #f2f9ff;
    transform: translateY(-1px);
}

.gateway-operation-card > span {
    background: #e8f4ff;
    color: #087de8;
}

.gateway-operation-card strong,
.gateway-operation-card small {
    display: block;
}

.gateway-operation-card strong {
    font-size: 9px;
}

.gateway-operation-card small {
    margin-top: 4px;
    color: #788c9d;
    font-size: 8px;
    line-height: 1.35;
}

.gateway-operation-card > i {
    color: #72a5cf;
    font-style: normal;
}

.gateway-dashboard-grid {
    margin-top: 0;
}

.device-item b.offline {
    background: #fff0f2;
    color: #b43d4d;
}

.gateway-fleet-summary {
    display: flex;
    align-items: center;
    gap: 9px;
}

.gateway-fleet-summary > span {
    padding: 8px 10px;
    border: 1px solid #d9e5ee;
    border-radius: 10px;
    background: #fff;
    color: #647d92;
    font-size: 9px;
    white-space: nowrap;
}

.gateway-fleet-summary b {
    color: #0a7edc;
    font-size: 13px;
}

.gateway-capability-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.gateway-capability-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 45px;
    padding: 0 13px;
    border: 1px solid #dbe6ef;
    border-radius: 11px;
    background: #fff;
    color: #274a65;
    font-size: 10px;
    font-weight: 800;
}

.gateway-capability-links a:hover {
    border-color: #81c2f5;
    color: #087cec;
}

.gateway-capability-links span {
    color: #1384eb;
}

@media (max-width: 1180px) {
    .gateway-operation-grid,
    .gateway-capability-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .gateway-command-center {
        grid-template-columns: 1fr;
    }

    .gateway-bridge {
        grid-template-columns: 1fr;
    }

    .gateway-bridge > i {
        transform: rotate(90deg);
        justify-self: center;
    }

    .gateway-live-card {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    .system-gateway-link {
        display: none;
    }

    .gateway-command-center {
        padding: 22px 18px;
    }

    .gateway-command-actions,
    .gateway-operations > header,
    .gateway-fleet-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .gateway-command-actions > *,
    .gateway-fleet-summary .primary-button {
        width: 100%;
    }

    .gateway-operation-grid,
    .gateway-capability-links {
        grid-template-columns: 1fr;
    }

    .gateway-operations header > a {
        white-space: normal;
    }
}

/* Per-device virtual operations workspace */
.mobile-control-center {
    display: grid;
    gap: 16px;
}

.mobile-control-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    border: 1px solid #173f5d;
    border-radius: 18px;
    background: linear-gradient(135deg, #071d2d, #0b3b5c);
    color: #fff;
    box-shadow: 0 18px 42px rgba(8, 36, 57, .16);
}

.mobile-control-toolbar h2 {
    margin: 0;
    font: 800 22px/1.2 Manrope, sans-serif;
}

.mobile-control-toolbar > div:first-child > p:not(.panel-kicker) {
    max-width: 760px;
    margin: 8px 0 0;
    color: #acc5d7;
    font-size: 10px;
    line-height: 1.6;
}

.mobile-control-totals {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-control-totals > span {
    display: grid;
    min-width: 70px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #9eb8cb;
    font-size: 8px;
}

.mobile-control-totals b {
    color: #fff;
    font: 800 16px/1.1 Manrope, sans-serif;
}

.mobile-control-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.mobile-selector {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 130px);
    overflow: hidden;
}

.mobile-selector-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px;
    border-bottom: 1px solid #e4ebf1;
}

.mobile-selector-head h3 {
    margin: 0;
    font: 750 14px Manrope, sans-serif;
}

.mobile-selector-head > span {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 8px;
    background: #e8f4ff;
    color: #087de7;
    font-size: 9px;
    font-weight: 800;
}

.mobile-selector-list {
    max-height: calc(100vh - 210px);
    overflow: auto;
    padding: 7px;
    scrollbar-width: thin;
}

.mobile-selector-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 9px;
    border: 1px solid transparent;
    border-radius: 11px;
}

.mobile-selector-item:hover {
    background: #f4f9fd;
}

.mobile-selector-item.selected {
    border-color: #b8daf6;
    background: #edf7ff;
    box-shadow: inset 3px 0 #0b83f6;
}

.mobile-selector-icon {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: #e8f4ff;
    color: #087de8;
}

.mobile-selector-icon svg,
.selected-mobile-identity > span svg,
.mobile-notification-composer > div > span svg,
.mobile-activity-tabs svg,
.mobile-control-empty > span svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-selector-icon i {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
}

.mobile-selector-icon i.online {
    background: #1fbd84;
}

.mobile-selector-icon i.offline {
    background: #e46670;
}

.mobile-selector-item strong,
.mobile-selector-item small,
.mobile-selector-item em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-selector-item strong {
    color: #17364e;
    font-size: 10px;
}

.mobile-selector-item small,
.mobile-selector-item em {
    margin-top: 2px;
    color: #7c90a2;
    font-size: 8px;
    font-style: normal;
}

.mobile-selector-item > b {
    color: #80a1ba;
}

.mobile-control-workspace {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.selected-mobile-card {
    padding: 20px;
}

.selected-mobile-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e5ecf2;
}

.selected-mobile-identity > span,
.mobile-notification-composer > div > span,
.mobile-control-empty > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 13px;
    background: #e7f4ff;
    color: #087fe9;
}

.selected-mobile-identity h2 {
    margin: 0;
    font: 800 18px Manrope, sans-serif;
}

.selected-mobile-identity small {
    display: block;
    margin-top: 4px;
    color: #73899c;
    font-size: 9px;
}

.selected-mobile-identity > b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #e9f8f3;
    color: #15805e;
    font-size: 8px;
    text-transform: uppercase;
}

.selected-mobile-identity > b.offline {
    background: #fff0f2;
    color: #b53f4d;
}

.selected-mobile-identity > b i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.selected-mobile-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 17px 0;
}

.selected-mobile-facts > div {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 10px;
    background: #f5f8fb;
}

.selected-mobile-facts dt {
    color: #74899c;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.selected-mobile-facts dd {
    margin: 5px 0 0;
    overflow: hidden;
    color: #17364d;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
}

.selected-mobile-facts code {
    font-size: 8px;
}

.selected-mobile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-notification-composer {
    display: grid;
    grid-template-columns: minmax(260px, .75fr) minmax(340px, 1.25fr);
    gap: 20px;
    padding: 20px;
}

.mobile-notification-composer > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mobile-notification-composer h3 {
    margin: 0;
    font: 750 15px Manrope, sans-serif;
}

.mobile-notification-composer > div p:not(.panel-kicker) {
    margin: 7px 0 0;
    color: #728698;
    font-size: 9px;
    line-height: 1.55;
}

.mobile-notification-composer form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 9px;
}

.mobile-notification-composer label > span,
.mobile-notification-composer label > small {
    display: block;
    color: #526b7e;
    font-size: 8px;
    font-weight: 800;
}

.mobile-notification-composer textarea {
    width: 100%;
    min-height: 73px;
    margin: 6px 0 4px;
    padding: 10px 12px;
    border: 1px solid #ccdbe7;
    border-radius: 10px;
    outline: none;
    resize: vertical;
}

.mobile-notification-composer textarea:focus {
    border-color: #55a9f5;
    box-shadow: 0 0 0 3px rgba(11, 131, 246, .1);
}

.mobile-notification-composer .form-feedback {
    grid-column: 1 / -1;
    margin: 0;
    color: #14805e;
    font-size: 9px;
}

.mobile-notification-composer .form-feedback.error {
    color: #b43d4d;
}

.mobile-activity-panel {
    overflow: hidden;
}

.mobile-activity-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(105px, 1fr));
    gap: 1px;
    overflow-x: auto;
    border-bottom: 1px solid #dfe8ef;
    background: #e9eff4;
}

.mobile-activity-tabs a {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: 52px;
    padding: 8px 10px;
    background: #f8fafc;
    color: #617b90;
}

.mobile-activity-tabs a.active {
    background: #fff;
    color: #087cec;
    box-shadow: inset 0 -3px #0b83f6;
}

.mobile-activity-tabs span {
    display: grid;
    place-items: center;
}

.mobile-activity-tabs strong {
    font-size: 8px;
    line-height: 1.25;
}

.mobile-activity-tabs b {
    min-width: 20px;
    padding: 3px 5px;
    border-radius: 999px;
    background: #e7eef4;
    color: #60798d;
    font-size: 7px;
    text-align: center;
}

.mobile-activity-tabs a.active b {
    background: #e4f2ff;
    color: #087cec;
}

.mobile-activity-panel > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    color: #74899b;
    font-size: 9px;
}

.mobile-activity-panel > footer > div {
    display: flex;
    gap: 7px;
}

.mobile-control-empty {
    display: grid;
    place-items: center;
    min-height: 310px;
    padding: 35px;
    text-align: center;
}

.mobile-control-empty h3 {
    margin: 13px 0 0;
}

.mobile-control-empty p {
    max-width: 520px;
    color: #728698;
    font-size: 10px;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .mobile-control-layout {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .selected-mobile-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-notification-composer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .mobile-control-toolbar,
    .mobile-control-totals {
        align-items: stretch;
        flex-direction: column;
    }

    .mobile-control-layout {
        grid-template-columns: 1fr;
    }

    .mobile-selector {
        position: static;
        max-height: none;
    }

    .mobile-selector-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 330px;
    }
}

@media (max-width: 560px) {
    .mobile-selector-list,
    .selected-mobile-facts {
        grid-template-columns: 1fr;
    }

    .selected-mobile-identity {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .selected-mobile-identity > b {
        grid-column: 2;
        justify-self: start;
    }

    .selected-mobile-actions,
    .mobile-notification-composer form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .selected-mobile-actions > *,
    .mobile-notification-composer button {
        width: 100%;
    }
}

/* Call automation manager */
.call-manager-command {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    align-items: center;
    gap: 24px;
    margin-bottom: 16px;
    padding: 22px 24px;
    overflow: hidden;
    border: 1px solid #cfe3f4;
    border-radius: 16px;
    background: linear-gradient(120deg, #ffffff 0%, #f2f9ff 62%, #e5f4ff 100%);
    box-shadow: 0 12px 32px rgba(21, 77, 119, .08);
}

.call-manager-command h2 {
    margin: 5px 0 7px;
    color: #0b2d46;
    font: 800 22px/1.25 Manrope, sans-serif;
}

.call-manager-command p:not(.panel-kicker) {
    max-width: 720px;
    margin: 0;
    color: #60788b;
    font-size: 11px;
    line-height: 1.65;
}

.call-manager-health {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid rgba(33, 164, 119, .2);
    border-radius: 13px;
    background: rgba(255, 255, 255, .86);
}

.call-manager-health span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #197455;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
}

.call-manager-health i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25bf82;
    box-shadow: 0 0 0 4px rgba(37, 191, 130, .13);
}

.call-manager-health strong { color: #15384f; font: 800 15px Manrope, sans-serif; }
.call-manager-health small { color: #73899a; font-size: 9px; }

.call-manager-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.call-manager-metrics article {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #dce8f0;
    border-radius: 13px;
    background: #fff;
}

.call-manager-metrics article > span {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 10px;
    background: #eaf5ff;
    color: #0781ef;
}

.call-manager-metrics svg { width: 17px; height: 17px; }
.call-manager-metrics div { display: grid; gap: 2px; min-width: 0; }
.call-manager-metrics small { overflow: hidden; color: #74899a; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.call-manager-metrics strong { color: #0e314a; font: 800 18px Manrope, sans-serif; }

.call-direction-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.call-direction-grid:has(> article:only-child) { grid-template-columns: 1fr; }
.call-direction-panel { overflow: hidden; }
.call-direction-panel > header {
    display: grid;
    gap: 13px;
    padding: 17px;
    border-bottom: 1px solid #e1eaf1;
}

.call-direction-missed > header { background: linear-gradient(135deg, #fffaf2, #fff4df); }
.call-direction-incoming > header { background: linear-gradient(135deg, #f3f8ff, #e7f2ff); }
.call-direction-outgoing > header { background: linear-gradient(135deg, #f1fcf8, #e2f8ee); }

.call-direction-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.call-direction-title > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    color: #087fec;
    box-shadow: 0 5px 14px rgba(26, 82, 123, .08);
}

.call-direction-title svg { width: 17px; height: 17px; }
.call-direction-title h2 { margin: 0; color: #15364d; font: 800 14px Manrope, sans-serif; }
.call-direction-title p { margin: 5px 0 0; color: #728697; font-size: 9px; line-height: 1.5; }
.call-direction-panel > header .primary-button { justify-self: stretch; text-align: center; }

.call-rule-list { display: grid; gap: 10px; padding: 12px; }
.call-rule-card {
    padding: 13px;
    border: 1px solid #dce7ef;
    border-left: 3px solid #2ab987;
    border-radius: 11px;
    background: #fff;
}
.call-rule-card.paused { border-left-color: #a9b7c2; background: #fafcfd; }
.call-rule-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.call-rule-card-top > div { display: flex; flex-wrap: wrap; gap: 5px; }
.call-rule-card-top > b { color: #7b8e9e; font-size: 8px; }
.call-rule-card h3 { margin: 9px 0; color: #14364e; font: 800 12px/1.35 Manrope, sans-serif; }
.call-rule-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; }
.call-rule-card dl div { min-width: 0; }
.call-rule-card dt { color: #8394a2; font-size: 7px; font-weight: 750; text-transform: uppercase; }
.call-rule-card dd { margin: 2px 0 0; overflow: hidden; color: #435e72; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.call-rule-action-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.call-rule-action-tags span { padding: 4px 7px; border-radius: 999px; background: #edf5fb; color: #3a627e; font-size: 7px; font-weight: 750; }
.call-rule-card footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #edf2f5; }
.call-rule-card footer form { display: contents; }
.call-rule-card footer a,
.call-rule-card footer button,
.call-template-list footer a,
.call-template-list footer button,
.call-action-row header button,
.call-slot-row header button {
    padding: 6px 8px;
    border: 1px solid #d4e1ea;
    border-radius: 7px;
    background: #fff;
    color: #426178;
    font: 750 8px Manrope, sans-serif;
    cursor: pointer;
}
.call-rule-card footer .danger,
.call-template-list footer .danger { color: #b74352; border-color: #f0cdd3; }

.call-rule-editor { margin-bottom: 16px; overflow: hidden; }
.call-rule-editor > header,
.call-template-panel > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid #dfe9f0;
    background: linear-gradient(135deg, #f9fcff, #eef7ff);
}
.call-rule-editor > header h2,
.call-template-panel > header h2 { margin: 4px 0 5px; color: #11344c; font: 800 17px Manrope, sans-serif; }
.call-rule-editor > header p:not(.panel-kicker),
.call-template-panel > header p:not(.panel-kicker) { margin: 0; color: #708697; font-size: 9px; }
.call-rule-editor form { padding: 18px 20px; }
.call-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.call-editor-grid fieldset {
    min-width: 0;
    margin: 0;
    padding: 15px;
    border: 1px solid #dce7ee;
    border-radius: 12px;
    background: #fbfdfe;
}
.call-editor-grid fieldset:nth-child(3),
.call-editor-grid fieldset:nth-child(6) { grid-column: 1 / -1; }
.call-editor-grid legend { padding: 0 7px; color: #173b53; font: 800 11px Manrope, sans-serif; }
.call-editor-grid legend b { display: inline-grid; width: 20px; height: 20px; margin-right: 5px; place-items: center; border-radius: 7px; background: #e5f3ff; color: #087dec; font-size: 8px; }
.call-editor-grid label > span,
.call-template-editor label > span,
.call-action-row label > span,
.call-slot-row label > span { display: block; margin-bottom: 5px; color: #4d6679; font-size: 8px; font-weight: 800; }
.call-editor-grid label > small,
.call-template-editor label > small { display: block; margin-top: 4px; color: #8293a0; font-size: 7px; line-height: 1.4; }
.adaptive-field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.call-editor-grid input:not([type="checkbox"]),
.call-editor-grid select,
.call-editor-grid textarea,
.call-template-editor input:not([type="checkbox"]),
.call-template-editor select,
.call-template-editor textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid #cedce6;
    border-radius: 8px;
    background: #fff;
    color: #17364d;
    font-size: 9px;
    outline: none;
}
.call-editor-grid input:focus,
.call-editor-grid select:focus,
.call-editor-grid textarea:focus,
.call-template-editor input:focus,
.call-template-editor select:focus,
.call-template-editor textarea:focus { border-color: #4ba5f5; box-shadow: 0 0 0 3px rgba(10, 130, 243, .1); }
.call-editor-grid fieldset > label { display: block; margin-top: 11px; }
.switch-row.compact { padding: 7px 9px; }
.call-day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.call-day-grid label { position: relative; cursor: pointer; }
.call-day-grid input { position: absolute; opacity: 0; }
.call-day-grid span { display: grid; min-height: 34px; place-items: center; border: 1px solid #d5e2eb; border-radius: 8px; background: #fff; color: #637c8e; font-size: 8px; font-weight: 800; }
.call-day-grid input:checked + span { border-color: #55a8f2; background: #e7f4ff; color: #087cec; box-shadow: inset 0 0 0 1px #55a8f2; }
.call-field-note { display: block; margin: 8px 0 10px; color: #718797; font-size: 8px; line-height: 1.55; }
.call-action-row,
.call-slot-row { margin: 10px 0; padding: 12px; border: 1px solid #d9e5ed; border-radius: 10px; background: #fff; }
.call-action-row > header,
.call-slot-row > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.call-action-row > header strong,
.call-slot-row > header strong { color: #294d65; font-size: 9px; }
.call-action-fields { margin-top: 10px; }
.call-action-fields[hidden] { display: none !important; }
.call-action-help { margin: 9px 0 0; padding: 8px 10px; border-radius: 8px; background: #eef7ff; color: #3c6683; font-size: 8px; line-height: 1.5; }
.call-slot-row details { margin-top: 9px; }
.call-slot-row summary { color: #397197; font-size: 8px; font-weight: 800; cursor: pointer; }
.call-slot-row details > label { display: block; margin-top: 9px; }
.call-editor-actions { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 16px -20px -18px; padding: 13px 20px; border-top: 1px solid #dce7ef; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); }
.call-editor-actions .form-feedback { margin: 0 auto 0 0; order: -1; }
.call-editor-actions .form-feedback.error { color: #b74452; }

.call-template-panel { margin-top: 16px; overflow: hidden; }
.call-template-editor { padding: 16px 20px; border-bottom: 1px solid #e1eaf0; background: #fbfdfe; }
.call-template-editor > label { display: block; margin-top: 10px; }
.call-template-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.call-template-list > article { display: grid; gap: 8px; min-width: 0; padding: 13px; border: 1px solid #dce7ef; border-radius: 11px; background: #fff; }
.call-template-list > article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.call-template-list strong { color: #193c53; font: 800 11px Manrope, sans-serif; }
.call-template-list span { padding: 4px 7px; border-radius: 999px; background: #edf5fb; color: #527089; font-size: 7px; font-weight: 750; }
.call-template-list p { margin: 0; color: #5e7688; font-size: 8px; line-height: 1.55; }
.call-template-list small { color: #8797a4; font-size: 7px; }
.call-template-list footer { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid #edf2f5; }
.call-template-list footer form { display: contents; }

@media (max-width: 1120px) {
    .call-direction-grid { grid-template-columns: 1fr 1fr; }
    .call-direction-panel:last-child { grid-column: 1 / -1; }
    .call-template-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    .call-manager-command,
    .call-editor-grid { grid-template-columns: 1fr; }
    .call-manager-metrics { grid-template-columns: 1fr 1fr; }
    .call-direction-grid { grid-template-columns: 1fr; }
    .call-direction-panel:last-child { grid-column: auto; }
    .call-editor-grid fieldset:nth-child(3),
    .call-editor-grid fieldset:nth-child(6) { grid-column: auto; }
    .adaptive-field-grid.three { grid-template-columns: 1fr; }
    .call-rule-editor > header,
    .call-template-panel > header { flex-direction: column; }
}

@media (max-width: 560px) {
    .call-manager-metrics,
    .call-template-list { grid-template-columns: 1fr; }
    .call-day-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .call-rule-card dl { grid-template-columns: 1fr; }
    .call-editor-actions { align-items: stretch; flex-direction: column; }
    .call-editor-actions > * { width: 100%; box-sizing: border-box; text-align: center; }
}

/* WhatsApp connection center */
.wa-command { display: grid; gap: 14px; }
.wa-command-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 0%, rgba(37, 211, 102, .15), transparent 29%),
        linear-gradient(135deg, #f9fffc 0%, #f3fbff 58%, #edf7ff 100%);
}
.wa-command-copy { display: flex; align-items: center; gap: 16px; min-width: 0; }
.wa-product-mark {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(145deg, #25d366, #12a953);
    box-shadow: 0 12px 26px rgba(26, 174, 83, .22);
}
.wa-product-mark svg { width: 36px; height: 36px; }
.wa-product-mark path:first-child { fill: rgba(255,255,255,.15); stroke: #fff; stroke-width: 2.4; }
.wa-product-mark path:last-child { fill: #fff; }
.wa-command-copy h2 { margin: 4px 0 6px; color: #113850; font: 800 18px/1.25 Manrope, sans-serif; }
.wa-command-copy > div > p:not(.panel-kicker) { max-width: 700px; margin: 0; color: #607b8e; font-size: 9px; line-height: 1.6; }
.wa-live-health {
    display: grid;
    grid-template-columns: auto 1fr;
    min-width: 210px;
    padding: 12px 14px;
    border: 1px solid #d8e5ed;
    border-radius: 12px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 22px rgba(38, 85, 115, .07);
}
.wa-live-health i { width: 9px; height: 9px; margin: 2px 8px 0 0; border-radius: 50%; background: #8196a5; box-shadow: 0 0 0 4px rgba(129,150,165,.13); }
.wa-live-health.success i { background: #21bd78; box-shadow: 0 0 0 4px rgba(33,189,120,.13); }
.wa-live-health.warning i { background: #f3a928; box-shadow: 0 0 0 4px rgba(243,169,40,.14); }
.wa-live-health.error i { background: #e25b68; box-shadow: 0 0 0 4px rgba(226,91,104,.13); }
.wa-live-health span { color: #7b909f; font-size: 7px; font-weight: 850; letter-spacing: .09em; }
.wa-live-health strong { grid-column: 2; margin-top: 3px; color: #173b52; font: 800 11px Manrope, sans-serif; }
.wa-live-health small { grid-column: 2; margin-top: 2px; color: #8a9aa6; font-size: 7px; }
.wa-command-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wa-command-metrics article { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 13px 15px; border: 1px solid #dce8ef; border-radius: 12px; background: #fff; }
.wa-command-metrics article > span { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 9px; background: #e8f9ef; color: #14a858; font-weight: 800; }
.wa-command-metrics article > span svg { width: 16px; height: 16px; }
.wa-command-metrics div { display: grid; gap: 2px; min-width: 0; }
.wa-command-metrics small { overflow: hidden; color: #8194a2; font-size: 7px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.wa-command-metrics strong { overflow: hidden; color: #163b53; font: 800 12px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.wa-activation-layout,
.wa-session-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .75fr); gap: 14px; align-items: start; }
.wa-activation-card,
.wa-session-card { overflow: hidden; }
.wa-activation-card > header,
.wa-session-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 19px 21px; border-bottom: 1px solid #e0eaf0; background: linear-gradient(135deg, #fbfdff, #f4faff); }
.wa-activation-card > header h2,
.wa-session-card > header h2 { margin: 4px 0 5px; color: #14384f; font: 800 16px Manrope, sans-serif; }
.wa-activation-card > header p:not(.panel-kicker),
.wa-session-card > header p:not(.panel-kicker) { max-width: 650px; margin: 0; color: #708596; font-size: 8px; line-height: 1.55; }
.wa-setup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 20px 2px; }
.wa-setup-steps > div { display: flex; gap: 9px; padding: 11px; border: 1px solid #e0e9ef; border-radius: 10px; background: #fbfdfe; }
.wa-setup-steps b { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border-radius: 7px; background: #dff7e9; color: #159d54; font-size: 8px; }
.wa-setup-steps span { display: grid; gap: 3px; }
.wa-setup-steps strong { color: #24485f; font-size: 8px; }
.wa-setup-steps small { color: #7d909e; font-size: 7px; line-height: 1.4; }
.wa-auth-form { padding: 18px 20px 20px; }
.wa-auth-form fieldset { margin: 0; padding: 14px; border: 1px solid #dbe6ed; border-radius: 12px; background: #fbfdfe; }
.wa-auth-form legend { padding: 0 7px; color: #153c54; font: 800 10px Manrope, sans-serif; }
.wa-qr-only-notice { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid #bce5cc; border-radius: 11px; background: #f1fcf6; }
.wa-qr-only-notice > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 9px; background: #d9f5e5; color: #139c51; font-size: 15px; }
.wa-qr-only-notice > div { display: grid; gap: 3px; }
.wa-qr-only-notice strong { color: #214a39; font-size: 9px; }
.wa-qr-only-notice small { color: #5f7f70; font-size: 8px; line-height: 1.5; }
.wa-auth-choice { display: flex; align-items: flex-start; gap: 9px; margin-top: 8px; padding: 10px; border: 1px solid #dfe8ee; border-radius: 9px; background: #fff; cursor: pointer; }
.wa-auth-choice:has(input:checked) { border-color: #44bc7a; background: #f1fcf6; box-shadow: inset 0 0 0 1px rgba(68,188,122,.3); }
.wa-auth-choice input { margin-top: 2px; accent-color: #18ad5a; }
.wa-auth-choice span { display: grid; gap: 2px; }
.wa-auth-choice b { color: #24455c; font-size: 9px; }
.wa-auth-choice small { color: #748998; font-size: 7px; line-height: 1.45; }
.wa-phone-fields { display: grid; grid-template-columns: 120px 1fr; gap: 10px; margin: 10px 0 0 24px; }
.wa-phone-fields[hidden] { display: none !important; }
.wa-phone-fields label > span { display: block; margin-bottom: 5px; color: #536d7f; font-size: 7px; font-weight: 800; }
.wa-phone-fields input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #cedce5; border-radius: 8px; background: #fff; color: #153a51; font-size: 9px; outline: none; }
.wa-phone-fields input:focus { border-color: #3eaf72; box-shadow: 0 0 0 3px rgba(62,175,114,.11); }
.wa-terms,
.wa-inline-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 11px; border-radius: 9px; background: #f1f7fb; color: #587184; font-size: 8px; line-height: 1.5; }
.wa-terms input,
.wa-inline-check input { margin-top: 2px; accent-color: #17aa59; }
.wa-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 13px; }
.wa-form-actions .form-feedback { margin: 0 auto 0 0; font-size: 8px; }
.wa-form-actions .form-feedback.error { color: #bd4352; }
.wa-choice-panel { padding: 18px; }
.wa-choice-panel > article { display: flex; gap: 10px; margin-top: 10px; padding: 13px; border: 1px solid #dce7ed; border-radius: 11px; background: #fff; }
.wa-choice-panel > article.selected { border-color: #bce8ce; background: #f1fcf6; }
.wa-choice-panel > article > span { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 8px; background: #e8f8ef; color: #16a457; font-weight: 800; }
.wa-choice-panel article div { display: grid; gap: 5px; }
.wa-choice-panel strong { color: #173c53; font-size: 9px; }
.wa-choice-panel p { margin: 0; color: #6d8393; font-size: 8px; line-height: 1.5; }
.wa-choice-panel a:not(.secondary-button) { color: #087de6; font-size: 8px; font-weight: 800; text-decoration: none; }
.wa-choice-panel > .secondary-button { display: block; margin-top: 12px; text-align: center; }
.wa-api-switch { padding: 14px 20px; border-bottom: 1px solid #e5edf2; background: #fbfdfe; }
.wa-api-switch > label { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.wa-api-switch > label > span { display: grid; gap: 2px; margin-right: auto; }
.wa-api-switch strong { color: #21455c; font-size: 9px; }
.wa-api-switch small { color: #788c9b; font-size: 7px; }
.wa-api-switch input { position: absolute; opacity: 0; pointer-events: none; }
.wa-api-switch i { position: relative; width: 35px; height: 19px; flex: 0 0 35px; border-radius: 20px; background: #bcc9d2; transition: .2s; }
.wa-api-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(20,53,76,.2); transition: .2s; }
.wa-api-switch input:checked + i { background: #20b96b; }
.wa-api-switch input:checked + i::after { transform: translateX(16px); }
.wa-api-switch .form-feedback { min-height: 10px; margin: 6px 0 0; color: #4f768c; font-size: 7px; }
.wa-pairing-stage { display: none; padding: 16px 20px; border-bottom: 1px solid #e1eaf0; background: #f9fcfe; }
.wa-pairing-stage.active { display: block; }
.wa-pairing-wait { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #f0d9a7; border-radius: 10px; background: #fffbf1; }
.wa-pairing-wait[hidden] { display: none !important; }
.wa-pairing-wait > i { width: 22px; height: 22px; flex: 0 0 22px; border: 3px solid #f2d18b; border-top-color: #e49b19; border-radius: 50%; animation: wa-spin .9s linear infinite; }
@keyframes wa-spin { to { transform: rotate(360deg); } }
.wa-pairing-wait span { display: grid; gap: 3px; }
.wa-pairing-wait strong { color: #755014; font-size: 9px; }
.wa-pairing-wait small { color: #917342; font-size: 8px; }
.wa-qr-panel { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(420px, 1.15fr); gap: 24px; align-items: center; }
.wa-qr-panel[hidden],
.wa-code-panel[hidden] { display: none !important; }
.wa-qr-panel h3,
.wa-code-panel h3 { margin: 5px 0 9px; color: #173c53; font: 800 14px Manrope, sans-serif; }
.wa-qr-panel ol { margin: 0; padding-left: 18px; color: #5e7688; font-size: 8px; line-height: 1.8; }
.wa-qr-panel small,
.wa-code-panel > small { color: #8596a3; font-size: 7px; }
.wa-qr-panel figure { display: grid; width: min(560px, 100%); margin: 0; padding: 18px; place-items: center; border: 1px solid #cfdee7; border-radius: 18px; background: #fff; box-shadow: 0 18px 42px rgba(32,80,112,.14); justify-self: end; }
.wa-qr-panel img { display: block; width: 100%; max-height: 68vh; aspect-ratio: 1; object-fit: contain; image-rendering: auto; }
.wa-code-panel { padding: 13px; border: 1px solid #cfe5d8; border-radius: 11px; background: #f6fdf9; text-align: center; }
.wa-code-panel [data-wa-code-digits] { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 13px 0; }
.wa-code-panel [data-wa-code-digits] b { display: grid; width: 34px; height: 40px; place-items: center; border: 1px solid #b9d9c6; border-radius: 8px; background: #fff; color: #153d52; font: 800 18px Manrope, sans-serif; box-shadow: 0 5px 12px rgba(38,96,66,.07); }
.wa-code-panel form { margin-top: 12px; }
.wa-code-panel .form-feedback { font-size: 7px; }
.wa-session-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 16px 20px; }
.wa-session-details > div { padding: 11px; border: 1px solid #e0e9ef; border-radius: 9px; background: #fbfdfe; }
.wa-session-details dt { color: #8395a2; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.wa-session-details dd { margin: 4px 0 0; color: #24485e; font-size: 9px; font-weight: 750; }
.wa-session-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; }
.wa-direct-restart { display: contents; }
.wa-restart-form { margin: 0 20px 20px; padding: 15px; border: 1px solid #cfe0ea; border-radius: 12px; background: #f8fcff; }
.wa-restart-form[hidden] { display: none !important; }
.wa-session-aside { display: grid; gap: 14px; }
.wa-power-card,
.wa-danger-card { padding: 18px; }
.wa-power-card h2 { margin: 4px 0 12px; color: #153a51; font: 800 14px Manrope, sans-serif; }
.wa-power-card > div { display: flex; gap: 9px; margin-top: 9px; }
.wa-power-card > div > span { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 8px; background: #eaf8f0; color: #17a459; font-weight: 800; }
.wa-power-card p { display: grid; gap: 2px; margin: 0; }
.wa-power-card strong { color: #2a4c62; font-size: 8px; }
.wa-power-card small { color: #738898; font-size: 7px; line-height: 1.45; }
.wa-power-card > a { display: inline-block; margin-top: 13px; color: #087de7; font-size: 8px; font-weight: 800; text-decoration: none; }
.wa-danger-card { border-color: #f0d7db; background: linear-gradient(135deg, #fff, #fffafb); }
.wa-danger-card h3 { margin: 5px 0; color: #553a42; font: 800 12px Manrope, sans-serif; }
.wa-danger-card > p:not(.panel-kicker) { margin: 0 0 11px; color: #806a71; font-size: 8px; line-height: 1.5; }
.wa-danger-card button { padding: 8px 10px; border: 1px solid #edc3ca; border-radius: 8px; background: #fff3f5; color: #b44151; font: 800 8px Manrope, sans-serif; cursor: pointer; }
.wa-danger-card button:hover { background: #ffe8ec; }
.wa-danger-card .form-feedback { margin: 7px 0 0; color: #8c6370; font-size: 7px; }

@media (max-width: 1050px) {
    .wa-command-hero { align-items: flex-start; flex-direction: column; }
    .wa-live-health { width: 100%; box-sizing: border-box; }
    .wa-command-metrics { grid-template-columns: 1fr 1fr; }
    .wa-activation-layout,
    .wa-session-layout { grid-template-columns: 1fr; }
    .wa-session-aside { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    .wa-command-copy { align-items: flex-start; }
    .wa-product-mark { width: 45px; height: 45px; flex-basis: 45px; border-radius: 14px; }
    .wa-product-mark svg { width: 29px; height: 29px; }
    .wa-command-metrics,
    .wa-setup-steps,
    .wa-session-details,
    .wa-session-aside { grid-template-columns: 1fr; }
    .wa-activation-card > header,
    .wa-session-card > header { flex-direction: column; }
    .wa-phone-fields { grid-template-columns: 1fr; margin-left: 0; }
    .wa-qr-panel { grid-template-columns: 1fr; }
    .wa-qr-panel figure { width: min(520px, 100%); box-sizing: border-box; justify-self: center; }
    .wa-session-actions,
    .wa-form-actions { align-items: stretch; flex-direction: column; }
    .wa-session-actions > *,
    .wa-form-actions > * { width: 100%; box-sizing: border-box; text-align: center; }
}

/* Global contrast guard for solid primary actions.
   Component selectors such as `.panel header a` must never turn a button label blue. */
a.primary-button,
button.primary-button,
a.quick-action,
button.quick-action {
    background: linear-gradient(135deg, #0868c7, #064b93);
    color: #fff !important;
}

a.primary-button:visited,
a.primary-button:hover,
a.primary-button:focus-visible,
a.primary-button:active,
button.primary-button:hover,
button.primary-button:focus-visible,
button.primary-button:active,
a.quick-action:visited,
a.quick-action:hover,
a.quick-action:focus-visible,
a.quick-action:active,
button.quick-action:hover,
button.quick-action:focus-visible,
button.quick-action:active {
    color: #fff !important;
}

a.primary-button:hover,
button.primary-button:hover,
a.quick-action:hover,
button.quick-action:hover {
    background: linear-gradient(135deg, #075bb0, #043e7c);
}

.primary-button *,
.quick-action * {
    color: inherit !important;
}

button.primary-button:disabled,
button.quick-action:disabled {
    opacity: 1;
    background: #647b8f;
    color: #fff !important;
}

.mobile-app-prompt[hidden] { display: none !important; }
.welcome-workspace { max-width: 1240px; margin: 0 auto; }
.welcome-hero { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 38px; border-radius: 24px; background: #062a43; color: #fff; margin-bottom: 24px; }
.welcome-hero .welcome-eyebrow { color: #78ccff; font-size: 12px; font-weight: 800; letter-spacing: .09em; margin: 0 0 14px; }
.welcome-hero h1 { max-width: 670px; margin: 0 0 16px; color: #fff; font-size: clamp(28px, 3.2vw, 43px); line-height: 1.15; letter-spacing: -.03em; }
.welcome-hero p { max-width: 670px; margin: 0; color: #d1e5f2; line-height: 1.7; font-size: 15px; }
.welcome-capabilities { display: grid; gap: 10px; flex-shrink: 0; }
.welcome-capabilities span { display: flex; align-items: center; gap: 12px; border: 1px solid #315269; padding: 12px 18px; border-radius: 12px; font-weight: 700; }
.welcome-capabilities svg { width: 22px; height: 22px; color: #79d0ff; }
.welcome-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.welcome-step.panel { padding: 30px; min-width: 0; }
.welcome-step-number { display: inline-grid; place-items: center; width: 42px; height: 42px; background: #e6f5ff; color: #0876b8; border-radius: 12px; font-size: 15px; font-weight: 800; margin-bottom: 20px; }
.welcome-step h2, .welcome-next h2 { margin: 0 0 12px; font-size: 23px; line-height: 1.3; color: #12334a; }
.welcome-step p, .welcome-next p { margin: 0 0 18px; line-height: 1.7; color: #496174; font-size: 14px; }
.welcome-store-links { display: flex; flex-wrap: wrap; gap: 18px; margin: 26px 0; }
.welcome-store-links a { display: flex; flex-direction: column; gap: 10px; font-size: 13px; font-weight: 700; color: #17364d; }
.welcome-store-links img { display: block; width: 165px; max-width: 100%; height: auto; }
.welcome-credentials { display: grid; gap: 16px; margin: 22px 0; }
.welcome-credentials label { display: block; color: #496174; font: 12px ui-monospace, monospace; }
.welcome-credentials input { width: 100%; min-width: 0; padding: 14px; margin-top: 8px; border: 1px solid #b4cde0; border-radius: 10px; color: #062a43; background: #f6faff; font: 600 16px ui-monospace, monospace; }
.welcome-warning { padding: 16px; background: #fff8e8; border: 1px solid #edd9a7; border-radius: 12px; margin-bottom: 18px; color: #654c12; }
.welcome-warning strong { display: block; font-size: 13px; }
.welcome-warning p { margin: 6px 0 0; font-size: 12px; color: #654c12; }
.welcome-step .welcome-muted { font-size: 12px; }
.welcome-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 4px 8px; }
.welcome-next p { margin: 0; }
.welcome-next .primary-button { flex-shrink: 0; }
.welcome-workspace a:focus-visible, .welcome-credentials input:focus-visible { outline: 3px solid #088be0; outline-offset: 4px; }
@media (max-width: 850px) { .welcome-steps { grid-template-columns: minmax(0, 1fr); } .welcome-capabilities { display: none; } .welcome-hero { padding: 28px; } }
@media (max-width: 560px) { .welcome-step.panel { padding: 22px; } .welcome-next { align-items: stretch; flex-direction: column; } .welcome-next .primary-button { text-align: center; } .welcome-store-links img { width: 140px; } }
.mobile-app-prompt {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
    padding: 24px 54px 24px 24px;
    border: 1px solid #b9dff8;
    border-radius: 18px;
    background: #f0f9ff;
    color: #17364d;
}
.mobile-app-prompt-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #dcefff; color: #087bd0; }
.mobile-app-prompt-icon svg { width: 24px; height: 24px; }
.mobile-app-prompt-copy h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; }
.mobile-app-prompt-copy p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; }
.mobile-app-prompt-copy .mobile-app-prompt-note { color: #496579; }
.mobile-app-prompt-copy > a { color: #006bad; font-size: 13px; font-weight: 700; }
.mobile-app-prompt-stores { display: flex; flex-wrap: wrap; gap: 12px; }
.mobile-app-prompt-stores a { display: flex; flex-direction: column; gap: 7px; color: #17364d; font-size: 12px; font-weight: 700; text-decoration: none; }
.mobile-app-prompt-stores img { display: block; width: 142px; max-width: 100%; height: auto; }
.mobile-app-prompt a:focus-visible { outline: 3px solid #087bd0; outline-offset: 4px; border-radius: 5px; }
.mobile-app-prompt-close { position: absolute; top: 8px; right: 8px; margin: 0; }
.mobile-app-prompt-close button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #17364d; font-size: 26px; line-height: 1; cursor: pointer; }
.mobile-app-prompt-close button:hover { background: #dcefff; }
.mobile-app-prompt-close button:focus-visible { outline: 3px solid #087bd0; outline-offset: 2px; }
@media (max-width: 1100px) {
    .mobile-app-prompt { grid-template-columns: 44px minmax(0, 1fr); }
    .mobile-app-prompt-downloads { grid-column: 2; }
}
@media (max-width: 560px) {
    .mobile-app-prompt { padding: 18px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .mobile-app-prompt-downloads { grid-column: 1; }
}

.support-v2-shell { display: grid; gap: 24px; }
.support-v2-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .9fr); gap: 20px; align-items: stretch; }
.support-v2-intro { padding: 30px; background: linear-gradient(135deg, #062a43, #0d5d9e); color: #fff; }
.support-v2-intro h2 { margin: 0 0 12px; color: #fff; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.03em; }
.support-v2-intro p { max-width: 760px; margin: 0; color: #d9eefc; line-height: 1.7; }
.support-v2-intro .panel-kicker { color: #80d5ff; }
.support-v2-promise { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.support-v2-promise span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 12px; font-weight: 800; }
.support-v2-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.support-v2-stats-full { grid-template-columns: repeat(5,minmax(0,1fr)); }
.support-v2-stats .panel { padding: 20px; }
.support-v2-stats span { display: block; color: #5c7283; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.support-v2-stats strong { display: block; margin: 8px 0 4px; color: #062a43; font-size: 32px; line-height: 1; }
.support-v2-stats small { color: #6b8190; }
.support-v2-stat-action { border-color: #ffd99b; background: linear-gradient(180deg, #fff, #fff8eb); }
.support-v2-stat-action span { color: #a26500; }
.support-v2-stat-action strong { color: #8a5200; }
.support-v2-action-needed { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 18px; align-items: stretch; padding: 20px; border-color: #ffd28a; background: linear-gradient(135deg, #fffaf0, #ffffff); }
.support-v2-action-needed-head { display: flex; gap: 15px; align-items: flex-start; }
.support-v2-action-needed-head > span { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: #fff0cf; color: #a86400; font: 900 18px/1 Manrope, sans-serif; }
.support-v2-action-needed h2 { margin: 0; color: #12334a; font-size: 19px; letter-spacing: -.02em; }
.support-v2-action-needed p:not(.panel-kicker) { margin: 6px 0 0; color: #63798a; font-size: 13px; line-height: 1.55; }
.support-v2-action-list { display: grid; gap: 9px; }
.support-v2-action-list a { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid #f1d8a9; border-radius: 13px; background: #fff; box-shadow: 0 8px 20px rgba(128, 86, 0, .06); }
.support-v2-action-list a:hover { border-color: #e0a333; transform: translateY(-1px); }
.support-v2-action-list strong { min-width: 0; color: #12334a; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-v2-action-list small { min-width: 0; color: #7b8f9d; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-v2-action-list span { grid-row: 1 / span 2; grid-column: 2; color: #0b78df; font-size: 11px; font-weight: 900; white-space: nowrap; }
.support-v2-grid { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1.5fr); gap: 24px; align-items: start; }
.support-v2-left, .support-v2-main { display: grid; gap: 18px; min-width: 0; }
.support-v2-filters { display: grid; gap: 16px; padding: 20px; background: linear-gradient(180deg, #ffffff, #f7fbff); }
.support-v2-filters header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 2px; }
.support-v2-filters header h2 { margin: 3px 0 0; color: #12334a; font-size: 18px; line-height: 1.2; }
.support-v2-filters header > span { flex-shrink: 0; padding: 7px 10px; border-radius: 999px; background: #eaf6ff; color: #0a609d; font-size: 11px; font-weight: 900; }
.support-v2-search-field,
.support-v2-filter-row label { display: grid; gap: 7px; color: #51697b; font-size: 12px; font-weight: 800; }
.support-v2-search-field { position: relative; }
.support-v2-search-field i { position: absolute; left: 14px; bottom: 12px; color: #0b7fc8; font-style: normal; font-size: 18px; pointer-events: none; }
.support-v2-search-field input { padding-left: 42px; }
.support-v2-search-field input,
.support-v2-filter-row select { width: 100%; min-height: 46px; border: 1px solid #c7d9e8; border-radius: 14px; background: #fff; color: #12334a; font: 700 14px/1.2 "DM Sans", system-ui, sans-serif; box-shadow: 0 1px 0 rgba(9, 50, 78, .03); }
.support-v2-search-field input:focus,
.support-v2-filter-row select:focus { outline: 3px solid rgba(11, 141, 222, .16); border-color: #0b8dde; }
.support-v2-filter-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.support-v2-filter-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 2px; }
.support-v2-filter-actions .secondary-button,
.support-v2-filter-actions .primary-button { min-height: 40px; }
.support-v2-list { padding: 0; overflow: hidden; }
.support-v2-list header { padding: 20px 20px 12px; }
.support-v2-ticket { display: grid; gap: 7px; padding: 16px 20px; border-top: 1px solid #e5eef5; color: inherit; text-decoration: none; transition: background .18s ease, border-color .18s ease; }
.support-v2-ticket:hover, .support-v2-ticket.active { background: #f1f9ff; }
.support-v2-ticket.active { border-left: 4px solid #0b8dde; padding-left: 16px; }
.support-v2-ticket.needs-reply { background: #fffaf0; border-left: 4px solid #f2a51d; padding-left: 16px; }
.support-v2-ticket.needs-reply:hover, .support-v2-ticket.needs-reply.active { background: #fff4db; }
.support-v2-ticket strong { color: #12334a; line-height: 1.3; }
.support-v2-ticket small, .support-v2-ticket em { color: #6b8190; font-size: 12px; font-style: normal; }
.support-v2-ticket p { margin: 0; color: #486174; font-size: 13px; line-height: 1.45; }
.ticket-state { display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: #eaf4ff; color: #0a609d; font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.ticket-state.waiting_ai { background: #eef1ff; color: #3949ab; }
.ticket-state.waiting_user { background: #fff7e6; color: #9a6500; }
.ticket-state.waiting_staff { background: #f0edff; color: #5b35a7; }
.ticket-state.closed, .ticket-state.solved { background: #e8f8ef; color: #08753d; }
.ticket-state.urgent { background: #ffecec; color: #b42318; }
.support-v2-new, .support-v2-detail { padding: 24px; }
.support-v2-checklist { padding: 16px; border: 1px dashed #b8d4e8; border-radius: 14px; background: #f8fcff; }
.support-v2-checklist span { display: block; margin-bottom: 8px; color: #12334a; font-weight: 800; }
.support-v2-checklist ul { margin: 0; padding-left: 20px; color: #536b7c; line-height: 1.6; font-size: 13px; }
.support-v2-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.support-v2-detail h2 { margin: 0 0 8px; color: #12334a; }
.support-v2-detail header p { margin: 0; color: #657b8c; font-size: 13px; }
.support-v2-thread { display: grid; gap: 16px; margin: 22px 0; padding: 18px; border: 1px solid #e2ecf4; border-radius: 22px; background: linear-gradient(180deg, #f8fbff, #eef6fd); }
.support-v2-message { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: flex-start; max-width: 88%; }
.support-v2-message.user { justify-self: end; grid-template-columns: minmax(0, 1fr) 38px; }
.support-v2-message-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #0b83f6, #10bfd0); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .04em; box-shadow: 0 10px 24px rgba(11, 131, 246, .18); }
.support-v2-message.user .support-v2-message-avatar { grid-column: 2; grid-row: 1; background: #eaf2f8; color: #31536d; box-shadow: none; }
.support-v2-message-bubble { min-width: 0; padding: 16px 18px; border: 1px solid #dbe9f4; border-radius: 18px 18px 18px 6px; background: #fff; box-shadow: 0 12px 30px rgba(20, 63, 98, .06); }
.support-v2-message.user .support-v2-message-bubble { grid-column: 1; grid-row: 1; border-color: #cfe0ef; border-radius: 18px 18px 6px 18px; background: #ffffff; }
.support-v2-message.ai .support-v2-message-bubble,
.support-v2-message.system .support-v2-message-bubble { border-color: #bfe0f8; background: linear-gradient(180deg, #ffffff, #f1f9ff); }
.support-v2-message.staff .support-v2-message-bubble { border-color: #d8cdfa; background: linear-gradient(180deg, #ffffff, #f8f5ff); }
.support-v2-message header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid #edf3f8; }
.support-v2-message strong { color: #12334a; font-size: 13px; letter-spacing: -.01em; }
.support-v2-message time, .support-v2-message small { flex-shrink: 0; color: #708594; font-size: 11px; font-weight: 700; }
.support-v2-message-body { margin: 0; color: #253f53; font-size: 14px; line-height: 1.72; overflow-wrap: anywhere; }
.support-v2-reply { display: grid; gap: 14px; margin-top: 22px; padding: 18px; border: 1px solid #d8e7f3; border-radius: 22px; background: linear-gradient(180deg, #ffffff, #f7fbff); box-shadow: 0 16px 36px rgba(18, 51, 74, .07); }
.support-v2-reply-head { display: flex; align-items: flex-start; gap: 12px; }
.support-v2-reply-head > span { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #e9f5ff, #dff6fb); color: #087cec; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.support-v2-reply-head strong { display: block; color: #12334a; font-size: 15px; letter-spacing: -.01em; }
.support-v2-reply-head small { display: block; margin-top: 3px; color: #6b8090; font-size: 12px; line-height: 1.45; }
.support-v2-reply-field { display: grid; gap: 8px; margin: 0; }
.support-v2-reply-field > span { color: #455f75; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.support-v2-reply-field textarea { width: 100%; min-height: 154px; padding: 15px 16px; border: 1px solid #bfd6ea; border-radius: 18px; background: #fff; color: #122b43; font: inherit; line-height: 1.65; outline: none; resize: vertical; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.support-v2-reply-field textarea::placeholder { color: #8ca0b2; }
.support-v2-reply-field textarea:focus { border-color: #0b83f6; background: #fbfdff; box-shadow: 0 0 0 4px rgba(11, 131, 246, .12), inset 0 1px 0 rgba(255,255,255,.9); }
.support-v2-reply-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; }
.support-v2-reply-footer small { color: #71869a; font-size: 11px; line-height: 1.4; }
.support-v2-close-form { margin-top: 10px; display: flex; justify-content: flex-end; }
@media (max-width: 1120px) {
    .support-v2-hero, .support-v2-grid { grid-template-columns: minmax(0, 1fr); }
    .support-v2-stats-full { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .support-v2-action-needed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .support-v2-stats { grid-template-columns: minmax(0,1fr); }
    .support-v2-detail > header { display: grid; }
    .support-v2-filter-row { grid-template-columns: minmax(0,1fr); }
    .support-v2-filter-actions { justify-content: stretch; }
    .support-v2-filter-actions .secondary-button,
    .support-v2-filter-actions .primary-button { width: 100%; justify-content: center; }
    .support-v2-action-list a { grid-template-columns: minmax(0, 1fr); }
    .support-v2-action-list span { grid-row: auto; grid-column: auto; }
    .support-v2-thread { padding: 12px; border-radius: 18px; }
    .support-v2-message, .support-v2-message.user { max-width: 100%; grid-template-columns: 32px minmax(0, 1fr); }
    .support-v2-message.user .support-v2-message-avatar { grid-column: 1; }
    .support-v2-message.user .support-v2-message-bubble { grid-column: 2; border-radius: 18px 18px 18px 6px; }
    .support-v2-message-avatar { width: 32px; height: 32px; border-radius: 11px; font-size: 8px; }
    .support-v2-message header { display: grid; gap: 4px; }
    .support-v2-reply { padding: 14px; border-radius: 18px; }
    .support-v2-reply-footer { align-items: stretch; flex-direction: column; }
    .support-v2-reply-footer .primary-button { width: 100%; justify-content: center; }
}