:root {
    --app-primary: #5367df;
    --app-sidebar: #17213c;
    --app-accent: #13b7d0;
    --app-background: #f1f3f8;
    --app-panel: #ffffff;
    --app-text: #202a44;
    --app-muted: #76809a;
    --app-border: #e4e8f0;
    --app-shadow: 0 12px 32px rgba(27, 39, 73, .08);
    --app-font-family: 'Inter', Roboto, Arial, sans-serif;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

html.app-shell-active {
    display: block;
    width: 100%;
    min-width: 320px;
    overflow-x: hidden;
}

body {
    background-color: var(--app-background);
    color: var(--app-text);
    font-family: var(--app-font-family);
}

.phone-number-control {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 56px;
    overflow: visible;
    border: 2px solid #b6c3d6;
    border-radius: 16px;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.phone-number-control:focus-within {
    border-color: #9eacc2;
    box-shadow: 0 0 0 2px rgba(83, 103, 223, .08);
}

.phone-number-control select.phone-country-native {
    display: none !important;
}

.phone-number-control .phone-country-trigger {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 112px;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 112px;
    height: 100%;
    margin: 0;
    padding: 0 0 0 24px;
    border: 0;
    border-radius: 16px 0 0 16px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.phone-number-control .phone-country-trigger:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -4px;
}

.phone-country-flag {
    display: inline-block;
    flex: 0 0 auto;
    line-height: 1;
}

.phone-country-flag img {
    display: block;
    width: 36px;
    height: 24px;
    object-fit: fill;
}

.phone-country-chevron {
    width: 0;
    height: 0;
    border-top: 7px solid #555;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.phone-country-dial-code {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 154px;
    align-items: center;
    height: 100%;
    padding-left: 16px;
    color: #647083;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.phone-number-control input.phone-number-input {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 0 !important;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 14px 0 12px;
    border: 0 !important;
    border-radius: 0;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #647083;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .02em;
}

.phone-number-control input.phone-number-input:focus {
    border: 0 !important;
    box-shadow: none !important;
}

.phone-number-control input.phone-number-input::placeholder {
    color: #737d8c;
    opacity: 1;
}

.phone-country-menu {
    position: absolute;
    z-index: 1100;
    top: calc(100% + 6px);
    left: 0;
    box-sizing: border-box;
    width: min(340px, calc(100vw - 32px));
    max-height: 320px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #d5dce7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(27, 39, 73, .18);
}

.phone-country-menu[hidden] {
    display: none;
}

.phone-country-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 7px 12px;
    border: 0;
    background: #fff;
    color: var(--app-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.phone-country-option:hover,
.phone-country-option:focus-visible,
.phone-country-option[aria-selected="true"] {
    outline: 0;
    background: #f0f3fa;
}

.phone-country-option-flag {
    flex: 0 0 34px;
}

.phone-country-option-flag img {
    display: block;
    width: 30px;
    height: 20px;
    object-fit: fill;
}

.phone-country-option-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-country-option-code {
    flex: 0 0 auto;
    padding-left: 12px;
    color: #68758a;
}

@media (max-width: 575.98px) {
    .phone-number-control {
        height: 56px;
        border-radius: 14px;
    }

    .phone-number-control .phone-country-trigger {
        flex-basis: 60px;
        width: 60px;
        gap: 4px;
        padding-left: 8px;
        border-radius: 12px 0 0 12px;
    }

    .phone-country-flag {
        width: 26px;
    }

    .phone-country-flag img {
        width: 26px;
        height: 18px;
    }

    .phone-country-chevron {
        border-top-width: 6px;
        border-right-width: 4px;
        border-left-width: 4px;
    }

    .phone-country-dial-code {
        flex-basis: 70px;
        padding-left: 6px;
        font-size: 15px;
    }

    .phone-number-control input.phone-number-input {
        padding-right: 8px;
        font-size: 15px;
        letter-spacing: .01em;
    }
}

body.app-shell-active .app-main .system-channel-phone-field .phone-number-control {
    height: 46px;
    border-radius: 12px;
}

body.app-shell-active .app-main .system-channel-phone-field .phone-number-control .phone-country-trigger {
    flex-basis: 84px;
    width: 84px;
    gap: 8px;
    padding-left: 14px;
    border-radius: 10px 0 0 10px;
}

body.app-shell-active .app-main .system-channel-phone-field .phone-number-control .phone-country-flag img {
    width: 28px;
    height: 19px;
}

body.app-shell-active .app-main .system-channel-phone-field .phone-number-control .phone-country-dial-code {
    flex: 0 0 72px;
    padding-left: 6px;
    font-size: 14px;
}

body.app-shell-active .app-main .system-channel-phone-field .phone-number-control #telefono.phone-number-input {
    box-sizing: border-box;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 10px 10px 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

img,
video,
iframe {
    max-width: 100%;
}

.container {
    width: min(100% - 32px, 1320px);
    max-width: 1320px;
}

.card,
.panel,
.modal-content {
    border: 1px solid var(--app-border);
    border-radius: 14px;
    box-shadow: var(--app-shadow);
    overflow: hidden;
}

.card {
    background: var(--app-panel);
    margin-bottom: 20px;
}

.card-header,
.card-footer {
    background: var(--app-panel);
    border-color: var(--app-border);
}

.card-header {
    color: var(--app-text);
    font-weight: 700;
}

.btn,
button,
input[type="submit"],
input[type="button"] {
    border-radius: 8px;
    font-weight: 600;
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.form,
form.form {
    box-sizing: border-box;
    width: min(100% - 28px, 680px) !important;
    margin: 28px auto;
    padding: clamp(18px, 3vw, 32px);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
}

body.app-shell-active .app-main form.form:not(.configuration-system-form) {
    width: min(100%, 820px) !important;
    max-width: 100%;
    margin: 0 auto 24px;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
}

body.app-shell-active .app-main form.form:not(.configuration-system-form):has(.row) {
    width: min(100%, 1120px) !important;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
) {
    box-sizing: border-box;
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin: 0 auto 24px !important;
    padding: clamp(18px, 3vw, 32px);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
    text-align: left;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
) :is(label, legend) {
    color: var(--app-text);
    font-weight: 650;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]),
    select,
    textarea
) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid #d5dbea;
    border-radius: 9px;
    background-color: #fff;
    color: var(--app-text);
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
) textarea {
    height: auto !important;
    min-height: 110px;
    line-height: 1.5;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]),
    select,
    textarea
):focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 16%, transparent);
    outline: 0;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
) .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 14px 16px;
    margin: 0;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
) .row > [class*="col-"] {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
) .row > :is(.col-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6) {
    grid-column: span 6;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
) .row > :is(.col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4) {
    grid-column: span 4;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
) .row > :is(.col-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3) {
    grid-column: span 3;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
) .row > :is(.col-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8) {
    grid-column: span 8;
}

body.app-shell-active .app-main :is(
    form[name="insertrecord"]:not(.form),
    form#form:not(.form),
    form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form):not(.system-channel-create-form)
) .row[style*="display:none"] {
    display: none !important;
}

body.app-shell-active .app-main :is(h3, p):has(> a > img[height="50"]) {
    display: none !important;
}

body.app-shell-active .app-main > .container:has(form[name="insertrecord"]) {
    box-sizing: border-box;
    width: min(100%, 1120px);
    max-width: 1120px;
    padding: 0;
    border: 0;
    background: transparent !important;
}

body.app-shell-active .app-main > .container:has(form[name="insertrecord"]) > .row:first-child:has(.card-header) {
    display: none;
}

body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form) {
    display: grid;
    box-sizing: border-box;
    grid-auto-rows: max-content;
    gap: 16px;
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto 24px !important;
    padding: clamp(18px, 3vw, 32px);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
    text-align: left;
}

body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form) .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 14px 16px;
    margin: 0;
}

body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form) .row > [class*="col-"] {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
}

body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form) .row > :is(.col-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6) {
    grid-column: span 6;
}

body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form) .row > :is(.col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4) {
    grid-column: span 4;
}

body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form) .row > :is(.col-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3) {
    grid-column: span 3;
}

body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form) .row > :is(.col-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8) {
    grid-column: span 8;
}

body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form):not(.system-channel-create-form):not(.system-channel-edit-form) .row[style*="display:none"] {
    display: none !important;
}

body.app-shell-active .app-main .legacy-form-label {
    display: block;
    margin: 0 0 7px;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
}

body.app-shell-active .app-main > .container.system-channel-create-shell {
    box-sizing: border-box;
    width: min(100%, 1180px);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent !important;
}

body.app-shell-active .app-main > .container.system-channel-edit-shell {
    box-sizing: border-box;
    width: min(100%, 1180px);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent !important;
}

body.app-shell-active .app-main form[name="insertrecord"]:is(.system-channel-create-form, .system-channel-edit-form) {
    grid-auto-rows: max-content;
    gap: 18px;
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto 24px !important;
    padding: clamp(20px, 3vw, 32px);
    text-align: left;
}

.system-channel-create-form > .system-form-heading,
.system-channel-edit-form > .system-form-heading {
    margin-bottom: 2px;
}

.system-channel-create-form > .row,
.system-channel-edit-form > .row {
    width: 100%;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-section {
    box-sizing: border-box;
    grid-column: 1 / -1;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: clamp(16px, 2.4vw, 24px) !important;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: #f7f9fc !important;
    color: var(--app-text) !important;
    font-size: inherit !important;
    text-align: left !important;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-section-title {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.4;
    text-align: left;
    text-transform: uppercase;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-section-help {
    display: block;
    margin: -7px 0 12px;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.55;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-section-help a {
    color: var(--app-primary);
    font-weight: 650;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-field-help {
    display: block;
    margin-top: 6px;
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.5;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-section .row {
    gap: 14px 16px;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-section > .row + .row {
    margin-top: 16px !important;
}

body.app-shell-active .app-main form[name="insertrecord"]:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-primary-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

body.app-shell-active .app-main form[name="insertrecord"]:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-primary-fields > [class*="col-"] {
    grid-column: auto !important;
    width: auto !important;
    max-width: none !important;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-section .row > [class*="col-"],
:is(.system-channel-create-form, .system-channel-edit-form) > .row > [class*="col-"] {
    align-self: start;
    min-width: 0;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-section :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]),
    select,
    textarea
) {
    height: auto !important;
    min-height: 46px;
    background-color: #fff !important;
    line-height: 1.4 !important;
}

:is(.system-channel-create-form, .system-channel-edit-form) input[type="color"] {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    min-width: 0;
    height: 46px !important;
    padding: 5px;
    border: 1px solid #d5dbea;
    border-radius: 9px;
    background: #fff;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-section .row > [class*="col-"] > span:not(.col-md-12),
:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-section .system-channel-radio-settings {
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.5;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-radio-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-radio-settings label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--app-text);
    cursor: pointer;
}

:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-radio-settings input[type="radio"] {
    margin: 0;
    accent-color: var(--app-primary);
}

:is(.system-channel-create-form, .system-channel-edit-form) #msg {
    color: var(--app-muted);
    font-size: 14px;
}

:is(.system-channel-create-form, .system-channel-edit-form) #msg > span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 600;
    text-transform: none !important;
}

.system-channel-create-form .system-form-actions > .btn,
.system-channel-edit-form .system-form-actions > .btn {
    width: 100%;
}

.system-channel-edit-form .system-channel-record-meta {
    margin: -7px 0 14px;
    color: var(--app-muted);
    font-size: 13px;
}

.system-channel-edit-form .system-channel-record-preview .row {
    align-items: center;
}

.system-channel-edit-form .system-channel-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.system-channel-edit-form .system-channel-preview-item img {
    display: block;
    width: min(100%, 220px);
    max-height: 170px;
    object-fit: contain;
}

.system-channel-edit-form .system-channel-preview-item > span {
    color: var(--app-muted);
    font-size: 12px;
}

.system-channel-edit-form .system-channel-ftp-settings {
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    color: var(--app-text);
}

.system-channel-edit-form .system-channel-ftp-settings > span {
    color: var(--app-muted);
    font-size: 13px;
}

@media (max-width: 640px) {
    body.app-shell-active .app-main form[name="insertrecord"]:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-primary-fields {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .system-channel-edit-form .system-channel-record-preview .row > .system-channel-preview-item {
        grid-column: 1 / -1;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    body.app-shell-active .app-main form[name="insertrecord"]:is(.system-channel-create-form, .system-channel-edit-form) .system-channel-primary-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]),
    select,
    textarea
) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form) textarea {
    height: auto !important;
    min-height: 110px;
    line-height: 1.5;
}

body.app-shell-active .app-main form.form :is(label, legend) {
    color: var(--app-text);
    font-weight: 600;
}

body.app-shell-active .app-main form.form :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]),
    select,
    textarea
) {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid #d5dbea;
    border-radius: 9px;
    background-color: #fff;
    color: var(--app-text);
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.app-shell-active .app-main input[type="file"] {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    min-width: 0;
    min-height: 46px;
    height: auto !important;
    margin: 0;
    padding: 7px;
    border: 1px solid var(--app-border);
    border-radius: 9px;
    background: #fff;
    color: var(--app-text);
    font-family: var(--app-font-family);
    font-size: 13px;
    line-height: 1.4 !important;
}

body.app-shell-active .app-main input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 13px;
    border: 0;
    border-radius: 7px;
    background: color-mix(in srgb, var(--app-primary) 10%, white);
    color: var(--app-primary);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

body.app-shell-active .app-main input[type="file"]::file-selector-button:hover {
    background: var(--app-primary);
    color: #fff;
}

body.app-shell-active .app-main input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 8px 13px;
    border: 0;
    border-radius: 7px;
    background: color-mix(in srgb, var(--app-primary) 10%, white);
    color: var(--app-primary);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

body.app-shell-active .app-main input[type="file"]:focus-visible {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 16%, transparent);
    outline: 0;
}

body.app-shell-active .app-main form.form textarea {
    min-height: 110px;
}

body.app-shell-active .app-main form.form :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]),
    select,
    textarea
):focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 16%, transparent);
    outline: 0;
}

body.app-shell-active .app-main form.form :is(button[type="submit"], input[type="submit"]) {
    border-color: #198754 !important;
    border-radius: 9px;
    background-color: #198754 !important;
    color: #fff !important;
    font-weight: 700;
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body.app-shell-active .app-main form.form :is(button[type="submit"], input[type="submit"]):hover {
    border-color: #157347 !important;
    background-color: #157347 !important;
    box-shadow: 0 5px 14px rgba(25, 135, 84, .2);
}

.system-logo-form {
    display: grid;
    gap: 20px;
}

.system-form-heading {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--app-border);
}

.system-form-heading h2 {
    margin: 0;
    color: var(--app-text);
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 750;
}

.system-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.app-shell-active .app-main form.form.system-content-form {
    display: grid;
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    gap: 20px;
    margin: 0 auto 24px !important;
}

body.app-shell-active .app-main form.system-user-create-form {
    display: grid;
    width: min(100%, 960px) !important;
    max-width: 960px;
    gap: 20px;
    margin: 0 auto 24px !important;
    padding: clamp(20px, 3vw, 32px);
}

body.app-shell-active .app-main form.form.system-user-edit-form:not(.configuration-system-form) {
    display: grid;
    width: min(100%, 1180px) !important;
    max-width: 1180px;
    gap: 20px;
    margin: 0 auto 24px !important;
    padding: clamp(20px, 3vw, 32px);
    text-align: left;
}

.system-user-edit-grid,
.system-user-edit-permissions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

.system-user-edit-role,
.system-user-edit-channel,
.system-user-edit-photo,
.system-user-edit-permissions {
    grid-column: 1 / -1;
}

.system-user-edit-channel[hidden],
.system-user-edit-limit[hidden] {
    display: none !important;
}

.system-user-edit-role,
.system-user-edit-permission-card {
    min-width: 0;
    margin: 0;
}

.system-user-edit-form .system-upload-field > :is(input:not([type="hidden"]), select),
.system-user-edit-limit > input {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}

.system-user-edit-role legend,
.system-user-edit-permission-card legend {
    float: none;
    width: auto;
    margin: 0;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.system-user-edit-radio-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
}

.system-user-edit-radio-options label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
}

.system-user-edit-radio-options input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--app-primary);
}

.system-user-edit-permission-card > p {
    margin: 0;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.5;
}

.system-user-edit-photo-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.system-user-edit-photo-label {
    color: var(--app-text);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.system-user-edit-photo-preview img {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: #fff;
    object-fit: cover;
}

.system-user-edit-photo-preview a {
    color: var(--app-primary);
    font-weight: 650;
}

.system-user-edit-limit {
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--app-border);
}

.system-user-edit-limit > p {
    margin: 0;
    color: var(--app-muted);
    font-size: 12px;
}

@media (max-width: 900px) {
    .system-user-edit-grid,
    .system-user-edit-permissions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.system-user-create-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

.system-user-create-grid > .system-upload-field {
    height: 100%;
}

.system-user-create-form .system-upload-field > input:not([type="radio"]),
.system-user-create-form .secret-field-control,
.system-user-create-form .secret-field-control > .secret-field-input {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
}

.system-user-create-form .secret-field-control > .secret-field-input {
    padding-right: 50px !important;
}

.system-user-role-field,
.system-user-channel-field,
.system-user-photo-field,
.system-user-create-feedback {
    grid-column: 1 / -1;
}

.system-user-role-field {
    min-width: 0;
    margin: 0;
}

.system-user-role-field legend {
    float: none;
    width: auto;
    margin: 0;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.system-user-role-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
}

.system-user-role-options label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
}

.system-user-role-options input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--app-primary);
}

.system-user-channel-field[hidden] {
    display: none !important;
}

.system-user-create-form .system-form-actions > .btn {
    min-height: 48px;
}

.system-upload-field-wide {
    grid-column: 1 / -1;
}

.system-upload-field {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: #f7f9fc;
}

.system-upload-field > label {
    margin: 0;
    font-size: 14px;
    font-weight: 700 !important;
    text-transform: uppercase;
}

.system-upload-field > p {
    margin: 0;
    color: var(--app-muted);
    font-size: 13px;
    line-height: 1.55;
}

.system-upload-field > p a {
    display: inline-block;
    margin-top: 5px;
    color: var(--app-primary);
    font-weight: 650;
}

.system-content-media-preview {
    display: block;
    width: min(100%, 640px);
    max-height: 360px;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: #111827;
}

.system-content-media-preview img,
.system-content-media-preview video {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
}

.system-form-feedback {
    padding: 13px 15px;
    border: 1px solid #f1b9be;
    border-radius: 10px;
    background: #fff4f4;
    color: #9c2732;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.system-form-feedback:empty {
    display: none;
}

.system-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 2px;
}

.system-form-actions > .btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 11px 18px;
    font-weight: 700;
    text-decoration: none;
}

body.app-shell-active .system-form-actions > .btn-success {
    border-color: #198754 !important;
    background: #198754 !important;
    color: #fff !important;
}

body.app-shell-active .system-form-actions > .btn-success:hover {
    border-color: #157347 !important;
    background: #157347 !important;
}

body.app-shell-active .system-form-actions > .btn-outline-secondary {
    border-color: #d3dae4;
    background: #fff;
    color: #526176;
}

body.app-shell-active .system-form-actions > .btn-outline-secondary:hover {
    border-color: #aab5c4;
    background: #f2f5f8;
    color: #26364a;
}

.login-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]),
select,
textarea {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 42px;
    border: 1px solid #d5dbea;
    border-radius: 8px;
    background-color: #fff;
    color: var(--app-text);
}

textarea {
    min-height: 100px;
}

.login-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 16%, transparent);
    outline: 0;
}

table {
    max-width: 100%;
}

.table-responsive {
    border-radius: 10px;
}

.table thead th,
thead > tr:first-child {
    background-color: var(--app-sidebar);
    color: #fff;
}

.alert {
    border-radius: 10px;
}

html.ads-page-root,
body.ads-page {
    display: block !important;
    box-sizing: border-box !important;
    width: 100%;
    min-height: 0;
    height: auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.ads-page {
    background: transparent;
    color: var(--app-text);
    font-family: var(--app-font-family);
    text-align: left;
    margin: 0;
    padding: 0;
}

body.ads-page > .ads-carousel-shell {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.ads-page > .ads-carousel-shell > .ads-carousel {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    min-width: 0;
    max-width: none;
    margin: 0;
}

body.ads-page > .ads-carousel-shell > .ads-carousel,
body.ads-page > .ads-carousel-shell > .ads-carousel > .swiper-wrapper,
body.ads-page > .ads-carousel-shell > .ads-carousel > .swiper-wrapper > .swiper-slide {
    box-sizing: border-box;
    min-width: 0;
}

.ads-carousel.swiper {
    position: relative;
    height: auto !important;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #e9eef5;
    cursor: grab;
}

.ads-carousel.swiper:active {
    cursor: grabbing;
}

@media (hover: none) {
    .ads-carousel.swiper {
        cursor: auto;
    }
}

.ads-carousel .swiper-slide {
    box-sizing: border-box;
    min-width: 0;
    height: auto;
    width: 100% !important;
    flex-shrink: 0;
    background: var(--app-panel);
}

.ads-carousel .swiper-wrapper {
    width: 100%;
    height: auto !important;
    align-items: stretch;
}

.ads-image-stage {
    position: relative;
    width: 100%;
    height: auto;
    background: #e9eef5;
}

.ads-carousel .ads-slide-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-drag: none;
}

.ads-slide-content {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    justify-items: start;
    gap: 12px;
    padding: clamp(18px, 3vw, 30px);
}

body.ads-page .ads-slide-title {
    margin: 0;
    color: var(--app-primary);
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 750;
    line-height: 1.3;
    text-transform: uppercase;
}

.ads-slide-description {
    margin: 0;
    color: var(--app-muted);
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-line;
}

.ads-slide-action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 10px 20px;
    border: 0;
    border-radius: 9px;
    background: var(--app-primary);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
}

.ads-slide-action:hover,
.ads-slide-action:focus-visible {
    background: color-mix(in srgb, var(--app-primary) 82%, #17213c);
    color: #fff !important;
}

.ads-carousel-control {
    position: absolute;
    z-index: 2;
    top: 50%;
    top: clamp(80px, 28vw, 320px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 56px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 10px;
    background: rgba(23, 33, 60, .58);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: background-color .18s ease, opacity .18s ease;
}

.ads-carousel.is-controls-visible .ads-carousel-control {
    opacity: .9;
    pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
    .ads-carousel:hover .ads-carousel-control,
    .ads-carousel:focus-within .ads-carousel-control {
        opacity: .9;
        pointer-events: auto;
    }
}

.ads-carousel-control-next {
    right: 14px;
}

.ads-carousel-control-prev {
    left: 14px;
}

.ads-carousel-control .fa {
    font-size: 18px !important;
}

.ads-carousel-control:hover,
.ads-carousel-control:focus-visible {
    background: rgba(23, 33, 60, .82);
    color: #fff;
    opacity: 1;
}

.ads-carousel-control:focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: 3px solid var(--app-accent);
    outline-offset: 3px;
}

.ads-carousel-control::after {
    content: none !important;
}

.ads-carousel .swiper-slide,
.ads-image-stage {
    -webkit-user-select: none;
    user-select: none;
}

.ads-slide-action {
    -webkit-user-select: auto;
    user-select: auto;
}

.ads-empty-state {
    padding: 48px 24px;
    color: var(--app-muted);
    font-size: 15px;
    text-align: center;
}

.dashboard-quick-actions {
    position: fixed;
    z-index: 11800;
    top: 50%;
    right: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: auto;
    max-width: 100vw;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 8px 0 8px 8px;
    border: 0;
    border-radius: 12px 0 0 12px;
    background: transparent;
    box-shadow: none;
    text-align: center;
    transform: translateY(-50%);
}

.overlay-texts-modal[hidden] {
    display: none !important;
}

.overlay-texts-modal {
    position: fixed;
    z-index: 30000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .78);
}

.overlay-texts-modal__panel {
    display: flex;
    width: 100%;
    max-width: 1440px;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
}

.overlay-texts-modal__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e4e9f1;
}

.overlay-texts-modal__header h2 {
    margin: 0;
    color: #1d2b45;
    font-size: 1.1rem;
    font-weight: 700;
}

.overlay-texts-modal__close {
    flex: 0 0 auto;
    padding: .5rem .85rem;
    border: 0;
    border-radius: 8px;
    background: #3156a4;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.overlay-texts-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

.overlay-texts-modal__body iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

body.overlay-list-only .app-topbar,
body.overlay-list-only .app-sidebar,
body.overlay-list-only .app-content-heading,
body.overlay-list-only .app-footer,
body.overlay-list-only .overlay-list-brand,
body.overlay-list-only .overlay-list-heading,
body.overlay-list-only .overlay-list-actions {
    display: none !important;
}

body.overlay-list-only .app-main {
    min-height: 100vh;
    margin: 0 !important;
    padding: 12px !important;
}

body.overlay-list-only .app-main > .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.overlay-list-only .app-main > .container > br {
    display: none;
}

body.page-settings-modal-open {
    overflow: hidden;
}

body.comments-modal-open {
    overflow: hidden;
}

body.pagina-modal-only .app-topbar,
body.pagina-modal-only .app-sidebar,
body.pagina-modal-only .app-content-heading,
body.pagina-modal-only .app-footer,
body.pagina-modal-only .insert-post-ads1 {
    display: none !important;
}

body.pagina-modal-only .app-main {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    min-height: 100vh;
    margin: 0 !important;
    padding: 16px !important;
}

body.pagina-modal-only.app-sidebar-collapsed .app-main {
    margin-left: 0 !important;
}

body.pagina-modal-only .app-main > .pagina-editor {
    width: min(100%, 1400px);
    max-width: 1400px;
    margin: 0 auto;
}

body.overlay-form-only .app-topbar,
body.overlay-form-only .app-sidebar,
body.overlay-form-only .app-content-heading,
body.overlay-form-only .app-footer,
body.overlay-form-only .insert-post-ads1 {
    display: none !important;
}

body.overlay-form-only .app-main {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    min-height: 100vh;
    margin: 0 !important;
    padding: 18px !important;
}

body.overlay-list-only.app-sidebar-collapsed .app-main,
body.overlay-form-only.app-sidebar-collapsed .app-main {
    margin-left: 0 !important;
}

body.overlay-form-only .app-main > .container {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    width: 100% !important;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 18px;
}

body.overlay-form-only .app-main form.form.system-content-form {
    box-sizing: border-box;
    justify-self: center;
    width: min(100%, 1160px) !important;
    max-width: 1160px !important;
    margin: 0 auto !important;
    padding: clamp(18px, 3vw, 28px);
}

body.overlay-form-only .app-main form.form.system-content-form.overlay-edit-form {
    width: min(100%, 1160px) !important;
    max-width: 1160px !important;
    gap: 20px;
}

.overlay-edit-status-banner {
    box-sizing: border-box;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 66px;
    display: flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 12px;
    color: #fff;
    font-size: clamp(22px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.15;
}

.overlay-edit-status-banner.is-active {
    background: #198754;
}

.overlay-edit-status-banner.is-inactive {
    background: #dc3545;
}

.overlay-edit-fields {
    width: 100%;
    align-items: start;
    gap: 16px 20px;
}

.overlay-edit-fields > :is(select, input) {
    width: 100%;
    min-width: 0;
    min-height: 62px !important;
}

.overlay-edit-fields > input[readonly] {
    background: #fff !important;
}

.overlay-edit-message {
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
}

.overlay-edit-message > p {
    color: #3156d3;
    font-size: 15px;
}

.overlay-edit-message > p span {
    color: #dc3545;
    font-weight: 700;
}

.overlay-edit-message > textarea {
    min-height: 126px !important;
    resize: vertical;
    text-transform: none !important;
}

@media (max-width: 575.98px) {
    body.overlay-list-only .app-main {
        padding: 8px !important;
    }

    body.overlay-form-only .app-main {
        padding: 10px !important;
    }

    body.overlay-form-only .app-main > .container {
        padding: 10px;
    }

    body.pagina-modal-only .app-main {
        padding: 10px !important;
    }

    .overlay-edit-status-banner {
        min-height: 54px;
        padding: 10px 12px;
        font-size: 24px;
    }
}

.dashboard-quick-actions:not(.is-collapsed) {
    top: calc(50% + 32px);
    max-height: calc(100vh - 128px);
    max-height: calc(100dvh - 128px);
}

.dashboard-quick-action-toggle {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    flex: 0 0 36px;
    width: 38px;
    height: 36px;
    place-items: center;
    align-self: center;
    margin: 0 auto;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--app-primary) 24%, white);
    border-radius: 8px;
    background: var(--app-panel, #fff);
    box-shadow: 0 3px 12px rgba(27, 39, 73, .12);
    color: var(--app-primary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.dashboard-quick-action-toggle .fa {
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    font-family: FontAwesome, sans-serif;
    font-size: 16px;
    line-height: 1;
}

.dashboard-quick-action-toggle:hover,
.dashboard-quick-action-toggle:focus-visible {
    background: var(--app-primary);
    color: #fff;
}

.dashboard-quick-actions .dashboard-quick-action-item {
    flex: 0 0 auto;
    overflow: hidden;
    max-width: 128px;
    max-height: 100px;
    opacity: 1;
    transition: width .28s ease, max-width .28s ease, max-height .28s ease, flex-basis .28s ease, transform .28s ease, opacity .2s ease;
}

.dashboard-quick-actions.is-collapsed {
    justify-content: center;
    gap: 0;
    width: 50px !important;
    min-width: 50px;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    overflow: hidden;
    padding: 5px;
    border-radius: 10px 0 0 10px;
    background: var(--app-panel, #fff);
    box-shadow: var(--app-shadow);
    transition: width .28s ease, height .28s ease, min-height .28s ease, max-height .28s ease, background-color .2s ease;
}

.dashboard-quick-actions.is-collapsed .dashboard-quick-action-item {
    flex-basis: 0;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0;
    max-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
    transform: translateX(110%);
}

.dashboard-quick-actions.is-collapsed .dashboard-quick-action-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    flex-basis: 36px;
    width: 38px;
    height: 36px;
    margin: 0;
    transform: translateY(-50%);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.dashboard-quick-actions.is-collapsed .dashboard-quick-action-toggle:hover,
.dashboard-quick-actions.is-collapsed .dashboard-quick-action-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--app-primary) 24%, white);
    background: var(--app-primary);
    color: #fff;
}

.dashboard-quick-actions > a,
.dashboard-quick-actions .flotador,
.dashboard-quick-actions .flotadorpagina,
.dashboard-quick-actions .flotadorlistados,
.dashboard-quick-actions .flotadorbotontv1,
.dashboard-quick-actions .flotadorbotontv2,
.dashboard-quick-actions .manual {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    text-align: center !important;
}

.dashboard-quick-actions > a {
    justify-content: flex-end;
    text-decoration: none !important;
}

.dashboard-quick-actions .flotador,
.dashboard-quick-actions .flotadorpagina,
.dashboard-quick-actions .flotadorlistados,
.dashboard-quick-actions .flotadorbotontv1,
.dashboard-quick-actions .flotadorbotontv2,
.dashboard-quick-actions .manual {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    float: none !important;
    margin: 0 !important;
    vertical-align: middle;
}

.dashboard-quick-actions [id^="siide"],
.dashboard-quick-actions #simanual {
    box-sizing: border-box;
    display: inline-flex;
    width: 72px !important;
    min-width: 72px;
    height: 72px !important;
    min-height: 72px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px !important;
    float: none !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    border: 1px solid color-mix(in srgb, var(--app-primary) 24%, white) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--app-primary) 8%, white) !important;
    color: var(--app-primary) !important;
    font-size: 9px !important;
    font-weight: 700;
    line-height: 1.25;
}

.dashboard-quick-actions [id^="siide"] img,
.dashboard-quick-actions #simanual img {
    width: 23px !important;
    height: 23px !important;
    object-fit: contain;
}

.dashboard-quick-actions .quick-action-icon {
    display: inline-flex;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: var(--app-primary);
    font-size: 22px;
    line-height: 1;
}

.dashboard-quick-actions [id^="siide"] > span,
.dashboard-quick-actions #simanual > span {
    display: block;
    width: 100%;
    text-align: center;
}

.dashboard-quick-actions .flotador #siide,
.dashboard-quick-actions .flotadorpagina #siidepagina,
.dashboard-quick-actions .flotadorlistados #siidelistados,
.dashboard-quick-actions .flotadorbotontv1 #siidebotontv1,
.dashboard-quick-actions .flotadorbotontv2 #siidebotontv2,
.dashboard-quick-actions .manual #simanual {
    box-sizing: border-box;
    display: inline-flex;
    width: 72px;
    min-width: 72px;
    height: 72px;
    min-height: 72px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    float: none !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    border: 1px solid color-mix(in srgb, var(--app-primary) 24%, white) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--app-primary) 8%, white) !important;
    color: var(--app-primary) !important;
    font-size: 9px !important;
    font-weight: 700;
    line-height: 1.25;
}

.dashboard-quick-actions .flotador #siide img,
.dashboard-quick-actions .flotadorpagina #siidepagina img,
.dashboard-quick-actions .flotadorlistados #siidelistados img,
.dashboard-quick-actions .flotadorbotontv1 #siidebotontv1 img,
.dashboard-quick-actions .flotadorbotontv2 #siidebotontv2 img,
.dashboard-quick-actions .manual #simanual img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain;
}

.dashboard-quick-actions #slidoble {
    position: fixed !important;
    z-index: 13000;
    top: 72px;
    right: 104px;
    box-sizing: border-box;
    width: min(620px, calc(100vw - 120px));
    max-width: calc(100vw - 112px);
    height: calc(100vh - 88px);
    height: calc(100dvh - 88px);
    float: none !important;
    margin: 0 !important;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--app-shadow);
}

.btn-primary,
.login-button {
    border-color: var(--app-primary) !important;
    background-color: var(--app-primary) !important;
    color: #fff !important;
}

body.app-shell-active .app-main :is(
    .btn-success,
    .login-button:not([name="probar"]),
    button[name="save_theme"],
    #btnFetch
),
body.app-shell-active .app-profile-actions .btn-primary,
body.app-shell-active .app-timezone-form button[type="submit"] {
    border-color: #198754 !important;
    background-color: #198754 !important;
    color: #fff !important;
}

body.app-shell-active .app-main :is(
    .btn-success,
    .login-button:not([name="probar"]),
    button[name="save_theme"],
    #btnFetch
):hover,
body.app-shell-active .app-profile-actions .btn-primary:hover,
body.app-shell-active .app-timezone-form button[type="submit"]:hover {
    border-color: #157347 !important;
    background-color: #157347 !important;
    color: #fff !important;
}

.btn-info {
    border-color: var(--app-accent);
    background-color: var(--app-accent);
}

a:hover,
a:focus {
    color: var(--app-accent);
}

.flotadortv1,
.flotadortv2 {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 13000 !important;
    width: 0;
    max-width: 100vw;
    background: var(--app-sidebar) !important;
}

.app-main .flotadortv1:not(.is-open) .closeNavtv1,
.app-main .flotadortv2:not(.is-open) .closeNavtv2 {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.app-main .flotadortv1.is-open .closeNavtv1,
.app-main .flotadortv2.is-open .closeNavtv2 {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.app-main .flotadortv1 .closeNavtv1,
.app-main .flotadortv2 .closeNavtv2 {
    z-index: 1;
    transition: opacity .18s ease, visibility .18s ease;
}

.admin-dashboard .container {
    width: 100%;
    max-width: 100%;
}

.admin-dashboard .row {
    gap: 18px 0;
}

.admin-dashboard .card {
    height: 100%;
}

.theme-settings-panel {
    box-sizing: border-box;
    --theme-settings-padding: clamp(20px, 3vw, 32px);
    width: min(100%, 1440px);
    margin: 22px auto 0;
    padding: var(--theme-settings-padding);
    border: 1px solid var(--app-border);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: var(--app-panel);
    box-shadow: 0 16px 38px rgba(27, 39, 73, .1);
    text-align: left;
}

body.app-shell-active .app-main > p.link:has(+ .theme-settings-panel) {
    display: none !important;
}

.configuration-settings-heading {
    margin: calc(0px - var(--theme-settings-padding)) calc(0px - var(--theme-settings-padding)) 26px;
    padding: 18px var(--theme-settings-padding);
    border-radius: 20px 20px 0 0;
    background: var(--app-sidebar);
    color: #fff;
}

.configuration-settings-heading h2 {
    margin: 0;
    color: inherit;
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 750;
    letter-spacing: .01em;
    line-height: 1.35;
}

.theme-settings-panel > form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    margin: 0;
}

.theme-settings-panel form > label[for="theme-preset"] {
    display: block;
    margin: 0 0 8px;
    color: var(--app-text);
    font-size: 14px;
    font-weight: 700;
}

.theme-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.theme-color-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    align-items: center;
    gap: 14px;
    min-height: 66px;
    padding: 10px 14px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: #f7f9fc;
    color: var(--app-text);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.theme-color-field:focus-within {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(19, 183, 208, .16);
}

.theme-color-field input[type="color"] {
    width: 54px;
    height: 44px;
    padding: 3px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.theme-preset-control {
    box-sizing: border-box;
    width: min(100%, 420px);
    max-width: 100%;
    min-height: 46px;
    margin: 0;
    border-radius: 10px;
    background-color: #fff;
}

.theme-settings-panel form > .btn {
    min-height: 46px;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 13px;
    letter-spacing: .035em;
}

.theme-settings-panel + form.form {
    width: min(100%, 1440px) !important;
    max-width: 1440px;
    margin: 0 auto 22px;
    padding: clamp(20px, 3vw, 34px);
    border-top: 0;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 16px 38px rgba(27, 39, 73, .1);
}

.theme-settings-panel + form.form::before {
    display: block;
    height: 1px;
    margin: 0 0 26px;
    background: var(--app-border);
    content: "";
}

.theme-settings-panel + form.form > div:has(> a[href*="uploadlogo.php"]) {
    margin: 0 0 24px !important;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--app-border);
}

.theme-settings-panel + form.form > div:has(> a[href*="uploadlogo.php"]) > hr {
    display: none;
}

.theme-settings-panel + form.form > div:has(> a[href="update.php"]) {
    display: none !important;
}

.theme-settings-panel + form.form > div[style*="background-color"] {
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: #f7f9fc !important;
}

.configuration-fields-grid,
.configuration-options-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px 22px;
    width: 100%;
}

.configuration-fields-grid {
    margin: 0 0 26px;
}

.configuration-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: flex-end;
    gap: 7px;
}

.configuration-field-wide {
    grid-column: auto;
}

.configuration-api-fields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
}

.configuration-field-label {
    display: block;
    min-height: 20px;
    color: var(--app-text) !important;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.configuration-field-label > span {
    color: var(--app-muted) !important;
}

.configuration-field-label a {
    color: var(--app-primary) !important;
    font-weight: 600;
    text-decoration: none;
}

.configuration-field-label a:hover {
    text-decoration: underline;
}

.configuration-system-form .configuration-fields-grid .login-input {
    width: 100% !important;
    min-width: 0;
    margin: 0;
}

.configuration-system-form .configuration-fields-grid input[type="color"] {
    min-height: 46px;
    padding: 5px;
}

.configuration-options-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 22px;
}

.configuration-option-card {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    min-height: 132px;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: #f7f9fc;
}

.configuration-option-card p {
    margin: 0 0 16px;
    color: var(--app-text);
    font-size: 13px;
    line-height: 1.55;
    text-align: left !important;
}

.configuration-option-card center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.configuration-option-card center input[type="radio"] {
    margin: 0 4px 0 0;
}

.configuration-option-card center label {
    margin: 0 14px 0 0;
    color: var(--app-text);
}

.configuration-ftp-panel {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0 !important;
    padding: 20px !important;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: #f7f9fc !important;
    text-align: left !important;
}

.configuration-ftp-panel > p:first-child {
    margin: 0 0 14px;
    color: var(--app-text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.55;
    text-align: left !important;
}

.configuration-ftp-panel > center {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.configuration-ftp-panel > center label {
    color: var(--app-text);
}

.configuration-ftp-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.configuration-ftp-fields input {
    width: 100% !important;
    min-width: 0;
}

.configuration-system-form > .login-button {
    width: 100%;
    min-height: 46px;
    margin-top: 6px;
}

.configuration-system-form > p.link {
    margin: 12px 0 0 !important;
    text-align: center;
}

@media (max-width: 767.98px) {
    body.app-shell-active .app-main form.form:not(.configuration-system-form) {
        width: min(100%, 100%) !important;
        padding: 18px;
    }

    body.app-shell-active .app-main :is(
        form[name="insertrecord"]:not(.form),
        form#form:not(.form),
        form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
    ) {
        width: 100% !important;
        padding: 18px;
    }

    body.app-shell-active .app-main :is(
        form[name="insertrecord"]:not(.form),
        form#form:not(.form),
        form[enctype="multipart/form-data"]:not(.form):not(.system-logo-form):not(.configuration-system-form):not(.system-update-form)
    ) .row > [class*="col-"] {
        grid-column: 1 / -1;
    }

    body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form) {
        width: 100% !important;
        padding: 18px;
    }

    body.app-shell-active .app-main form[name="insertrecord"]:not(.system-content-form):not(.nowplaying-form):not(.pagina-form) .row > [class*="col-"] {
        grid-column: 1 / -1;
    }

    .system-upload-grid,
    .system-user-create-grid,
    .system-user-edit-grid,
    .system-user-edit-permissions,
    .system-form-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .system-user-edit-role,
    .system-user-edit-channel,
    .system-user-edit-photo,
    .system-user-edit-permissions {
        grid-column: 1;
    }

    .system-user-role-field,
    .system-user-channel-field,
    .system-user-photo-field,
    .system-user-create-feedback {
        grid-column: 1;
    }

    .configuration-settings-heading {
        margin-bottom: 22px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .container {
        width: min(100% - 20px, 100%);
        padding-right: 10px;
        padding-left: 10px;
    }

    .theme-settings-grid,
    .configuration-fields-grid,
    .configuration-options-grid,
    .configuration-ftp-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .configuration-field-wide {
        grid-column: auto;
    }

    .configuration-api-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-quick-actions {
        right: 0;
        width: auto;
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        gap: 6px;
        padding: 6px 0 6px 6px;
    }

    .dashboard-quick-action-toggle {
        flex-basis: 34px;
        width: 36px;
        height: 34px;
        margin: 0;
    }

    .dashboard-quick-actions.is-collapsed {
        width: 50px !important;
        min-width: 50px;
        height: 46px;
        min-height: 46px;
        max-height: 46px;
        padding: 5px;
    }

    .dashboard-quick-actions:not(.is-collapsed) {
        top: calc(50% + 29px);
        max-height: calc(100vh - 116px);
        max-height: calc(100dvh - 116px);
    }

    .dashboard-quick-actions.is-collapsed .dashboard-quick-action-toggle {
        right: 5px;
        flex-basis: 34px;
        width: 36px;
        height: 34px;
    }

    .dashboard-quick-actions [id^="siide"],
    .dashboard-quick-actions #simanual {
        width: 64px !important;
        min-width: 64px;
        height: 66px !important;
        min-height: 66px;
        gap: 1px !important;
        padding: 5px 4px !important;
        font-size: 9px !important;
    }

    .dashboard-quick-actions .flotador #siide,
    .dashboard-quick-actions .flotadorpagina #siidepagina,
    .dashboard-quick-actions .flotadorlistados #siidelistados,
    .dashboard-quick-actions .flotadorbotontv1 #siidebotontv1,
    .dashboard-quick-actions .flotadorbotontv2 #siidebotontv2,
    .dashboard-quick-actions .manual #simanual {
        width: 64px;
        min-width: 64px;
        height: 66px;
        min-height: 66px;
        gap: 1px;
        padding: 5px 4px !important;
        font-size: 9px !important;
    }

    .dashboard-quick-actions .quick-action-icon {
        flex-basis: 23px;
        width: 23px;
        height: 23px;
        font-size: 19px;
    }

    .dashboard-quick-actions #slidoble {
        top: 66px;
        right: 84px;
        width: calc(100vw - 100px);
        max-width: calc(100vw - 92px);
        height: calc(100vh - 78px);
        height: calc(100dvh - 78px);
    }

    .admin-dashboard .row > [class*="col"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .table-responsive table {
        min-width: 640px;
    }

    .app-main .flotadortv1,
    .app-main .flotadortv2 {
        height: 100dvh !important;
    }
}

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

body.app-shell-active {
    display: block;
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
    background: #f3f6fa;
}

html.app-shell-pending body {
    visibility: hidden !important;
}

.app-shell {
    min-height: 100vh;
}

.app-topbar {
    position: fixed;
    z-index: 12000;
    inset: 0 0 auto 248px;
    display: flex;
    align-items: center;
    gap: 18px;
    height: 64px;
    padding: 0 24px 0 48px;
    background: var(--app-primary, #2583c5);
    box-shadow: 0 2px 12px rgba(20, 42, 68, .18);
    color: #fff;
    transition: left .22s ease;
}

.app-menu-toggle {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: 22px;
    background: #42b96a;
    box-shadow: 0 4px 14px rgba(12, 28, 44, .22);
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.app-menu-toggle .fa {
    display: flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    font-family: FontAwesome, sans-serif;
    font-size: 18px;
    line-height: 1;
}

.app-menu-toggle:hover,
.app-menu-toggle:focus-visible {
    background: #35a95c;
    color: #fff;
}

@media (min-width: 901px) {
    .app-menu-toggle {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 22px 0 0 22px;
    }

    .app-sidebar-collapsed .app-topbar {
        left: 76px;
    }
}

.app-brand {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    max-width: min(34vw, 360px);
    color: #fff !important;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-brand-logo {
    display: block;
    width: auto;
    max-width: min(34vw, 230px);
    max-height: 42px;
    object-fit: contain;
    object-position: left center;
}

.app-sidebar-brand {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: center;
    margin: 0 4px 12px;
    padding: 8px 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none !important;
}

.app-sidebar-brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 52px;
    object-fit: contain;
    object-position: center;
}

.app-sidebar-brand-logo.is-fallback {
    width: 52px;
    height: 52px;
}

.app-topbar-spacer {
    flex: 1;
}

.app-topbar-page {
    display: grid;
    flex: 0 1 460px;
    min-width: 0;
    gap: 2px;
    color: #fff;
}

.app-topbar-page-title,
.app-topbar-page-subtitle {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-topbar-page-title {
    color: #fff;
    font-size: clamp(14px, 1.25vw, 18px);
    font-weight: 750;
    line-height: 1.2;
    text-transform: uppercase;
}

.app-topbar-page-subtitle {
    color: rgba(255, 255, 255, .82);
    font-size: 11px;
    font-weight: 300 !important;
    line-height: 1.2;
}

.app-user-menu {
    position: relative;
    flex: 0 0 auto;
}

.app-user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 4px 8px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.app-user-menu-toggle:hover,
.app-user-menu-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, .13);
}

.app-user-menu-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.app-account-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
}

.app-user-menu-chevron {
    font-size: 14px;
}

.app-user-menu-panel {
    position: absolute;
    z-index: 12500;
    top: calc(100% + 7px);
    right: 0;
    width: min(250px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(20, 38, 57, .2);
    color: #26384a;
}

.app-user-menu-panel[hidden] {
    display: none;
}

.app-user-menu-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    color: #40546a !important;
    font-size: 13px;
    text-decoration: none !important;
}

.app-user-menu-logout:hover,
.app-user-menu-logout:focus {
    background: #f3f6f9;
    color: #1e6fa7 !important;
}

.app-user-menu-edit-profile {
    width: 100%;
    border: 0;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.app-profile-modal[hidden] {
    display: none;
}

.app-profile-modal {
    position: fixed;
    z-index: 13000;
    inset: 0;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 20px;
    background: rgba(18, 30, 47, .54);
}

.app-profile-dialog {
    width: min(100%, 660px);
    max-height: min(90vh, 820px);
    overflow-y: auto;
    border: 1px solid #e4eaf1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(17, 31, 49, .24);
}

.app-timezone-dialog {
    width: min(100%, 520px);
}

.app-timezone-form {
    grid-template-columns: minmax(0, 1fr);
}

.app-timezone-field,
.app-timezone-help {
    grid-column: 1;
}

.app-timezone-help {
    margin: -4px 0 0;
    color: #718198;
    font-size: 12px;
}

.app-profile-modal-header {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid #e8edf3;
    background: #fff;
}

.app-profile-modal-header h2 {
    margin: 0;
    color: #26384a;
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
}

.app-profile-modal-close {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid #e0e6ee;
    border-radius: 10px;
    background: #f6f8fb;
    color: #52647a;
    cursor: pointer;
}

.app-profile-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 22px;
}

.app-profile-field {
    display: grid;
    min-width: 0;
    gap: 7px;
    margin: 0;
    color: #46596f;
    font-size: 13px;
    font-weight: 600;
}

.app-profile-field .form-control {
    min-height: 42px;
    border: 1px solid #dce4ee;
    border-radius: 9px;
    background: #fff;
}

.app-profile-password-help,
.app-profile-status,
.app-profile-actions {
    grid-column: 1 / -1;
}

.configuration-api-fields {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-profile-password-help {
    margin: 2px 0 -8px;
    color: #718198;
    font-size: 12px;
    font-weight: 400;
}

.app-profile-status {
    min-height: 0;
    color: #52647a;
    font-size: 13px;
}

.app-profile-status.is-error {
    color: #b42332;
}

.app-profile-status.is-success {
    color: #218354;
}

.app-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid #edf0f4;
}

.app-profile-modal-open {
    overflow: hidden;
}

.app-sidebar {
    box-sizing: border-box;
    position: fixed;
    z-index: 11900;
    inset: 0;
    right: auto;
    width: 248px;
    overflow-y: auto;
    padding: 18px 12px 24px;
    background: #1d2938;
    color: #e6edf5;
    box-shadow: 4px 0 16px rgba(25, 39, 55, .08);
    transition: width .22s ease, transform .22s ease;
}

.app-sidebar-profile {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -12px 18px 4px;
    padding: 12px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    text-align: left;
}

.app-sidebar-profile-identity {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
}

.app-sidebar-profile strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sidebar-profile-identity > span {
    overflow: hidden;
    color: #9eacbc;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-profile-avatar {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: #2a3a4e;
    color: #d8e6f5;
    font-size: 21px;
}

.app-navigation {
    display: grid;
    gap: 4px;
}

.app-navigation-group {
    margin: 13px 10px 5px;
    color: #8d9bad;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.app-navigation-link {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding: 8px 14px;
    border-radius: 7px;
    color: #d1d9e3 !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}

.app-sidebar a.app-navigation-link {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.app-navigation-link .fa {
    display: flex;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #a7b6c8;
    font-size: 17px;
    text-align: center;
    line-height: 1;
}

.app-navigation-link > span {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    line-height: 1.35;
}

.app-navigation-link:hover,
.app-navigation-link.is-active {
    background: rgba(255, 255, 255, .11);
    color: #fff !important;
}

.app-navigation-link.is-active {
    box-shadow: inset 3px 0 0 var(--app-accent, #16b8d0);
}

.app-navigation-link.is-active .fa {
    color: #58d1df;
}

.app-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-left: 248px;
    padding: 88px 28px 34px;
    transition: margin-left .22s ease;
}

.app-content-heading {
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto 22px;
    padding: 4px 2px 0;
}

body.app-shell-active .app-content-heading h2 {
    margin: 0;
    color: #27374a;
    font-size: clamp(29px, 2.8vw, 38px);
    font-weight: 800;
    letter-spacing: .025em;
    line-height: 1.15;
}

.app-content-heading p {
    margin: 7px 0 0;
    color: #77869a;
    font-size: clamp(14px, 1.15vw, 17px);
    font-weight: 300;
    line-height: 1.5;
}

.app-footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    margin: auto -28px -34px;
    padding: 12px 28px;
    background: var(--app-primary, #5367df);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

.app-footer-version,
.app-footer-credit {
    min-width: 0;
}

.app-footer-credit {
    text-align: right;
}

body.app-shell-active .insert-post-ads1 {
    display: none !important;
}

body.app-shell-active.app-auth-recovery-page {
    padding: 0;
}

body.app-shell-active.app-auth-recovery-page .app-main {
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
}

body.app-shell-active.app-auth-recovery-page .app-main > .app-auth-layout {
    flex: 1 0 auto;
    min-height: 0;
}

@media (min-width: 901px) {
    .app-sidebar-collapsed .app-sidebar {
        width: 76px;
        overflow-x: hidden;
        padding-right: 8px;
        padding-left: 8px;
    }

    .app-sidebar-collapsed .app-navigation-group,
    .app-sidebar-collapsed .app-navigation-link span {
        display: none;
    }

    .app-sidebar-collapsed .app-sidebar-brand {
        min-height: 42px;
        margin: 0 0 8px;
        padding: 4px 0 8px;
    }

    .app-sidebar-collapsed .app-sidebar-brand-logo {
        width: 36px;
        height: 36px;
        max-width: none;
        max-height: none;
        object-fit: cover;
        object-position: left center;
    }

    .app-sidebar-collapsed .app-sidebar-profile {
        justify-content: center;
        margin: 0 0 18px;
        padding: 8px 0;
        border-bottom: 0;
    }

    .app-sidebar-collapsed .app-sidebar-profile-identity,
    .app-sidebar-collapsed .app-profile-avatar {
        display: none;
    }

    .app-sidebar-collapsed .app-menu-toggle {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }

    .app-sidebar-collapsed .app-navigation {
        justify-items: center;
        gap: 8px;
    }

    .app-sidebar-collapsed .app-navigation-link {
        box-sizing: border-box;
        display: flex;
        width: 56px;
        min-width: 56px;
        height: 52px;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 10px;
    }

    .app-sidebar-collapsed .app-navigation-link .fa {
        display: flex;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        margin: 0;
        font-size: 20px;
        line-height: 1;
    }

    .app-sidebar-collapsed .app-navigation-link.is-active {
        box-shadow: inset 0 -3px 0 var(--app-accent, #16b8d0);
    }

    .app-sidebar-collapsed .app-main {
        margin-left: 76px;
    }
}

.app-main > .container,
.app-main > .admin-dashboard,
.app-main .admin-dashboard {
    width: 100%;
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
}

.app-main .dashboard-quick-actions {
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    right: 0;
    width: auto;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    margin: 0;
    border-left: 0;
    padding: 8px 0 8px 8px;
    transform: translateY(-50%);
}

.app-sidebar-backdrop {
    display: none;
}

.admin-dashboard > div[style*="margin: 30px"] {
    margin: 0 0 18px !important;
    text-align: left;
}

.admin-dashboard > div[style*="margin: 30px"] h3 {
    text-align: left;
}

.admin-dashboard > .card {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.admin-dashboard > .card > .card-body {
    padding: 0;
}

.admin-dashboard > .card > .card-body > .card-header[style*="border-radius:10px"] {
    display: none !important;
}

.admin-dashboard #dynamic_content {
    overflow: visible;
    background: transparent !important;
}

.admin-dashboard #dynamic_content > .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.admin-dashboard #dynamic_content > .container > .row {
    gap: 18px 0;
    margin: 0 -9px;
    background: transparent !important;
}

.admin-dashboard #dynamic_content > .container.text-center > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 18px;
}

.admin-dashboard #dynamic_content > .container.text-center > .row > .col {
    width: 100%;
    min-width: 0;
    padding: 0;
}

.admin-dashboard #dynamic_content > .container > .row > [class*="col"] {
    padding: 0 9px;
}

.admin-dashboard #dynamic_content > .container > .row .card {
    border: 1px solid #e6ebf2;
    background: #fff;
    box-shadow: 0 4px 18px rgba(28, 48, 73, .05);
}

.admin-dashboard #dynamic_content > .container > .row .card-header {
    padding: 16px;
    background: #fff;
    color: #27374a;
}

.admin-dashboard #dynamic_content > .container > .row .card-header h4 {
    margin: 0;
    font-size: 14px;
}

.admin-dashboard #dynamic_content > .container > .row .card-body {
    padding: 16px;
}

.admin-dashboard #dynamic_content > .container > .row .card-footer {
    min-height: 8px;
    padding: 0;
}

.admin-dashboard #dynamic_content > .container.text-center > .dashboard-control-row .card {
    border-top: 3px solid var(--dashboard-panel-accent);
    background: #fff;
    box-shadow: 0 7px 22px rgba(28, 48, 73, .10);
}

.admin-dashboard #dynamic_content > .container.text-center > .dashboard-control-row .card-header,
.admin-dashboard #dynamic_content > .container.text-center > .dashboard-control-row .card-body {
    background: #fff;
}

.admin-dashboard #dynamic_content > .container.text-center > .dashboard-control-row-1 .col:first-child {
    --dashboard-panel-accent: #568fc7;
}

.admin-dashboard #dynamic_content > .container.text-center > .dashboard-control-row-1 .col:last-child {
    --dashboard-panel-accent: #42a77a;
}

.admin-dashboard #dynamic_content > .container.text-center > .dashboard-control-row-2 .col:first-child {
    --dashboard-panel-accent: #8a70c5;
}

.admin-dashboard #dynamic_content > .container.text-center > .dashboard-control-row-2 .col:last-child {
    --dashboard-panel-accent: #d77791;
}

.admin-dashboard #dynamic_content > .container.text-center > .dashboard-control-row-3 .col:first-child {
    --dashboard-panel-accent: #d18a3d;
}

.admin-dashboard #dynamic_content > .container.text-center > .dashboard-control-row-3 .col:last-child {
    --dashboard-panel-accent: #b6a23c;
}

.admin-dashboard #dynamic_content > .container.text-center > .row .table thead th {
    background: #eef1f4 !important;
    color: #435166 !important;
}

.admin-dashboard #dynamic_content > .container.text-center > .card-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
    margin: 0 0 18px !important;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .alert {
    grid-column: 1 / -1;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group {
    display: contents;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > form {
    order: 20;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-iframe-mobile {
    order: 5;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-multiple-iframe-mobile {
    order: 6;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-counter {
    order: 9;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-ticker-overlay {
    order: 8;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-mobile {
    order: 1;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-multiple {
    order: 3;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-websites {
    order: 7;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-radio-mobile {
    order: 2;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-radio-multiple {
    order: 4;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-title-current {
    order: 10;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-title-continuous {
    order: 11;
}

.admin-dashboard #dynamic_content > .container.text-center > .dashboard-tool-group > form:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 9px) !important;
    justify-self: center;
}

.admin-dashboard #dynamic_content > .container.text-center > .card-group > form {
    display: flex;
    width: 100% !important;
    min-width: 0;
    margin: 0;
}

.admin-dashboard #dynamic_content > .container.text-center > .card-group > form > .card {
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > form:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100% !important;
    justify-self: stretch;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-iframe-mobile,
.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-multiple-iframe-mobile,
.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-multiple,
.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-websites,
.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-radio-mobile,
.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-radio-multiple,
.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-counter,
.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-ticker-overlay,
.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-title-current,
.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-title-continuous {
    grid-column: auto !important;
    width: 100% !important;
    justify-self: stretch;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-mobile {
    grid-column: 1 !important;
    grid-row: 2;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-radio-mobile {
    grid-column: 2 !important;
    grid-row: 2;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-multiple {
    grid-column: 1 !important;
    grid-row: 3;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-radio-multiple {
    grid-column: 2 !important;
    grid-row: 3;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-iframe-mobile {
    grid-column: 1 !important;
    grid-row: 4;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-multiple-iframe-mobile {
    grid-column: 2 !important;
    grid-row: 4;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-websites {
    grid-column: 1 !important;
    grid-row: 5;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-ticker-overlay {
    grid-column: 2 !important;
    grid-row: 5;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-counter {
    grid-column: 1 !important;
    grid-row: 6;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-title-current {
    grid-column: 2 !important;
    grid-row: 6;
}

.admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-title-continuous {
    grid-column: 1 !important;
    grid-row: 7;
}

.dashboard-overview {
    display: grid;
    gap: 18px;
    margin: 0 0 22px;
}

.dashboard-page-heading,
.dashboard-analysis-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-page-heading {
    padding: 4px 2px 0;
}

.dashboard-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #8492a4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.dashboard-page-heading h2,
.dashboard-analysis-heading h3 {
    margin: 0;
    color: #27374a;
    font-weight: 700;
}

.dashboard-page-heading h2 {
    font-size: clamp(22px, 2.4vw, 29px);
}

.dashboard-page-heading p {
    margin: 5px 0 0;
    color: #77869a;
    font-size: 13px;
}

.dashboard-section-title {
    margin: 0;
    color: #27374a;
    font-size: clamp(25px, 2.7vw, 34px);
    font-weight: 800;
    letter-spacing: .045em;
    line-height: 1.15;
}

.dashboard-date {
    padding: 8px 12px;
    border: 1px solid #e3eaf1;
    border-radius: 8px;
    background: #fff;
    color: #66778a;
    font-size: 12px;
    white-space: nowrap;
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.dashboard-kpi {
    position: relative;
    display: grid;
    min-height: 154px;
    align-content: start;
    gap: 5px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid #e4e9f0;
    border-radius: 14px;
    background: #fff;
    color: #24354a !important;
    text-decoration: none !important;
    box-shadow: 0 7px 22px rgba(31, 48, 69, .10);
    transition: transform .16s ease, box-shadow .16s ease;
}

.dashboard-kpi::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--dashboard-kpi-accent);
    content: "";
}

.dashboard-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(31, 48, 69, .11);
}

.dashboard-kpi-icon {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 11px;
    background: transparent;
    font-size: 18px;
}

.dashboard-kpi-label {
    padding-right: 44px;
    color: #4b5c70;
    font-size: 12px;
    font-weight: 600;
}

.dashboard-kpi > strong {
    margin-top: 7px;
    color: #24354a;
    font-size: clamp(25px, 2.2vw, 34px);
    line-height: 1.15;
}

.dashboard-kpi-detail {
    color: #63758a;
    font-size: 11px;
}

.dashboard-kpi-blue {
    --dashboard-kpi-accent: #588cc0;
}

.dashboard-kpi-blue .dashboard-kpi-icon {
    color: #3974ac;
}

.dashboard-kpi-green {
    --dashboard-kpi-accent: #43a878;
}

.dashboard-kpi-green .dashboard-kpi-icon {
    color: #208553;
}

.dashboard-kpi-cyan {
    --dashboard-kpi-accent: #339aa9;
}

.dashboard-kpi-cyan .dashboard-kpi-icon {
    color: #137d8d;
}

.dashboard-kpi-orange {
    --dashboard-kpi-accent: #d28439;
}

.dashboard-kpi-orange .dashboard-kpi-icon {
    color: #aa6421;
}

.dashboard-kpi-icon {
    background: #f3f5f8;
}

.list-page-heading {
    margin: 4px 2px 22px;
}

body.app-shell-active .list-page-heading {
    display: none;
}

.async-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.async-list-toolbar,
.async-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.async-list-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

.async-list-add {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #d5e5f2;
    border-radius: 9px;
    background: #edf6fc;
    color: #2877a8 !important;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
}

.async-list-add:hover {
    border-color: #b7d5e9;
    background: #e3f1fa;
    color: #205f88 !important;
}

.async-list-add:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.async-list-length,
.async-list-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #52647a;
    font-weight: 500;
}

.async-list-length .form-control {
    width: auto;
    min-width: 76px;
}

.async-list-search .form-control {
    width: min(280px, 52vw);
    min-height: 40px;
}

.async-list-responsive {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    background: #fff;
}

.async-list-table {
    min-width: 640px;
    margin: 0;
    color: #35485e;
}

.async-list-details-toggle {
    display: none;
}

.async-list-detail-row[hidden] {
    display: none !important;
}

.async-list-table thead th {
    position: relative;
    padding: 12px 14px;
    border: 0;
    background: #19233d;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.async-list-table thead th:first-child {
    border-radius: 9px 0 0;
}

.async-list-table thead th:last-child {
    border-radius: 0 9px 0 0;
}

.async-list-header.async-list-sortable {
    cursor: pointer;
}

.async-list-header.async-list-sortable:focus-visible {
    outline: 2px solid #54c9dd;
    outline-offset: -3px;
}

.async-list-table td {
    vertical-align: middle;
}

.async-list-table .async-list-id {
    width: 1%;
    color: #76869a;
    font-variant-numeric: tabular-nums;
}

.async-list-actions {
    display: grid;
    grid-template-columns: repeat(3, 36px);
    align-items: center;
    justify-content: center;
    justify-items: center;
}

.async-list-action {
    display: grid !important;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: #5367df !important;
    font-size: 18px;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: color .16s ease;
}

.async-list-action-icon {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    align-self: center;
    justify-self: center;
    overflow: visible;
}

.async-list-edit {
    color: #5367df !important;
}

.async-list-delete {
    color: #e34757 !important;
}

.async-list-action:hover,
.async-list-action:focus {
    background: transparent !important;
    filter: none;
    transform: none;
}

.async-list-action:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.async-list-status-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border: 1px solid #bfe7ce;
    border-radius: 999px;
    background: #effaf3;
    color: #187342;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.async-list-status-badge.is-inactive {
    border-color: #f0d4d7;
    background: #fff3f3;
    color: #a33440;
}

.async-list-action:focus-visible {
    border-radius: 4px;
    outline: 2px solid currentColor;
    outline-offset: -3px;
}

.async-list-action:disabled,
.async-list-action[aria-disabled="true"] {
    border: 0;
    background: transparent !important;
    color: #a7b0bd !important;
    cursor: not-allowed;
    opacity: 1;
}

.async-list-toggle {
    display: grid;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.async-list-toggle-track {
    position: relative;
    display: block;
    width: 36px;
    height: 23px;
    border-radius: 14px;
    background: #aeb8c5;
    transition: background-color .18s ease;
}

.async-list-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    transition: transform .18s ease;
}

.async-list-toggle.is-active .async-list-toggle-track {
    background: #34bd72;
}

.async-list-toggle.is-active .async-list-toggle-knob {
    transform: translateX(13px);
}

.async-list-toggle:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.async-list-status {
    min-height: 0;
    color: #53657b;
    font-size: 13px;
}

.async-list-status:not(:empty) {
    padding: 10px 12px;
    border-radius: 8px;
    background: #f0f4f8;
}

.async-list-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    color: #66778a;
    font-size: 13px;
}

.async-list-count {
    text-align: center;
}

.async-list-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.async-list-empty {
    padding: 26px !important;
    color: #76869a;
    text-align: center;
}

.dashboard-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

.dashboard-analysis-panel {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 20px;
    border: 1px solid #e4e9f0;
    border-top: 3px solid var(--dashboard-panel-accent);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(28, 48, 73, .10);
}

.dashboard-analysis-panel-channels {
    --dashboard-panel-accent: #8a70c5;
}

.dashboard-analysis-panel-content {
    --dashboard-panel-accent: #d77791;
}

.dashboard-analysis-heading {
    margin-bottom: 22px;
}

.dashboard-analysis-heading h3 {
    font-size: 15px;
}

.dashboard-analysis-heading > strong {
    color: #5a6e83;
    font-size: 12px;
}

.dashboard-content-track {
    display: flex;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 8px;
    background: #edf1f5;
}

.dashboard-channel-bars {
    display: grid;
    gap: 15px;
}

.dashboard-channel-bar-row {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.dashboard-channel-bar-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #66778a;
    font-size: 12px;
}

.dashboard-channel-bar-label b {
    color: #35485e;
}

.dashboard-channel-track {
    display: flex;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 8px;
    background: #edf1f5;
}

.dashboard-channel-track > span {
    display: block;
    flex: 0 0 auto;
    height: 100%;
    border-radius: inherit;
}

.dashboard-channel-bar-row-active .dashboard-channel-track {
    background: #e5f4ed;
}

.dashboard-channel-bar-row-active .dashboard-channel-track > span {
    background: #36ae7a;
}

.dashboard-channel-bar-row-inactive .dashboard-channel-track {
    background: #fbf0e2;
}

.dashboard-channel-bar-row-inactive .dashboard-channel-track > span {
    background: #e8a65a;
}

.dashboard-channel-bar-row-new .dashboard-channel-track {
    background: #e8f1fa;
}

.dashboard-channel-bar-row-new .dashboard-channel-track > span {
    background: #468ac6;
}

.dashboard-legend {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin-top: 17px;
    color: #66778a;
    font-size: 12px;
}

.dashboard-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dashboard-legend b {
    color: #35485e;
}

.dashboard-legend > span > i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dashboard-tool-group .card {
    border-top: 3px solid var(--dashboard-panel-accent);
    background: #fff;
    box-shadow: 0 7px 22px rgba(28, 48, 73, .10);
}

.dashboard-tool-group .card-header,
.dashboard-tool-group .card-body,
.dashboard-tool-group .card-footer {
    background-color: #fff !important;
}

.mobile-tuner-card-title {
    color: green;
    font-size: 20px;
    height: auto;
    text-transform: uppercase;
}

.dashboard-tool-group-1 form:nth-child(3n + 1) .card {
    --dashboard-panel-accent: #568fc7;
}

.dashboard-tool-group-1 form:nth-child(3n + 2) .card {
    --dashboard-panel-accent: #42a77a;
}

.dashboard-tool-group-1 form:nth-child(3n) .card {
    --dashboard-panel-accent: #339aa9;
}

.dashboard-tool-group-2 form:nth-child(3n + 1) .card {
    --dashboard-panel-accent: #8a70c5;
}

.dashboard-tool-group-2 form:nth-child(3n + 2) .card {
    --dashboard-panel-accent: #d77791;
}

.dashboard-tool-group-2 form:nth-child(3n) .card {
    --dashboard-panel-accent: #d18a3d;
}

.dashboard-tool-group-3 form:nth-child(3n + 1) .card {
    --dashboard-panel-accent: #b6a23c;
}

.dashboard-tool-group-3 form:nth-child(3n + 2) .card {
    --dashboard-panel-accent: #4a9b91;
}

.dashboard-tool-group-3 form:nth-child(3n) .card {
    --dashboard-panel-accent: #c56d52;
}

.dashboard-tool-group-4 form:nth-child(3n + 1) .card {
    --dashboard-panel-accent: #6075bb;
}

.dashboard-tool-group-4 form:nth-child(3n + 2) .card {
    --dashboard-panel-accent: #758b4b;
}

.dashboard-tool-group-4 form:nth-child(3n) .card {
    --dashboard-panel-accent: #bd7b39;
}

.dashboard-content-bars {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 15px;
}

.dashboard-content-bar-row > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    color: #66778a;
    font-size: 11px;
}

.dashboard-content-bar-row b {
    color: #35485e;
}

.dashboard-content-track {
    height: 7px;
}

.dashboard-content-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--app-primary, #2583c5);
}

.dashboard-content-bar-row:nth-child(4n + 1) .dashboard-content-track > span {
    background: #568fc7;
}

.dashboard-content-bar-row:nth-child(4n + 2) .dashboard-content-track > span {
    background: #42a77a;
}

.dashboard-content-bar-row:nth-child(4n + 3) .dashboard-content-track > span {
    background: #8a70c5;
}

.dashboard-content-bar-row:nth-child(4n) .dashboard-content-track > span {
    background: #d18a3d;
}

body.app-shell-active {
    font-size: clamp(14px, calc(13px + .18vw), 17px);
}

body.app-shell-active :where(
    p, li, label, td, th, small, legend, figcaption, a, span, strong, b, em,
    .btn, .form-control, input, select, textarea,
    .app-navigation-link, .app-sidebar-profile-identity,
    .app-user-menu-panel, .dashboard-eyebrow, .dashboard-date,
    .dashboard-kpi-label, .dashboard-kpi-detail, .dashboard-analysis-heading > strong,
    .dashboard-legend, .dashboard-content-bar-row > div:first-child
) {
    font-size: clamp(12px, calc(11px + .2vw), 15px) !important;
}

body.app-shell-active :is(h1, h2, h3, h4, h5, h6, .card-header) {
    font-family: var(--app-font-family);
    font-weight: 700;
}

body.app-shell-active h1 {
    font-size: clamp(28px, calc(23px + 1.4vw), 42px);
}

body.app-shell-active h2 {
    font-size: clamp(22px, calc(19px + 1vw), 32px);
}

body.app-shell-active h3 {
    font-size: clamp(18px, calc(17px + .35vw), 22px);
}

body.app-shell-active h4 {
    font-size: clamp(17px, calc(16px + .35vw), 22px);
}

body.app-shell-active h5 {
    font-size: clamp(16px, calc(15px + .25vw), 20px);
}

body.app-shell-active h6 {
    font-size: clamp(15px, calc(14px + .2vw), 18px);
}

body.app-shell-active .card-header {
    font-size: clamp(16px, calc(15px + .3vw), 22px);
}

body.app-shell-active :is(p, .dashboard-page-heading p) {
    font-weight: 300;
}

body.app-shell-active .dashboard-kpi > strong {
    font-size: clamp(25px, calc(22px + .85vw), 36px) !important;
}

.app-sidebar-brand-logo {
    max-width: min(100%, 220px);
}

@media (max-width: 900px) {
    .app-topbar {
        left: 0;
        padding-right: 24px;
        padding-left: 24px;
    }

    .app-sidebar-collapsed .app-topbar {
        left: 0;
    }

    .app-sidebar-collapsed .app-main {
        margin-left: 0;
    }

    .app-menu-toggle {
        position: static;
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .14);
        box-shadow: none;
        color: #fff;
        font-size: 16px;
    }

    .app-menu-toggle .fa {
        width: 18px;
        height: 18px;
        font-size: 16px;
    }

    .app-sidebar {
        z-index: 12100;
        inset-block-start: 0;
        transform: translateX(-100%);
    }

    .app-sidebar-brand {
        min-height: 60px;
    }

    .app-sidebar-brand-logo {
        max-width: min(100%, 200px);
        max-height: 48px;
    }

    .app-sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0;
        padding: 84px 20px 28px;
    }

    .app-footer {
        margin-right: -20px;
        margin-bottom: -28px;
        margin-left: -20px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-sidebar-backdrop {
        position: fixed;
        z-index: 12000;
        inset: 64px 0 0;
        border: 0;
        background: rgba(13, 23, 36, .44);
    }

    .app-sidebar-open .app-sidebar-backdrop {
        display: block;
    }
}

@media (min-width: 561px) and (max-width: 1024px) {
    .async-list-responsive {
        overflow-x: hidden;
    }

    .async-list-responsive .async-list-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .async-list-table thead th,
    .async-list-table tbody td {
        overflow-wrap: anywhere;
        padding: 10px 8px;
    }

    .async-list-table .async-list-mobile-secondary {
        display: none !important;
    }

    .async-list-table .async-list-mobile-primary {
        width: 55%;
    }

    .async-list-table .async-list-actions-header,
    .async-list-table .async-list-actions-cell {
        width: 45%;
        text-align: center;
    }

    .async-list-actions {
        grid-template-columns: repeat(3, 30px);
        gap: 0;
    }

    .async-list-table .async-list-actions-cell {
        padding-right: 1px;
        padding-left: 1px;
    }

    .async-list-action {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 18px;
    }

    .async-list-toggle {
        width: 30px;
        height: 30px;
    }

    .async-list-toggle-track {
        width: 30px;
    }

    .async-list-toggle.is-active .async-list-toggle-knob {
        transform: translateX(8px);
    }

    .async-list-details-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 30px;
        margin-top: 8px;
        padding: 4px 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        color: #435777;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
    }

    .async-list-details-toggle:hover,
    .async-list-details-toggle:focus {
        background: transparent !important;
        filter: none;
        transform: none;
    }

    .async-list-details-toggle:focus-visible {
        outline: 2px solid #5367df;
        outline-offset: 2px;
    }

    .async-list-table .async-list-detail-row > td {
        padding: 12px;
        border-top: 0;
        background: #f6f8fc;
        white-space: normal;
    }

    .async-list-details-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .async-list-detail-item {
        display: grid;
        min-width: 0;
        gap: 3px;
        padding: 9px 10px;
        border: 1px solid #e7ebf2;
        border-radius: 8px;
        background: #fff;
    }

    .async-list-detail-label {
        color: #77869a;
        font-size: 10px !important;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .async-list-detail-value {
        min-width: 0;
        overflow-wrap: anywhere;
        color: #35485e;
        font-size: 12px;
        line-height: 1.45;
    }
}

@media (max-width: 560px) {
    .app-topbar {
        left: 0;
        gap: 11px;
        height: 64px;
        padding: 0 12px;
    }

    .app-topbar-page {
        flex-basis: auto;
        flex-grow: 1;
    }

    .app-topbar-page-title {
        font-size: 14px;
    }

    .app-topbar-page-subtitle {
        font-size: 10px;
    }

    .app-sidebar {
        inset-block-start: 0;
        width: min(82vw, 280px);
    }

    .app-sidebar-backdrop {
        inset-block-start: 64px;
    }

    .app-account-name {
        display: none;
    }

    .app-brand-logo {
        max-width: min(42vw, 180px);
        max-height: 36px;
    }

    .app-user-menu-toggle {
        gap: 0;
        padding: 3px;
    }

    .app-user-menu-chevron {
        margin-left: 4px;
    }

    .app-main {
        padding: 80px 12px 20px;
    }

    .app-footer {
        min-height: 44px;
        margin-right: -12px;
        margin-bottom: -20px;
        margin-left: -12px;
        padding: 10px 12px;
        font-size: 10px;
    }

    .app-profile-modal {
        align-items: start;
        padding: 12px;
    }

    .app-profile-dialog {
        max-height: calc(100dvh - 24px);
        border-radius: 13px;
    }

    .app-profile-modal-header,
    .app-profile-form {
        padding: 16px;
    }

    .app-profile-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .app-profile-password-help,
    .app-profile-status,
    .app-profile-actions {
        grid-column: 1;
    }

    .async-list-toolbar {
        min-width: 0;
        flex-wrap: wrap;
    }

    .async-list-length {
        width: 100%;
        justify-content: space-between;
    }

    .async-list-toolbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .async-list-search {
        flex: 1;
        min-width: 0;
        justify-content: space-between;
    }

    .async-list-add {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 7px 10px;
    }

    .async-list-search .form-control {
        flex: 1;
        min-width: 0;
        width: auto;
    }

    .async-list-responsive {
        overflow-x: hidden;
    }

    .async-list-responsive .async-list-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .async-list-table thead th,
    .async-list-table tbody td {
        overflow-wrap: anywhere;
        padding: 10px 8px;
    }

    .async-list-table .async-list-mobile-secondary {
        display: none !important;
    }

    .async-list-table .async-list-mobile-primary {
        width: 55%;
    }

    .async-list-table .async-list-actions-header,
    .async-list-table .async-list-actions-cell {
        width: 45%;
        text-align: center;
    }

    .async-list-actions {
        grid-template-columns: repeat(3, 30px);
        gap: 0;
    }

    .async-list-table .async-list-actions-cell {
        padding-right: 1px;
        padding-left: 1px;
    }

    .async-list-action {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 18px;
    }

    .async-list-toggle {
        width: 30px;
        height: 30px;
    }

    .async-list-toggle-track {
        width: 30px;
    }

    .async-list-toggle.is-active .async-list-toggle-knob {
        transform: translateX(8px);
    }

    .async-list-details-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 30px;
        margin-top: 8px;
        padding: 4px 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        color: #435777;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
    }

    .async-list-details-toggle:hover,
    .async-list-details-toggle:focus {
        background: transparent !important;
        filter: none;
        transform: none;
    }

    .async-list-details-toggle:focus-visible {
        outline: 2px solid #5367df;
        outline-offset: 2px;
    }

    .async-list-table .async-list-detail-row > td {
        padding: 12px;
        border-top: 0;
        background: #f6f8fc;
        white-space: normal;
    }

    .async-list-details-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .async-list-detail-item {
        display: grid;
        min-width: 0;
        gap: 3px;
        padding: 9px 10px;
        border: 1px solid #e7ebf2;
        border-radius: 8px;
        background: #fff;
    }

    .async-list-detail-label {
        color: #77869a;
        font-size: 10px !important;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .async-list-detail-value {
        min-width: 0;
        color: #35485e;
        overflow-wrap: anywhere;
    }

    .async-list-detail-value img {
        max-width: 100%;
        height: auto;
    }

    .dashboard-page-heading {
        align-items: flex-start;
    }

    .dashboard-date {
        display: none;
    }

    .dashboard-kpi-grid {
        gap: 10px;
    }

    .admin-dashboard #dynamic_content > .container.text-center > .row,
    .admin-dashboard #dynamic_content > .container.text-center > .card-group,
    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout,
    .dashboard-analysis-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-mobile,
    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-multiple,
    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-websites,
    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-iframe-mobile,
    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-multiple-iframe-mobile,
    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-radio-mobile,
    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-radio-multiple,
    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-counter,
    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-ticker-overlay,
    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-title-current,
    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-title-continuous {
        grid-column: 1 !important;
        grid-row: auto;
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-iframe-mobile {
        order: 5;
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-multiple-iframe-mobile {
        order: 6;
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-mobile {
        order: 1;
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-radio-mobile {
        order: 2;
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-multiple {
        order: 3;
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-radio-multiple {
        order: 4;
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-tv-websites {
        order: 7;
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-ticker-overlay {
        order: 8;
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-counter {
        order: 9;
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-title-current {
        order: 10;
    }

    .admin-dashboard #dynamic_content > .container.dashboard-tuner-card-layout > .dashboard-tool-group > .dashboard-tuner-card-title-continuous {
        order: 11;
    }

    .admin-dashboard #dynamic_content > .container.text-center > .dashboard-tool-group > form:last-child:nth-child(odd) {
        grid-column: 1;
        width: 100% !important;
    }

    .dashboard-kpi {
        min-height: 132px;
        padding: 14px;
    }

    .dashboard-kpi-icon {
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
    }

    .dashboard-kpi > strong {
        font-size: 25px;
    }

    .dashboard-analysis-panel {
        padding: 16px;
    }

}

.system-update-page {
    width: min(100% - 32px, 760px);
    margin: 0 auto;
    padding: 26px 0 34px;
}

.system-update-card {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
}

.system-update-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--app-border);
    background: #fbfcfe;
}

.system-update-icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    background: #edf1ff;
    color: var(--app-primary);
    font-size: 19px;
}

.system-update-card-header h2 {
    margin: 0;
    color: #27374a;
    font-size: 17px;
    font-weight: 700;
}

.system-update-card-header p {
    margin: 4px 0 0;
    color: var(--app-muted);
    font-size: 13px;
}

.system-update-form {
    display: grid;
    gap: 20px;
    padding: 24px;
}

.system-update-file-field {
    display: grid;
    min-width: 0;
    gap: 9px;
    margin: 0;
    color: #35485e;
    font-size: 13px;
    font-weight: 700;
}

.system-update-file-field small {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 400;
}

.system-update-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.system-update-actions .btn {
    min-width: 128px;
    padding: 9px 16px;
}

.system-update-progress {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid #dce5ff;
    border-radius: 8px;
    background: #f5f7ff;
    color: #4155b8;
    font-size: 13px;
}

.system-update-progress[hidden] {
    display: none;
}

.system-update-progress-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.system-update-progress-icon {
    flex: 0 0 auto;
}

.system-update-progress-icon.is-spinning i {
    animation: system-update-spin .8s linear infinite;
}

.system-update-progress-title {
    flex: 1 1 auto;
    min-width: 0;
}

.system-update-progress-heading strong {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.system-update-progress-track {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #dce5ff;
}

.system-update-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5367df, #7484ef);
    transition: width .18s ease-out;
}

.system-update-progress-track.is-processing .system-update-progress-fill {
    width: 100% !important;
    background: linear-gradient(
        110deg,
        #5367df 20%,
        #91a0ff 38%,
        #5367df 56%
    );
    background-size: 200% 100%;
    animation: system-update-progress-flow 1.2s linear infinite;
}

.system-update-progress-track.is-complete .system-update-progress-fill {
    background: #198754;
    animation: none;
}

.system-update-progress-track.is-error .system-update-progress-fill {
    background: #dc3545;
    animation: none;
}

.system-update-progress-detail {
    margin: 0;
    color: var(--app-muted);
    line-height: 1.5;
}

@keyframes system-update-spin {
    to { transform: rotate(360deg); }
}

@keyframes system-update-progress-flow {
    to { background-position: -200% 0; }
}

.system-update-result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
}

.system-update-result .fa {
    margin-top: 2px;
}

.system-update-result[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .system-update-progress-icon.is-spinning i,
    .system-update-progress-track.is-processing .system-update-progress-fill {
        animation-duration: 3s;
    }

    .system-update-progress-fill {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .system-update-page {
        width: min(100% - 24px, 760px);
        padding-top: 18px;
    }

    .system-update-card-header,
    .system-update-form {
        padding: 17px;
    }

    .system-update-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .system-update-actions .btn {
        min-width: 0;
    }
}

body.app-shell-active .app-topbar-page-title {
    font-size: clamp(14px, 1.25vw, 18px) !important;
}

body.app-shell-active .dashboard-section-title {
    font-size: clamp(25px, 2.7vw, 34px) !important;
    font-weight: 800;
}

@media (max-width: 560px) {
    body.app-shell-active .app-topbar-page-title {
        font-size: 14px !important;
    }
}

body.app-shell-active.nowplaying-page .app-main > form.form.nowplaying-form {
    display: grid;
    box-sizing: border-box;
    width: min(100%, 960px) !important;
    max-width: 100%;
    gap: 0;
    margin: 0 auto 28px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
}

.nowplaying-form-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px clamp(20px, 3vw, 32px);
    border-bottom: 1px solid var(--app-border);
    background: linear-gradient(135deg, #fff, #f7f9ff);
}

.nowplaying-form-icon {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--app-primary) 11%, white);
    color: var(--app-primary);
    font-size: 21px;
}

.nowplaying-form-heading h3 {
    margin: 0;
    color: var(--app-text);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 750;
}

.nowplaying-form-heading p {
    margin: 5px 0 0;
    color: var(--app-muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
}

.nowplaying-form-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 26px clamp(20px, 3vw, 32px);
}

.nowplaying-field {
    display: grid;
    min-width: 0;
    gap: 8px;
    align-content: start;
}

.nowplaying-field > span:first-child {
    color: var(--app-text);
    font-size: 14px;
    font-weight: 650;
}

body.app-shell-active .app-main form.nowplaying-form .nowplaying-field :is(select, textarea) {
    width: 100%;
    margin: 0;
}

body.link-tester-page {
    overflow-x: hidden;
}

body.link-tester-page .app-main > .container.link-tester-container {
    box-sizing: border-box;
    width: min(100% - 40px, 1480px);
    max-width: 1480px;
    margin: 26px auto 36px;
    padding: 0;
}

.link-tester-card {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
}

.link-tester-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px clamp(20px, 3vw, 36px);
    border-bottom: 1px solid var(--app-border);
    background: linear-gradient(135deg, #fff, #f7f9ff);
}

.link-tester-eyebrow {
    display: inline-block;
    color: var(--app-primary);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.link-tester-heading h1 {
    margin: 7px 0 0;
    color: var(--app-text);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    text-transform: uppercase;
}

.link-tester-heading p {
    margin: 7px 0 0;
    color: var(--app-muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
}

.link-tester-channel-tag {
    max-width: 35%;
    padding: 9px 14px;
    border: 1px solid #dfe5ff;
    border-radius: 999px;
    background: #f2f4ff;
    color: #4355bb;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.link-tester-main {
    background: #f6f8fc;
}

.link-tester-content {
    padding: clamp(16px, 2.5vw, 30px);
}

.link-tester-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
    align-items: start;
    gap: 22px;
}

.link-tester-preview-panel {
    display: flex;
    min-width: 0;
    min-height: 560px;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    background: #17213c;
    box-shadow: 0 14px 34px rgba(23, 33, 60, .16);
}

.link-tester-panel-label {
    color: #d5def6;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.link-tester-preview-stage {
    display: grid;
    min-width: 0;
    min-height: 0;
    flex: 0 0 auto;
    place-items: center;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: radial-gradient(ellipse at top, #25345a, #10182d 72%);
}

.link-tester-unavailable {
    margin: 0;
    padding: 24px;
    color: #fff;
    font-size: 15px;
    text-align: center;
}

.link-tester-preview-stage iframe {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    border: 0;
    background: transparent;
}

.link-tester-preview-stage iframe.link-tester-live-preview {
    width: min(100%, 560px);
    height: auto;
    min-height: 0;
    align-self: center;
}

.link-tester-details {
    display: grid;
    min-width: 0;
    gap: 18px;
}

.link-tester-embed-card {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(27, 39, 73, .06);
}

.link-tester-embed-heading {
    padding: 18px 20px;
    border-bottom: 1px solid var(--app-border);
    background: #fbfcff;
}

.link-tester-embed-heading h2 {
    margin: 5px 0 0;
    color: var(--app-text);
    font-size: 17px;
    font-weight: 750;
}

.link-tester-code-block {
    display: grid;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--app-border);
}

.link-tester-code-block:last-child {
    border-bottom: 0;
}

.link-tester-code-block label {
    margin: 0;
    color: #35485e;
    font-size: 13px;
    font-weight: 700;
}

.link-tester-code-block textarea {
    width: 100%;
    min-height: 96px;
    margin: 0;
    padding: 12px;
    border: 1px solid #dce2ed;
    border-radius: 10px;
    background: #f7f9fc;
    color: #27374a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.55;
    resize: vertical;
}

.link-tester-copy {
    justify-self: start;
    min-width: 140px;
    border-radius: 9px;
}

.link-tester-copy-status {
    min-height: 18px;
    color: #187447;
    font-size: 12px;
}

.link-tester-channel-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(27, 39, 73, .06);
}

.link-tester-channel-card img {
    display: block;
    width: 96px;
    height: 76px;
    border-radius: 10px;
    object-fit: cover;
    background: #edf0f6;
}

.link-tester-channel-card h2 {
    margin: 0;
    color: var(--app-text);
    font-size: 16px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

@media (max-width: 960px) {
    .link-tester-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .link-tester-preview-panel {
        min-height: 460px;
    }
}

@media (max-width: 600px) {
    body.link-tester-page .app-main > .container.link-tester-container {
        width: min(100% - 24px, 1480px);
        margin-top: 16px;
    }

    .link-tester-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 20px;
    }

    .link-tester-channel-tag {
        max-width: 100%;
    }

    .link-tester-content {
        padding: 12px;
    }

    .link-tester-preview-panel {
        min-height: 360px;
        padding: 12px;
    }

    .link-tester-preview-stage iframe.link-tester-live-preview {
        height: auto;
        min-height: 0;
    }

    .link-tester-embed-heading,
    .link-tester-code-block {
        padding: 16px;
    }
}

body.app-shell-active .app-main form.nowplaying-form textarea {
    min-height: 132px;
    resize: vertical;
}

.nowplaying-message-field {
    grid-column: 1 / -1;
}

.nowplaying-field-hint {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 400;
}

.nowplaying-success {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px clamp(20px, 3vw, 32px) 0;
    padding: 13px 15px;
    border: 1px solid #b7e4c7;
    border-radius: 10px;
    background: #effaf3;
    color: #176b3a;
    font-weight: 600;
}

.nowplaying-form-actions {
    display: flex;
    justify-content: flex-end;
    padding: 18px clamp(20px, 3vw, 32px) 24px;
    border-top: 1px solid var(--app-border);
    background: #fbfcfe;
}

.nowplaying-form-actions .btn {
    display: inline-flex;
    min-width: 220px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
}

@media (max-width: 640px) {
    .nowplaying-form-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .nowplaying-form-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .nowplaying-form-fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding-top: 21px;
        padding-bottom: 21px;
    }

    .nowplaying-message-field {
        grid-column: auto;
    }

    .nowplaying-form-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

body.app-shell-active.pagina-editor-page .app-main > .pagina-editor {
    box-sizing: border-box;
    width: min(100%, 1160px);
    max-width: 100%;
    margin: 0 auto;
}

body.app-shell-active.pagina-editor-page .app-main > .pagina-editor > form.pagina-form {
    display: grid;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    gap: 16px;
    margin: 0 auto 28px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.pagina-form > .row[style*="background-color"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    box-sizing: border-box;
    margin: 0;
    padding: clamp(18px, 2.5vw, 28px);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-panel) !important;
    box-shadow: var(--app-shadow);
}

.pagina-form > .row[style*="background-color"] > [class*="col-"] {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0;
}

.pagina-form > .row[style*="background-color"] > .col-md-12:first-child {
    grid-column: 1 / -1;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--app-border);
}

.pagina-form > .row[style*="background-color"] > .col-md-12:first-child span {
    color: var(--app-text) !important;
    font-family: var(--app-font-family) !important;
    font-size: 19px !important;
    line-height: 1.4;
}

.pagina-form > .row[style*="background-color"] > .col-md-12:first-child span + br + span {
    color: var(--app-muted) !important;
    font-size: 12px !important;
    font-weight: 400;
}

.pagina-form > .row[style*="background-color"] :is(input:not([type="hidden"]), select, textarea) {
    width: 100%;
    margin: 0 0 10px;
}

.pagina-form > .row[style*="background-color"] :is(input:not([type="hidden"]), select, textarea):last-child {
    margin-bottom: 0;
}

.pagina-form > .row[style*="background-color"] textarea {
    min-height: 96px;
    resize: vertical;
}

.pagina-form > .row[style*="background-color"] .col-md-12:has(input[type="hidden"]) {
    display: none;
}

.pagina-form > .row[style*="background-color"] .col-md-12[style*="text-align:center"] {
    grid-column: 1 / -1;
}

.pagina-form > .row:not([style*="background-color"]):not(:has(input[type="submit"])) {
    display: none;
}

.pagina-form > .row:has(input[type="submit"]) {
    display: block;
    margin: 0;
    padding: 4px 0;
}

.pagina-form > .row:has(input[type="submit"]) > .col-md-12 {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0;
    text-align: right;
}

.pagina-form > .row input[type="submit"] {
    width: min(100%, 320px) !important;
    min-height: 50px;
    font-size: 16px !important;
}

@media (max-width: 640px) {
    body.app-shell-active.pagina-editor-page .app-main > .pagina-editor > form.pagina-form {
        gap: 13px;
    }

    .pagina-form > .row[style*="background-color"] {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 18px;
        border-radius: 13px;
    }

    .pagina-form > .row[style*="background-color"] > .col-md-12:first-child {
        grid-column: auto;
    }

    .pagina-form > .row[style*="background-color"] .col-md-12:has(input[type="hidden"]),
    .pagina-form > .row[style*="background-color"] .col-md-12[style*="text-align:center"] {
        grid-column: auto;
    }

    .pagina-form > .row:has(input[type="submit"]) > .col-md-12 {
        text-align: left;
    }

    .pagina-form > .row input[type="submit"] {
        width: 100% !important;
    }
}