.padding-0 {
    padding: 0!important;
}
.padding-5 {
    padding: 5px!important;
}
.padding-10 {
    padding: 10px!important;
}
.padding-x-5 {
    padding-left: 5px!important;
    padding-right: 5px!important;
}
.px-10 {
    padding-left: 10px!important;
    padding-right: 10px!important;
}
.margin-0 {
    margin: 0!important;
}
.margin-right-5 {
    margin-right: 5px;
}

.br-25 {
    border-radius: 25px;
}

.show-pass-icon {
    position: absolute;
    top: 5px;
    right: 5px;
}

.h-90 {
    height: 90%!important;
}
.h-95 {
    height: 95%!important;
}

.basic-link {
    margin-top: 65px;
}
.dashboard-active-card {
    height: 87%!important;
}

.dashboard-upgrade {
    justify-content: space-evenly;
    align-items: center;
    height: 90%;
}

.input-group .input-group-text {
    padding: 0 10px 0 0 !important;
}

.page-buttons {
    display: flex;
    justify-content: space-between;
}

.profile-phone .phone {
    width: 100%;
}
.plan {
    display: flex;
    flex-direction: column;
    background-color: #fafafa;
    cursor: pointer;
}
.pro-pill {
    font-size: 12px;
    padding: 0 10px;
    background-color: orange;
    /*border-radius: 25px!important;*/
    color: white!important;
}
.enterprise-pill {
    font-size: 12px;
    padding: 0 10px;
    background-color: limegreen;
    /*border-radius: 25px!important;*/
    color: white!important;
}

.current-plan {
    border: 1px solid grey;
    border-radius: 4px;
}
.current-plan-admin {
    border: 1px solid grey;
    border-radius: 4px;
    background-color: orange;
}

.plan-active {
    border: 2px solid blue;
    border-radius: 6px;
}

.wizard-iframe {
    border-radius: 10px;
    width: 530px;
    height: 300px;
}

.wizard-dropdown .multiselect-dropdown {
    z-index: unset!important;
}

.screen-change-dropdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 15px 7px 5px!important;
    text-transform: unset;
    font-size: 15px;
}

.screen-change-dropdown:after {
    font-size: 25px;
}

.playlist-dropdown .dropdown-item:hover {
    background-color: #f08f00!important;
}

.btn {
    padding: 12px 20px;
}
.btn-dark {
    background-color: black;
}

.billing-tooltip {
    padding: 5px!important;
    margin: 1em 3px 1em 0;
    float: left;
    color: white!important;
}
.csv-tooltip {
    padding: 5px 0 5px 5px!important;
    margin: 8px 0 10px 0;
    float: left;
    color: white!important;
}

.background-white {
    background: white!important;
}
.hidden {
    display: none;
}
/*.overlay {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    background: rgb(0, 0, 0);*/
/*    background: rgba(0, 0, 0, 0.5); !* Black see-through *!*/
/*    color: #f1f1f1;*/
/*    width: 100%;*/
/*    transition: .5s ease;*/
/*    opacity:0;*/
/*    font-size: 20px;*/
/*    padding: 20px 10px;*/
/*    text-align: center;*/
/*    z-index: 100;*/
/*}*/


.overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.4); /* Slight dark overlay */
    color: #f1f1f1;
    opacity: 0;
    padding: 20px 10px;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.card:hover .overlay {
    opacity: 1;
}

.overlay-icons {
    margin-left: 10px;
}

.zoom-icon i,
.trash-icon i {
    transition: transform 0.2s ease;
}

.zoom-icon:hover i,
.trash-icon:hover i {
    transform: scale(1.2);
}


.total-row-2 {
    text-align: center;
    font-weight: bold;
    font-size: 37px!important;
}

/* HIDE RADIO */
.channels-orientation [type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* IMAGE STYLES */
.channels-orientation [type=radio] + img {
    cursor: pointer;
}

/* CHECKED STYLES */
.channels-orientation [type=radio]:checked + img {
    outline: 2px solid #f00;
}

.channel-name input,
.channel-name input::placeholder {
    font-size: 20px;
}

.select-layout-part {
    border: 1px solid grey;
    border-radius: 5px;
    width: 50%;
    text-align: center;
    font-size: 17px;
    background-image: unset!important;
}

.select-layout-part:hover {
    border: 2px solid grey;
}

.zone.active {
    background-color: grey;
}

.card-container {
    margin: 10px 0;
    padding: 0;
    width: 100%;
}

.card {
    margin-bottom: 20px;
    border-radius: 12px;
}

.card [class*="card-header-"] .card-icon, .card [class*="card-header-"] .card-text {
    float: right;
    margin-right: unset;
    padding: 10px;
}

.card-stats .card-header.card-header-icon, .card-stats .card-header.card-header-text {
    text-align: left;
}

.card-stats .card-header.card-header-icon i {
    font-size: 24px;
    line-height: 33px;
    width: 33px;
    height: 33px;
}

.card-header-gray {
    background-color: rgb(128, 128, 128) !important;
    color: white!important;
    padding: 15px!important;
}

.billing-toggle {
    margin-top: 10px;
}

.trash-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20%;
    right: 5%;
}

.crop-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20%;
    right: 35%;
}


.delete-icon {
    position: absolute;
    top: 5%;
    left: 5%;
}
.add-to-playlist-icon {
    position: absolute;
    top: 5%;
    right: 5%;
}
.zoom-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20%;
    right: 62%;
}
.zoom-icon.content-image {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.play-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 35%;
    right: 50%;
    cursor:pointer;
    color: #e2e2e2!important;
}

a.trash-icon, a.trash-icon:hover {
    color: #ffffff;
}

.no-background {
    background: unset!important;
    border: unset!important;
    box-shadow: unset!important;
}
.embed iframe {
    width: 100%;
    height: 100%;
}

.flex {
    display: flex;
}
.center-contents {
    display: flex;
    justify-content: center;
    align-items: center;
    height: inherit;
}
.total-active {
    text-align: center;
    font-weight: bold;
    font-size: 13.5vw;
    line-height: 1;
    margin-bottom: 0;
    padding: 10px 0;
}
.dash-active-screens {
    overflow-y: auto;
    height: 16vw;
}
.dash-video {
    height: 26vw;
}

.folder-hover {
    background-color: #f0f0f0;
    border: 2px solid #007bff; /* Optional highlight border */
}
.folder-card:hover {
    background-color: lightgray!important;
}

.folder-name {
    display: flex;
    align-items: center;
}

.folder-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* Adjust based on how much space you want to give the folder name */
    display: inline-block;
}

@media only screen and (max-width: 520px) {
    .dash-active-screens, .dash-video {
        height: 32vw;
    }
}
.content-image {
    position: relative;
    float: left;
    width:  100%;
    height: 180px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

.content-image-app {
    position: relative;
    float: left;
    width:  100%;
    height: 120px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

.content-image-app-generic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    float: none;
    background: #eef2f7;
    padding: 8px;
    text-align: center;
    box-sizing: border-box;
}

.content-image-app-generic .material-icons {
    font-size: 40px;
    color: #94a3b8;
}

.content-image-app-generic .playlists-app {
    margin: 6px 0 0;
    padding: 0 6px;
    font-size: .74rem;
    color: #64748b;
    line-height: 1.3;
    word-break: break-all;
}

[type="submit"] {
    -webkit-appearance: none!important;
}

[type="file"] {
    height: 0;
    overflow: hidden;
    width: 0;
}
/*[type="file"] + label {*/
/*    background: #f15d22;*/
/*    border: none;*/
/*    color: #fff;*/
/*    cursor: pointer;*/
/*    display: inline-block;*/
/*    font-family: 'Poppins', sans-serif;*/
/*    font-size: inherit;*/
/*    font-weight: 600;*/
/*    outline: none;*/
/*    padding: 1rem 50px;*/
/*    position: relative;*/
/*    transition: all 0.3s;*/
/*    vertical-align: middle;*/
/*}*/
.is-filled {
    padding-bottom: 0!important;
}

.modal-content .is-filled {
    padding-bottom: 10px!important;
}

.add-screen-data {
    padding: 10px 0!important;
}

.floating-help {
    bottom: 0.7rem;
    left: 1.5rem;
    z-index: 1050;
    transition: all 0.3s ease;
}
.floating-help:hover {
    transform: scale(1.05);
    background-color: #198754 !important; /* Bootstrap green-500 shade */
}

/*.btn-2 {*/
/*    background-color: #99c793;*/
/*    border-radius: 50px;*/
/*    overflow: hidden;*/
/*}*/

/*.btn-2:hover {*/
/*    background-color: green;*/
/*}*/

.btn-link:hover {
    text-decoration: none;
}

/* Questions Module */

.countdown {
    position: relative;
    margin: 20px;
    height: 70px;
    width: 70px;
    text-align: center;
    float: right;
}

.countdown-number {
    color: grey;
    display: inline-block;
    line-height: 40px;
    z-index: 10000;
    position: relative;
    font-size: 35px;
    margin: 9px 10px 0 18px;
}

.countdown svg {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    transform: rotateY(-180deg) rotateZ(-90deg);
}

.countdown svg circle {
    stroke-dasharray: 200px;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 2px;
    stroke: grey;
    fill: transparent;
    animation: countdown 10s linear forwards;
}

.blue {
    color: #13acd9;
}

.amazon-img {
    background-repeat: no-repeat;
    background-size: 350px 350px;
    background-position: right -50px top 0;
}

@keyframes countdown {
    from {
        stroke-dashoffset: 0px;
    }
    to {
        stroke-dashoffset: 200px;
    }
}

.remaining {
    position: relative;
    font-size: 55px;
    text-align: center;
}

.question-icons {
    padding:20px 80px 50px 80px;
    align-items: center;
    justify-content: center;
}
.question-icons img {
    padding: 15px;
}
.card-questions {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
}

.question-preview, .question-logo {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.question-logo {
    /*height: 46px;*/
    /*width: 250px;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.question-logo img {
    height: 55px;
}

.question-title {
    padding: 45px 0;
}

.question-title h1 {
    font-size: 60px;
}
.links-title {
    font-size: 1rem;
    font-weight: 500;
    padding:10px;
    margin-top: 20px;
}
.question-answer.advert {
    width: 30%;
}
.advert-response {
    font-size: 5rem;
}
.content-advert {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.opacity-0 {
    opacity: 0;
}

.normal-rotation {
    max-width: 100vw!important;
    max-height: 100vh;
}
.rotated {
    max-width: 100vh!important;
    max-height: 100vw;
}
.rotated-dimensions {
    width: 100vh;
    height: 100vw;
}
.watermark {
    background-color: black;
    color: white;
    opacity: 40%;
    position: fixed;
    bottom: 0;
    margin-left: 10px;
    padding: 0 5px;
}

.transform-0deg {
    transform:translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%)) rotate(0deg);
}

.transform-90deg {
    transform:translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%)) rotate(90deg);
    -webkit-transform:translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%)) rotate(90deg);
    -moz-transform:translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%)) rotate(90deg);
}

.transform-180deg {
    transform:translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%)) rotate(180deg);
    -webkit-transform:translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%)) rotate(180deg);
    -moz-transform:translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%)) rotate(180deg);
}

.transform-270deg {
    transform:translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%)) rotate(270deg);
    -webkit-transform:translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%)) rotate(270deg);
    -moz-transform:translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%)) rotate(270deg);
}

.edit-duration {
    font-size: 16px;
    padding: 6px 15px 4px 15px;
    border: 1px solid lightgrey;
}
.align-center {
    margin: auto;
    position: absolute;
    width: 100%;
    top: 0; left: 0; bottom: 0; right: 0;
}
.impression-result {
    text-align: center;
    height: 64px;
    border-bottom: 1px solid darkgrey;
    margin-left: -15px;padding-top: 20px;
    margin-right: -1px;
}

.playlist-content-block:hover {
    cursor: pointer;
}
.playlist-apps {
    text-align: center;
    padding: 0;
    font-size: 13px;
    line-height: 1.1rem;
}

.sidebar .logo {
    padding: 10px 0;
}

.sidebar .sidebar-wrapper {
    height: calc(100vh - 100px);
}
.sidebar .nav {
    margin-top: 10px;
}
.sidebar .nav i {
    margin-right: 5px;
}
.sidebar .nav li a, .sidebar .nav li .dropdown-menu a {
    margin: 3px 15px 0;
    padding: 8px 5px;
}
.sidebar .link-video {
    width: 80%;
    margin-right: 0!important;
    border-radius: 3px 0 0 3px!important;
}
.nav-link-icon {
    width: 20%;
    margin-left: 0!important;
    border-radius: 0 3px 3px 0!important;
}

.nav-link-icon i {
    position: absolute;
    right: 0;
    font-size: 17px!important;
}

.icon {
    color: #bd2d5c;
    min-width: 50px;
    text-align: center;
}

.red-youtube-icon {
    background: url("../../assets/icons/youtube-grey.png") no-repeat center;
    background-size: contain;
    width: 13px;
    height: 13px;
}
.red-youtube-icon:hover {
    background: url("../../assets/icons/youtube-red.png") no-repeat center;
    background-size: contain;
    width: 13px;
    height: 13px;
}

.sidebar .nav li.active>a {
    color:white!important;
}

.sidebar .nav li.active>[data-toggle="collapse"] {
    background-color: #ff9800;
}
/* Tabs */
.tab-content {
    padding:25px;
    width: 100%;
}
.material-icons.sub-nav {
    margin-left: 25px;
}

#material-tabs {
    position: relative;
    display: block;
    padding:0;
    border-bottom: 1px solid #e0e0e0;
}

#material-tabs>a {
    position: relative;
    display:inline-block;
    text-decoration: none;
    padding: 15px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    color: #424f5a;
    text-align: center;
}

#material-tabs>a.active {
    font-weight: 700;
    outline:none;
}

#material-tabs>a:not(.active):hover {
    background-color: inherit;
    color: #7c848a;
}
.notifications {
    margin-top: 70px;
}
.search-content {
    color: white;
}
.search-content::placeholder {
    color: white;
}
.search-users-input {
    height: unset;
}
.search-users-input::placeholder {
    color: #495057;
}
.screens-list-view {
    width: 60%;
}
.text-red {
    color: red;
}

.text-green {
    color: green;
}

.text-orange {
    color: orange!important;
}

.text-blue {
    color: blue;
}

.m-1em {
    margin: 1em 0;
}
.mt-1em {
    margin-top: 1em;
}

.form-group .bmd-label-static {
    top: -15px;
}
.page-action {
    float: right;
}
.playlist-checkbox {
    top: 0!important;
}
.refresh-screen-form {
    margin-bottom: 0;
}
@media only screen and (max-width: 520px) {
    .nav-tabs#material-tabs>li>a {
        font-size: 11px;
    }
    .whitelabel-users-container {
        padding: 0!important;
    }
    .whitelabel-users-container th {
        font-size: 14px!important;
        padding: 10px 3px!important;
    }
    .whitelabel-users-container td {
        padding: 10px 2px!important;
        font-size: 12px;
    }
    .dash-active-screens, .dash-video {
        height: 52vw;
    }
}

.yellow-bar {
    position: absolute;
    z-index: 10;
    bottom: 0;
    height: 3px;
    background: #458CFF;
    display: block;
    left: 0;
    transition: left .2s ease;
    -webkit-transition: left .2s ease;
}

#tab1-tab.active ~ span.yellow-bar {
    left: 0;
    width: 120px;
}

#tab2-tab.active ~ span.yellow-bar {
    left:125px;
    width: 70px;
}

#tab3-tab.active ~ span.yellow-bar {
    left: 0;
    width: 90px;
}

#tab4-tab.active ~ span.yellow-bar {
    left:90px;
    width: 90px;
}
#tab5-tab.active ~ span.yellow-bar {
    left:180px;
    width: 105px;
}
#tab6-tab.active ~ span.yellow-bar {
    left:294px;
    width: 60px;
}

/* zooming content image */
#myModal {
    background-color: black;
    padding-top: 30px;
}
.modal-content-img {
    margin: auto;
    display: block;
    /*height: 90vh;*/
    width: unset;
    max-width: 100%;
}
.modal-content-img {
    box-shadow: 0 5px 15px
    rgba(0, 0, 0, 0.5);
}
.modal-content-img {
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    outline: 0;
}
/* Spinner */
.spinner {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: 0 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid grey;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
.screen-management:hover {
    cursor: pointer;
}
.playlist-info-row:hover {
    cursor: pointer;
}
.active-screen {
    color: green!important;
}
.inactive-screen {
    color: red!important;
}
.validate-existing-code:hover, .validate-existing-code:focus,
.existing-screen-code:hover, .existing-screen-code:focus
{
    border: dodgerblue 2px solid!important;
    outline: 0;
}

.ul-tags {
    list-style:none;
    padding: 0;
    margin: 0;
}
.li-tags {
    background-color: #f1f1f1;
    border-color: #f1f1f1;
    color: #676767;
    border-radius: 3px;
    padding: 2px 2px 2px 8px;
    margin: 5px 6px 6px 0;
    float: left;
    max-width: 100%;
}
.li-tags .delete-tag {
    font-size: 20px;
}
.li-tags .delete-tag:hover {
    cursor: pointer;
}
.tag-button:hover {
    cursor: auto!important;
}

/* Highcharts */
.highcharts-figure, .highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

/* Wizard */
.multisteps-form {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    margin: 2.75rem auto;
}
.multisteps-form.show {
    display: block;
}
.multisteps-form-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;
}
.modal-backdrop.fade {
    opacity: 0;
}
.modal-backdrop.show {
    opacity: 0.26;
}

.multisteps-form__progress {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.multisteps-form__progress-btn {
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    transition-delay: 0s;
    position: relative;
    padding-top: 20px;
    color: hsla(0,0%,100%,.4);
    text-indent: -9999px;
    border: none;
    background-color: transparent;
    outline: none !important;
    cursor: pointer;
}
@media (min-width: 500px) {
    .multisteps-form__progress-btn {
        text-indent: 0;
    }
}
.multisteps-form__progress-btn:before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 13px;
    height: 13px;
    content: '';
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
    transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
    transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
    border: 2px solid currentColor;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 3;
}
.multisteps-form__progress-btn:after {
    position: absolute;
    top: 5px;
    left: calc(-50% - 13px / 2);
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    transition-delay: 0s;
    display: block;
    width: 100%;
    height: 2px;
    content: '';
    background-color: currentColor;
    z-index: 1;
}
.multisteps-form__progress-btn:first-child:after {
    display: none;
}
.multisteps-form__progress-btn.js-active {
    color: white;
}
.multisteps-form__progress-btn.js-active:before {
    -webkit-transform: translateX(-50%) scale(1.2);
    transform: translateX(-50%) scale(1.2);
    background-color: currentColor;
}
.multisteps-form__form {
    margin: 1rem!important;
    position: relative;
}
.multisteps-form__panel {
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    visibility: hidden;
}
.multisteps-form__panel.js-active {
    /*height: auto;*/
    opacity: 1;
    visibility: visible;
}

.multisteps-form__panel[data-animation="scaleIn"] {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
.multisteps-form__panel[data-animation="scaleIn"].js-active {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    -webkit-transform: scale(1);
    transform: scale(1);
}


@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 }
    to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
    from{ bottom:-100px; opacity:0 }
    to{ bottom:0; opacity:1 }
}

/* ticker */

/*body {*/
/*    padding-bottom: 5rem;*/
/*}*/
/*h1, h2, p {*/
/*    padding: 0 5%;*/
/*}*/


@media screen and (max-width: 1365px) {
    .billing-toggle {
        margin-top: unset;
    }
}

@media (max-width: 1200px) {
    .question-icons {
        padding: 5px;
    }
    .question-icons img {
        padding: 10px;
    }
}

@media (max-width: 1024px) {
    .question-preview h2 {
        font-size: 16px;
    }
    .url-preview h3 {
        font-size: 16px;
    }
    .question-icons {
        padding: 5px;
    }
    .add-question-padding {
        padding-top: 50px!important;
    }
    .page-action {
        float: unset;
    }
}
@media (max-width: 991px) {
    .container-fluid {
        padding: 0 10px;
    }
    .logo {
        display: none!important;
    }
    .plan-image {
        display: none;
    }
    .question-logo img {
        height: 20px;
    }
    .android-link {
        word-break: break-all;
    }
    .card-questions {
        height: unset;
    }
    .main-panel>.content {
        margin-top: 75px;
    }
    .basic-link {
        margin-top: 150px;
    }
    .wizard-iframe {
        width: 352px;
        height: 200px;
    }
    .amazon-img {
        background-size: 200px;
    }
}
@media (max-width: 767px) {
    .billing-toggle {
        margin-top: 10px;
    }
    .page-buttons {
        display: block;
        justify-content: start;
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 800px;
    }
}

@media (min-width: 768px) {
    .col-md-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 992px) {
    .logo-mobile {
        display: none;
    }
    .trial-ends {
        display: none!important;
    }
    .whitelabel-badge {
        font-size: 100%;
    }
}
@media (min-width: 1140px) {
    .col-1140 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-5-row {
        flex: 0 0 20%; /* Each column takes 20% width, i.e., 1/5th of the row */
        max-width: 20%;
    }
}
@media screen and (max-width: 567px) {
    .billing-toggle {
        margin-top: unset;
    }
}
@media (max-width: 453px) {
    .yellow-bar {
        display: none;
    }
    .mobile-padding-2 {
        padding: 30px 2px 2px 2px!important
    }
    .mobile-padding-0 {
        padding: 0!important;
    }
    .overlay {
        opacity: 1;
    }
    .group label > span {
        width: unset!important;
        text-align: unset!important;
        margin-right: unset!important;
    }
}
@media (max-width: 375px) {
    #material-tabs a {
        font-size: 12px;
        padding: 10px;
    }
    #tab3-tab.active ~ span.yellow-bar {
        left: 0;
        width: 80px;
    }

    #tab4-tab.active ~ span.yellow-bar {
        left:80px;
        width: 70px;
    }
    #tab5-tab.active ~ span.yellow-bar {
        left:150px;
        width: 90px;
    }
    .question-icons img {
        padding: 10px;
    }
    .question-title h1 {
        font-size: 30px;
    }
    .advert-response {
        font-size: 2rem;
    }
}
@media (max-width: 360px) {
    #material-tabs a {
        font-size: 10px;
    }
    #tab3-tab.active ~ span.yellow-bar {
        left: 0;
        width: 70px;
    }

    #tab4-tab.active ~ span.yellow-bar {
        left:70px;
        width: 65px;
    }
    #tab5-tab.active ~ span.yellow-bar {
        left:135px;
        width: 80px;
    }
}

@media (max-height: 440px) {
    .question-title {
        padding: 0;
    }
    .question-icons {
        padding: 0;
    }
    .question-answer.advert {
        width: 20%;
    }
    .question-title h1 {
        font-size: 40px;
    }
    .advert-response {
        font-size: 2rem;
    }

}

#previewArea {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.preview-thumb {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 4px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.preview-media {
    max-height: 100px;
    max-width: 160px;
    border-radius: 4px;
    display: block;
}

.remove-btn {
    position: absolute;
    top: 2px;
    right: 6px;
    cursor: pointer;
    color: #d33;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    background: #fff;
    border-radius: 50%;
    padding: 0 6px;
    z-index: 10;
    pointer-events: auto;
}
#uploadGuidelines {
    transition: transform 0.2s, color 0.2s;
    cursor: pointer;
}

#uploadGuidelines:hover {
    transform: scale(1.2);
}

.section-title {
    font-size: 1.21em;
    font-weight: 700;
    /*color: #23426e;*/
    margin-bottom: 1.1em;
    letter-spacing: 0.03em;
}

/* KPI Cards */
.kpi-card {
    background: #fff;
    border-radius: 18px;
    padding: 1.1em 1.3em;
    min-height: 98px;
    transition: box-shadow 0.18s, transform 0.18s;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 6px rgba(90,40,120,0.05);
}
.kpi-card:hover {
    box-shadow: 0 6px 26px rgba(90,40,120,0.13);
    transform: translateY(-3px) scale(1.03);
}
.kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    font-size: 1.6em;
    box-shadow: 0 2px 10px rgba(80,60,130,0.10);
    background: #e3eafc;
}
.kpi-label {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 0.35em;
    letter-spacing: 0.01em;
    opacity: 0.87;
}
.kpi-value {
    font-size: 2.1em;
    font-weight: bold;
    line-height: 1.08;
    color: #222;
    letter-spacing: -0.01em;
}

/* Glass Chart Section */
.dashboard-chart-glass {
    background: rgba(255,255,255,0.97);
    border-radius: 12px;
    box-shadow: 0 6px 32px rgba(35,66,110,0.06), 0 1.5px 7px rgba(80,60,130,0.05);
    position: relative;
    margin-bottom: 1.1em;
    padding: 2.3rem 2.2rem 2.1rem 2.2rem;
    transition: box-shadow .18s;
}
.dashboard-chart-glass:hover {
    box-shadow: 0 8px 42px rgba(33,150,243,0.15), 0 3px 15px rgba(80,60,130,0.10);
}
.dashboard-chart-label {
    font-size: 0.98em;
    font-weight: 700;
    color: #23426e;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.1em;
    opacity: 0.82;
}
.dashboard-chart-sub {
    font-size: 0.94em;
    color: #787878;
    font-weight: 500;
    opacity: 0.82;
}
.dashboard-chart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e3eafc 60%, #d1e3fa 100%);
    color: #23426e;
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.45rem;
    margin-right: 1rem;
    margin-bottom: 0.12em;
    box-shadow: 0 2px 8px rgba(33,150,243,0.06);
}
.dashboard-chart-icon.bg-creative {
    background: linear-gradient(135deg, #e9d8fd 60%, #b794f4 100%);
    color: #805ad5;
}

/* Card Gallery Hover */
.card-hover {
    transition: all 0.3s ease-in-out;
}
.card-hover:hover {
    box-shadow: 0 0 15px rgba(35,66,110,0.19);
    transform: translateY(-5px) scale(1.04);
}
.card-hover img,
.card-hover video {
    filter: brightness(92%);
    transition: filter 0.3s ease-in-out;
}
.card-hover:hover img,
.card-hover:hover video {
    filter: brightness(104%);
}

/* Badges */
.badge-primary,
.badge-info {
    background: #23426e !important;
    color: #fff !important;
    font-weight: 500;
    border-radius: 0.55em !important;
    letter-spacing: 0.02em;
    box-shadow: 0 1.5px 7px rgba(35,66,110,0.04);
}

/* Playlist Grid */
.dashboard.card .card-body {
    background: #fafcff;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}


/* Heatmap */
.dashboard-heatmap-outer {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
}
.dashboard-heatmap-table {
    border-collapse: separate;
    border-spacing: 4px 2px;
    width: 100%;
    background: transparent;
    font-size: 0.97em;
    table-layout: auto;
}
.dashboard-heatmap-table th,
.dashboard-heatmap-table td {
    text-align: center;
    padding: 0 !important;
    vertical-align: middle;
    border: none !important;
    font-family: inherit;
}
.dashboard-heatmap-sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff !important;
    box-shadow: 2px 0 3px rgba(100,100,100,0.03);
}
.dashboard-heatmap-screen-col {
    font-size: 1.05em;
    min-width: 68px;
    max-width: 110px;
    width: 1%;
}
.dashboard-heatmap-hour-col { font-size: 0.93em; min-width:28px; max-width:33px;}
.dashboard-heatmap-cell {
    transition: box-shadow .11s, background .14s;
    cursor: pointer;
    font-size: 1em;
    border-radius: 8px !important;
    min-width: 25px; max-width: 33px; width: 2.3vw;
    height: 30px;
    box-shadow: 0 1px 3px rgba(33,150,243,0.03);
    border: 1px solid #edf2f7;
}
.dashboard-heatmap-cell:hover {
    box-shadow: 0 2px 8px rgba(33,150,243,0.17), 0 0 0 2px #2196f322;
    z-index: 4;
    filter: brightness(1.15);
}
@media (max-width: 900px) {
    .dashboard-heatmap-table { font-size: 0.93em;}
    .dashboard-heatmap-screen-col { min-width: 48px; max-width: 82px;}
    .dashboard-heatmap-hour-col { min-width:19px; max-width:22px;}
    .dashboard-heatmap-cell { min-width:15px; max-width:22px; height:21px; }
    .dashboard-chart-glass { padding: 1.1rem 0.6rem 1.2rem 0.6rem; border-radius: 12px;}
    .kpi-card { border-radius: 1em !important; }
}
@media (max-width: 600px) {
    .dashboard-heatmap-table { font-size: 0.90em;}
    .dashboard-heatmap-screen-col { font-size:0.99em; min-width:33px; max-width:66px;}
    .dashboard-heatmap-hour-col { min-width:13px; max-width:14px;}
    .dashboard-heatmap-cell { min-width:11px; max-width:14px; height:13px; font-size: 0.83em;}
}

/* Reports date filter responsive */
.date-preset-group {
    flex: 1 1 auto;
}
.date-range-picker-wrap {
    flex: 0 0 auto;
}
@media (max-width: 767px) {
    .date-preset-group {
        width: 100%;
    }
    .date-preset-group .btn {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
    }
    .date-range-picker-wrap {
        width: 100%;
    }
    .date-range-picker-wrap .input-group {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

#cropImagePreview {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.cropper-container {
    max-width: 100% !important;
}

.crop-icon i {
    transition: transform 0.3s ease, color 0.3s ease;
}

.crop-icon:hover i {
    transform: scale(1.3);
    color: #edf3ed;
}

.creative-outer-scroll {
    max-height: 680px;
    overflow-y: auto;
    padding-right: 8px;
    background: transparent;
}
.creative-badges-scroll {
    overflow-y: auto;
    padding-bottom: 2px;
    margin-bottom: 0.5rem;
}
.creative-badges-scroll::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
.creative-badges-scroll::-webkit-scrollbar-thumb {
    background: #cfcfd3;
    border-radius: 5px;
}

.creative-outer-scroll::-webkit-scrollbar,
.creative-inner-scroll::-webkit-scrollbar {
    width: 8px;
    background: #f3f3fa;
    border-radius: 8px;
}
.creative-outer-scroll::-webkit-scrollbar-thumb,
.creative-inner-scroll::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 7px;
}
.creative-statistics.table-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}

.creative-statistics.table-progress .progress {
    flex-grow: 1;
    height: 8px;
    background-color: #e9ecef;
}

.creative-statistics.table-progress .progress-bar {
    background-color: #0d6efd;
}

.creative-statistics.table-progress span {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #6c757d;
}

.search-input-group {

    height: 40px;
}
.search-input-group .input-group-text,
.search-input-group .form-control {
    height: 100% !important;
    border-radius: 0 !important;
}
.search-input-group .input-group-text {
    background-color: #ffffff !important;
    border-right: none;
    padding-left: 15px;
    padding-right: 5px;
}
#screenSearchInput {
    padding-left: 0.5rem;
    font-size: 0.9rem;
}
#screenSearchInput::placeholder {
    color: #a0a0a0;
}

/* Individual Screen Cards */
.screen-card .card {
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.screen-card .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.screen-card .card-header {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    height: 80px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    align-items: flex-start;
    overflow: hidden;
    position: relative;
}
.screen-card .card-header.bg-success {
    background-color: #198754 !important;
}
.screen-card .card-header.bg-danger {
    background-color: #dc3545 !important;
}

.card-header-preview {
    z-index: 0;
    filter: brightness(80%);
    opacity: 0.2;
}
.screen-card .card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    z-index: 0;
}

.screen-card .card-header h6, .screen-card .card-header .status-icon-small {
    z-index: 1;
}
.screen-card .card-header h6 {
    font-size: 0.75rem;
    margin-top: 0;
    margin-bottom: auto;
    align-self: flex-start;
}
.status-icon-small .material-icons {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: auto;
    align-self: flex-start;
}
.screen-header-compact {
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
.screen-header-compact .d-flex {
    position: absolute;
    bottom: 10px;
    left: 15px;
    right: 15px;
    justify-content: space-between;
    align-items: flex-end;
}
.screen-header-compact .d-flex h6 {
    margin-bottom: 0 !important;
}


.screen-card .card-body {
    padding: 1rem 1.5rem 1.25rem !important;
}
.screen-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 0.5rem !important;
}
.screen-card-modern {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-width: 0 !important;
}
.screen-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

.card-header-preview {
    filter: brightness(0.8);
    transition: filter 0.3s ease;
}
.screen-card-modern:hover .card-header-preview {
    filter: brightness(1);
}

.screen-card-modern .card-body .card-title {
    font-size: 1.25rem;
}

.status-icon-small i {
    font-size: 1.8rem;
}

/* Card Body */
.screen-card-modern .card-body {
    min-height: 120px;
    padding-bottom: 0 !important;
}

.screen-card .card-text {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.75rem !important;
}
.screen-card .card-text .material-icons {
    font-size: 0.9rem;
    vertical-align: middle;
    margin-top: -2px;
}

#mediaModal .modal-content, #screenDetailModal .modal-content {
    background-color: #f8f9fa;
    border-radius: 12px;
}
#mediaModal .modal-header, #screenDetailModal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}
#mediaModal .modal-body, #screenDetailModal .modal-body {
    padding-top: 0;
}
#mediaModal .close, #screenDetailModal .close {
    font-size: 2rem;
    font-weight: normal;
    opacity: 0.7;
    color: #495057;
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
}
#mediaModal .close:hover, #screenDetailModal .close:hover {
    opacity: 1;
}


.filter-btn-group .filter-btn {
    margin-left: 8px; /* Space between buttons */
    border-radius: 6px; /* Slightly rounded corners for individual buttons */
    padding: 7px 14px; /* Adjust padding for a slightly larger feel */
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Start with transparent border */
}

/* Base style for inactive filter buttons */
.filter-btn-group .filter-btn {
    background-color: #e9ecef; /* Light gray background */
    color: #495057; /* Darker text */
    border-color: #e9ecef; /* Match background color */
}

/* Hover effect for inactive filter buttons */
.filter-btn-group .filter-btn:not(.active):hover {
    background-color: #dee2e6; /* Slightly darker gray on hover */
    border-color: #dee2e6;
    color: #343a40;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.filter-btn-group .filter-btn.active[data-filter="all"] {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}
.filter-btn-group .filter-btn.active[data-filter="active"] {
    background-color: #198754;
    color: white;
    border-color: #198754;
    box-shadow: 0 4px 8px rgba(25, 135, 84, 0.2);
}
.filter-btn-group .filter-btn.active[data-filter="inactive"] {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.2);
}

.filter-btn-group .filter-btn:first-child {
    margin-left: 0;
}

.filter-btn-group {
    display: flex;
    gap: 8px;
}

/* Basic custom styles for your Magnific Popup */
.white-popup {
    background: #FFF;
    padding: 30px;
    text-align: left;
    max-width: 900px; /* Adjust as needed */
    margin: 40px auto;
    position: relative;
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Soft shadow */
}

.mfp-zoom-in .mfp-with-anim {
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: scale(0.8);
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
    opacity: 1;
    transform: scale(1);
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
    transform: scale(0.8);
    opacity: 0;
}

.gallery-box {
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
    width: 160px !important;
    height: 160px !important;
    background: #f5f7fa;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-box img, .gallery-box video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px;
}
.gallery-box:hover {
    box-shadow: 0 4px 16px rgba(50,50,150,0.10), 0 1.5px 7px rgba(0,0,0,0.07);
    transform: translateY(-3px) scale(1.03);
    background: #e9f1fb;
}
@media (max-width: 600px) {
    .gallery-box {
        width: 100px !important;
        height: 100px !important;
    }
}
#contentModal .gallery-box {
    width: 170px;
    height: 170px;
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

#contentModal .gallery-box img,
#contentModal .gallery-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    background: #f0f0f0;
    display: block;
}
@media (max-width: 600px) {
    #contentModal .gallery-box {
        width: 90px;
        height: 90px;
    }
}
.api-key-card {
    border-radius: 20px;
    box-shadow: 0 6px 24px 0 rgba(80, 94, 124, 0.08);
    border: none;
    padding: 2rem 2.2rem 1.5rem 2.2rem;
    margin-bottom: 2rem;
    background: #fff;
}
.api-dashboard-chart-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 2.1rem;
}
.api-dashboard-chart-label {
    font-size: 1.35rem;
    font-weight: 700;
    color: #26314f;
}
.api-dashboard-chart-sub {
    font-size: 1.03rem;
    color: #626870;
    margin-top: .15rem;
}
.api-key-label {
    font-weight: 500;
    color: #344767;
    margin-bottom: .4rem;
    font-size: 1rem;
}
.api-key-input-group {
    background: #f6f8fa;
    border-radius: 12px;
    border: 1px solid #d7e1ec;
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}
.api-key-input {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: #222b45;
    width: 100%;
    outline: none;
    letter-spacing: 0.5px;
}
.api-key-copy-btn {
    border: none;
    background: #23426e;
    color: #fff;
    border-radius: 6px;
    padding: .35rem .9rem;
    margin-left: 0.8rem;
    display: flex;
    align-items: center;
    font-size: 1rem;
    transition: background .2s;
    cursor: pointer;
}
.api-key-copy-btn:active, .api-key-copy-btn.copied {
    background: #38a169;
}
.api-key-info {
    font-size: 0.96rem;
    color: #626870;
    margin-top: 6px;
}
.api-key-action-btn {
    margin-top: 1.2rem;
    padding: .6rem 2.1rem;
    font-size: 1.07rem;
    border-radius: 7px;
    font-weight: 600;
    background: #222b45;
    color: #fff;
    transition: background .2s;
    cursor: pointer;
}
.api-key-action-btn:hover {
    background: #1a2440;
}
@media (max-width: 991.98px) {
    .api-key-card { padding: 1.3rem 0.7rem; }
    .api-dashboard-chart-label { font-size: 1.16rem; }
    .api-dashboard-chart-sub { font-size: 0.97rem; }
}
@media (max-width: 767.98px) {
    .api-key-card { padding: 1.1rem 0.5rem; }
    .api-dashboard-chart-label { font-size: 1rem; }
    .api-dashboard-chart-sub { font-size: 0.89rem; }
    .api-dashboard-chart-icon { width: 42px; height: 42px; font-size: 1.5rem; }
    .api-key-input-group { font-size: 0.99rem; padding: .5rem .7rem; }
    .api-key-copy-btn { padding: .3rem .8rem; font-size: 0.95rem; }
    .api-key-action-btn { font-size: .99rem; padding: .5rem 1.5rem; }
}
@media (max-width: 576px) {
    .api-dashboard-chart-icon { width: 36px; height: 36px; font-size: 1.1rem; }
    .api-dashboard-chart-label { font-size: 0.97rem; }
    .api-dashboard-chart-sub { font-size: 0.85rem; }
    .api-key-info { font-size: 0.86rem; }
}

.sub-acct-avatar { width:36px; height:36px; border-radius:50%; font-size:.76rem; font-weight:700; color:#fff; letter-spacing:.3px; }
.sub-acct-key .api-key-input-group { display:inline-flex; width:380px; padding:.4rem .7rem; font-size:.84rem; }
.sub-acct-key .api-key-input { font-size:.84rem; letter-spacing:0; }
.sub-acct-key .api-key-copy-btn { padding:.3rem .6rem; font-size:.9rem; }
.sub-acct-gen-btn { background:none; border:1px solid #c5cfe0; border-radius:7px; padding:.27rem .6rem; color:#344767; cursor:pointer; font-size:.81rem; font-weight:600; transition:background .15s,border-color .15s,color .15s; display:inline-flex; align-items:center; white-space:nowrap; }
.sub-acct-gen-btn:hover { background:#23426e; border-color:#23426e; color:#fff; }
.sub-acct-regen-btn { background:none; border:1px solid #c5cfe0; border-radius:7px; padding:.27rem .6rem; color:#344767; cursor:pointer; font-size:.81rem; font-weight:600; transition:background .15s,border-color .15s,color .15s; display:inline-flex; align-items:center; white-space:nowrap; }
.sub-acct-regen-btn:hover { background:#2a6d28; border-color:#23426e; color:#fff; }

/* Permission Cards Styling */
.permission-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.permission-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.permission-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px 8px 0 0;
    padding: 15px 20px;
    border-bottom: none;
}

.permission-body {
    padding: 20px;
    background: #fafafa;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.permission-item {
    padding: 15px;
    background: white;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.permission-item:hover {
    border-color: #007bff;
    background: #f8f9ff;
}

.permission-item .form-check {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
}

.permission-item .form-check-input {
    margin-top: 3px;
    margin-right: 12px;
    flex-shrink: 0;
}

.permission-item .form-check-label {
    flex: 1;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.permission-title {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.permission-description {
    color: #666;
    font-size: 12px;
    line-height: 1.4;
}

/* Active state - Green */
.permission-item .form-check-input:checked + .form-check-label .permission-title {
    color: #28a745;
}

.permission-item .form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

.permission-item .form-check-input:checked ~ .permission-item {
    border-color: #28a745;
    background: #f8fff9;
}

/* Inactive state - Blue */
.permission-item .form-check-input:not(:checked) + .form-check-label .permission-title {
    color: #007bff;
}

.permission-item .form-check-input:not(:checked) {
    background-color: #007bff;
    border-color: #007bff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .permission-grid {
        grid-template-columns: 1fr;
    }
}

.select-all-container {
    transition: all 0.3s ease;
}

.select-all-container:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.permission-item {
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 8px;
    margin: 2px 0;
}

.permission-item:hover {
    background-color: #f8f9fa !important;
}

/* Ensure checkbox styling works with Material Dashboard */
.select-all-container .form-check-input {
    opacity: 1 !important;
    position: relative !important;
    pointer-events: auto !important;
}

.select-all-container .form-check-input:checked {
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.select-all-container .form-check-input:checked + .form-check-sign .check {
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.select-all-container .form-check-sign {
    position: relative !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #999 !important;
    border-radius: 3px !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
}

.select-all-container .form-check-sign .check {
    position: absolute !important;
    top: 2px !important;
    left: 6px !important;
    width: 6px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.select-all-container .form-check-input:checked + .form-check-sign .check {
    opacity: 1 !important;
}

.badge {
    font-size: 12px;
    padding: 6px 10px;
}

/* ============================================================
   Payment Methods section
   ============================================================ */
.pm-card-brand-visa       { --pm-c1: #1a1f71; --pm-c2: #4b6cb7; }
.pm-card-brand-mastercard { --pm-c1: #eb001b; --pm-c2: #f79e1b; }
.pm-card-brand-amex       { --pm-c1: #016fd0; --pm-c2: #0e4c92; }
.pm-card-brand-discover   { --pm-c1: #ff6000; --pm-c2: #f7a838; }
.pm-card-brand-diners     { --pm-c1: #0079be; --pm-c2: #0e4c92; }
.pm-card-brand-jcb        { --pm-c1: #0e4c92; --pm-c2: #5cb85c; }
.pm-card-brand-default    { --pm-c1: #434343; --pm-c2: #1a1a1a; }

.pm-section-label {
    color: #99a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Hero (default) credit card */
.pm-credit-card {
    color: white;
    border-radius: 14px;
    padding: 22px;
    min-height: 200px;
    position: relative;
    box-shadow: 0 10px 24px rgba(0,0,0,0.15);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(135deg, var(--pm-c1) 0%, var(--pm-c2) 100%);
}
.pm-credit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}
.pm-credit-card::before,
.pm-credit-card::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.pm-credit-card::before {
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: rgba(255,255,255,0.08);
}
.pm-credit-card::after {
    bottom: -55px; left: -55px;
    width: 180px; height: 180px;
    background: rgba(255,255,255,0.05);
}
.pm-cc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}
.pm-cc-default-badge {
    background: rgba(255,255,255,0.22);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.pm-cc-brand {
    font-size: 42px;
    opacity: 0.95;
    line-height: 1;
}
.pm-cc-chip {
    width: 38px;
    height: 28px;
    background: linear-gradient(135deg, #f6e27a 0%, #c89c1a 100%);
    border-radius: 5px;
    margin: 18px 0 14px;
    position: relative;
    z-index: 1;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}
.pm-cc-chip::before,
.pm-cc-chip::after {
    content: '';
    position: absolute;
    background: rgba(0,0,0,0.18);
    height: 1px;
    left: 4px; right: 4px;
}
.pm-cc-chip::before { top: 9px; }
.pm-cc-chip::after  { bottom: 9px; }

.pm-cc-number {
    margin: 0 0 18px 0;
    font-size: 22px;
    letter-spacing: 4px;
    font-weight: 500;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    position: relative;
    z-index: 1;
}
.pm-cc-bottom {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
.pm-cc-label {
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 9px;
    margin-bottom: 2px;
    display: block;
}
.pm-cc-value {
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}
.pm-cc-replace {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}
.pm-cc-replace:hover { color: #00838f; text-decoration: none; }
.pm-cc-replace .material-icons { font-size: 18px; }

/* Saved (other) cards — lightweight tiles with a brand-colored top stripe */
.pm-saved-card {
    border: 1px solid #ececec;
    border-radius: 10px;
    background: white;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.pm-saved-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}
.pm-saved-card-stripe {
    height: 4px;
    background: linear-gradient(90deg, var(--pm-c1), var(--pm-c2));
}
.pm-saved-card-body {
    padding: 14px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.pm-saved-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.pm-saved-card-brand-icon {
    font-size: 30px;
    color: #444;
    line-height: 1;
}
.pm-saved-card-brand-name {
    font-size: 11px;
    color: #888;
    text-transform: capitalize;
    font-weight: 500;
}
.pm-saved-card-number {
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 16px;
    margin: 0 0 4px 0;
    color: #333;
    font-family: 'Roboto Mono', 'Courier New', monospace;
}
.pm-saved-card-exp {
    font-size: 11px;
    color: #999;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.pm-saved-card-actions {
    margin-top: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pm-saved-card-actions form { margin: 0; display: inline-block; }
.pm-saved-card-actions .btn {
    margin: 0;
    padding: 5px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: none;
}

.pm-empty-state {
    border: 2px dashed #d8d8d8;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    color: #888;
    transition: border-color 0.2s ease, background 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pm-empty-state:hover {
    border-color: #00bcd4;
    background: #f6fcfd;
}
.pm-empty-state .material-icons {
    font-size: 38px;
    opacity: 0.45;
}
.pm-empty-state-title {
    margin: 8px 0 4px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
}
.pm-empty-state-sub { font-size: 12px; }

.pm-no-method {
    text-align: center;
    padding: 40px 20px;
}
.pm-no-method .material-icons {
    font-size: 64px;
    color: #ccc;
}
.pm-no-method h5 {
    margin-top: 14px;
    color: #555;
}

.pm-trust-footer {
    display: flex;
    align-items: center;
    color: #5a6c7d;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    margin-top: 18px;
    border-top: 1px solid #eee;
}
.pm-trust-footer .material-icons {
    font-size: 18px;
    color: #4caf50;
    margin-right: 6px;
}
.pm-trust-footer img { margin-left: auto; }

/* ============================================================
   Add Payment Method form
   ============================================================ */
.apm-page label,
.apm-page .form-group label,
.apm-page .form-group > label {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    color: #5a6273 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    display: block !important;
    height: auto !important;
    line-height: 1.4 !important;
    width: auto !important;
    pointer-events: auto !important;
}
.apm-page .form-group {
    position: static !important;
    display: block !important;
    margin: 0 0 16px 0 !important;
    padding-top: 0 !important;
}

/* Override material-dashboard's underline-only form-control */
.apm-page .form-control,
.apm-page select.form-control,
.apm-page input.form-control {
    border: 1px solid #e0e3e8 !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    background: #fff !important;
    background-image: none !important;
    height: 44px !important;
    font-size: 14px !important;
    line-height: 22px !important;
    box-shadow: none !important;
    color: #222 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.apm-page .form-control:focus,
.apm-page input.form-control:focus,
.apm-page select.form-control:focus {
    border-color: #00bcd4 !important;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.18) !important;
    outline: 0 !important;
    background-color: #fff !important;
}
.apm-page .form-control::placeholder { color: #b5bcc4 !important; }

.apm-page select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px !important;
    padding-right: 36px !important;
}
.apm-page .form-group { margin-bottom: 14px; }

/* Breathing room between the colored card header and the first form field */
.apm-page .card-container,
.apm-page .address-container {
    padding-top: 14px;
}
.apm-page .apm-section-title + .card-container,
.apm-page .apm-section-title + .address-container,
.apm-page .address-wrapper + .card-wrapper > .card-container {
    padding-top: 0;
}

.apm-stripe-field {
    border: 1px solid #e0e3e8;
    border-radius: 8px;
    padding: 11px 14px;
    background: #fff;
    min-height: 44px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.apm-stripe-field.StripeElement--focus {
    border-color: #00bcd4;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.18);
}
.apm-stripe-field.StripeElement--invalid { border-color: #f44336; }

.apm-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 14px 0;
}
.apm-section-title .material-icons { color: #00bcd4; font-size: 20px; }

.apm-submit-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f0f2f5;
}
.apm-submit-row .btn {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.25);
    margin: 0 !important;
}
.apm-submit-row .btn .material-icons { margin-right: 4px; }

.apm-encrypted-note {
    margin: 12px 0 0 0;
    font-size: 12px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 6px;
}
.apm-encrypted-note .material-icons { font-size: 16px; color: #4caf50; }

.apm-info-box {
    border-radius: 10px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f8fcfd 0%, #eef9fb 100%);
    border: 1px solid #d6eef3;
}
.apm-info-box-amount {
    font-size: 32px;
    font-weight: 700;
    color: #00838f;
    margin: 0;
    line-height: 1.1;
}
.apm-info-box-due {
    font-size: 13px;
    color: #555;
    margin: 6px 0 0 0;
}
.apm-info-box-due strong { color: #333; }

/* Trust hero card */
.apm-trust-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.apm-trust-card .card-body { padding: 0 !important; }
.apm-trust-hero {
    background: linear-gradient(135deg, #00bcd4 0%, #00838f 100%);
    color: white;
    padding: 24px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.apm-trust-hero::before,
.apm-trust-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.apm-trust-hero::before {
    top: -50px; right: -50px;
    width: 140px; height: 140px;
    background: rgba(255,255,255,0.08);
}
.apm-trust-hero::after {
    bottom: -60px; left: -60px;
    width: 160px; height: 160px;
    background: rgba(255,255,255,0.06);
}
.apm-trust-shield {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.apm-trust-shield .material-icons { font-size: 34px; color: white; }
.apm-trust-hero h4 {
    margin: 0 0 6px;
    color: white;
    font-weight: 600;
    font-size: 17px;
    position: relative;
    z-index: 1;
}
.apm-trust-hero p {
    margin: 0;
    font-size: 13px;
    opacity: 0.92;
    position: relative;
    z-index: 1;
}
.apm-trust-badges {
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
    background: white;
}
.apm-trust-badges-wide {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991px) {
    .apm-trust-badges-wide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .apm-trust-badges-wide { grid-template-columns: 1fr; }
}

.apm-trust-hero-horizontal {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
}
.apm-trust-hero-horizontal .apm-trust-shield { margin-bottom: 0; flex-shrink: 0; }
.apm-trust-hero-horizontal .apm-trust-hero-text { flex: 1; min-width: 0; }
.apm-trust-hero-horizontal h4 { margin-bottom: 4px; }
@media (max-width: 575px) {
    .apm-trust-hero-horizontal { flex-direction: column; text-align: center; }
}

/* Card height helpers for the top row */
.apm-page .apm-equal-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.apm-page .apm-equal-card > .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.apm-page .apm-row-equal {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.apm-page .apm-row-equal > [class*="col-"] {
    display: flex;
}

/* Center the credit-card visual when it has extra vertical space */
.apm-page .apm-current-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.apm-page .apm-current-card-body .pm-credit-card {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

/* Other saved cards list (compact rows below the hero default card) */
.apm-other-cards {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #f0f2f5;
}
.apm-other-cards-label {
    color: #99a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 10px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.apm-other-cards-label .apm-other-cards-count {
    background: #eef2f5;
    color: #677281;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
}
.apm-other-card-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #ececec;
    background: #fdfdfe;
    margin-bottom: 8px;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    position: relative;
    overflow: hidden;
}
.apm-other-card-row:last-child { margin-bottom: 0; }
.apm-other-card-row:hover {
    border-color: #cbe9ee;
    background: #f7fcfd;
    transform: translateX(2px);
}
.apm-other-card-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--pm-c1, #999), var(--pm-c2, #ccc));
}
.apm-other-card-icon {
    font-size: 26px;
    color: #444;
    line-height: 1;
    flex-shrink: 0;
}
.apm-other-card-info {
    flex: 1;
    min-width: 0;
}
.apm-other-card-number {
    display: block;
    font-size: 13px;
    color: #2c3e50;
    font-weight: 600;
    line-height: 1.2;
    text-transform: capitalize;
}
.apm-other-card-number .apm-other-card-mask {
    color: #555;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    letter-spacing: 1.5px;
    margin-left: 4px;
}
.apm-other-card-exp {
    color: #8a92a0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.apm-other-card-action form { margin: 0; }
.apm-other-card-action .btn-set-default {
    background: white;
    border: 1px solid #cfd5dd;
    color: #4a5868;
    font-size: 11px;
    padding: 5px 11px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    box-shadow: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.apm-other-card-action .btn-set-default:hover {
    border-color: #00bcd4;
    color: #00838f;
    background: #f4fbfc;
}
.apm-other-card-action .btn-set-default .material-icons { font-size: 13px; }
@media (max-width: 575px) {
    .apm-other-card-row { flex-wrap: wrap; }
    .apm-other-card-info { width: calc(100% - 40px); }
    .apm-other-card-action { width: 100%; margin-top: 6px; padding-left: 38px; }
}
.apm-trust-badge {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.apm-trust-badge-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #e8f5e9;
    color: #4caf50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.apm-trust-badge-icon .material-icons { font-size: 19px; }
.apm-trust-badge-text strong {
    color: #2c3e50;
    font-size: 13px;
    display: block;
    line-height: 1.25;
    font-weight: 600;
}
.apm-trust-badge-text small {
    color: #7d8794;
    font-size: 11px;
    line-height: 1.3;
}
.apm-trust-stripe-footer {
    padding: 14px 20px;
    border-top: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    color: #888;
    background: #fafbfc;
}
.apm-trust-stripe-footer img { height: 22px; }

.apm-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.15s ease;
}
.apm-back-link:hover { color: #00838f; text-decoration: none; }
.apm-back-link .material-icons { font-size: 18px; }

.apm-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #e0e0e0;
    border-top-color: #00bcd4;
    border-radius: 50%;
    animation: apm-spin 0.8s linear infinite;
    display: none;
}
@keyframes apm-spin { to { transform: rotate(360deg); } }
/* =========================================================================
   addPlaylistContent.blade.php
   ========================================================================= */
.playlist-add-page {
    min-height: 100%;
}

.playlist-add-page .add-content-hero {
    background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
    border-radius: 20px;
    padding: 1.15rem 1.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 16px 16px rgba(180, 83, 9, .18);
    overflow: hidden;
}

.playlist-add-page .add-content-title {
    color: #fff;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.playlist-add-page .add-content-subtitle {
    color: rgba(255, 255, 255, .88);
    margin: .35rem 0 0;
    font-size: .92rem;
}

.playlist-add-page .add-content-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

.playlist-add-page .add-content-actions form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.playlist-add-page .spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -76px 0 0 -76px;
    z-index: 1050;
}

.playlist-add-page .btn-modern {
    border-radius: 11px;
    border: 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(2, 6, 23, .25);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .playlist-add-page .add-content-actions {
        gap: .25rem;
    }
    .playlist-add-page .btn-modern {
        font-size: .64rem;
        padding: .38rem .55rem;
        letter-spacing: 0;
        box-shadow: none;
    }
}

.playlist-add-page .add-main-card {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .10);
}

.playlist-add-page .add-main-card .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
    color: #0f172a;
    border-bottom: 1px solid #e9eef7;
    box-shadow: none !important;
    margin-top: 0 !important;
}


.playlist-add-page .nav-tabs .nav-link {
    border-radius: 999px !important;
    border: 1px solid #d6deec !important;
    color: #334155 !important;
    margin: .2rem .4rem .2rem 0;
    padding: .45rem .8rem !important;
    font-weight: 600;
}

.playlist-add-page .nav-tabs .nav-link:hover {
    background: #f1f5fb !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.playlist-add-page .nav-tabs .nav-link.active {
    background: #0f172a !important;
    color: #fff !important;
    border-color: #0f172a !important;
}

.playlist-add-page .nav-tabs .nav-link.active:hover {
    background: #0f172a !important;
    color: #fff !important;
}

.playlist-add-page .folders-container .folder-card {
    border-radius: 12px;
    border: 1px solid #d8e0ed;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
    background: #fff !important;
}

.playlist-add-page .tab-pane .card.no-background,
.playlist-add-page .tab-pane .card.mt-0,
.playlist-add-page .tab-pane .card.p-0 {
    border: 1px solid #e3e9f3;
    border-radius: 14px;
    box-shadow: 0 6px 15px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.playlist-add-page .tab-pane .content-image {
    min-height: 145px;
    border-bottom: 1px solid #e9eef7;
}

.playlist-add-page .tab-pane p.text-center {
    font-size: .82rem;
    color: #475569;
    margin-top: .45rem;
}

/* =========================================================================
   editPlaylist.blade.php
   ========================================================================= */
.edit-playlist-page {
    padding-bottom: 3rem;
}

.ep-hero {
    border-radius: 18px;
    padding: 1.6rem 1.75rem 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.ep-hero-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ep-hero-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 .3rem;
    line-height: 1.2;
}

.ep-hero-sub {
    color: rgba(255,255,255,.8);
    font-size: .9rem;
    margin: 0;
}

.ep-hero-sub span {
    color: #fff;
    font-weight: 700;
}

.ep-back-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 10px;
    padding: .5rem 1.1rem;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.ep-back-btn:hover {
    background: rgba(255,255,255,.25);
    color: #fff;
    text-decoration: none;
}

.ep-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(15,23,42,.08);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.ep-card-head {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.ep-card-head-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ep-card-head-icon .material-icons { font-size: 18px; color: #fff; }

.ep-card-head-title {
    color: #0f172a;
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.ep-card-head-sub {
    color: #64748b;
    font-size: .78rem;
    margin: .12rem 0 0;
}

.ep-card-body {
    padding: 1.4rem;
}

.ep-card-footer {
    padding: .9rem 1.4rem;
    background: #f8fafc;
    border-top: 1px solid #e9eef5;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ep-label {
    font-size: .82rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: .35rem;
    display: block;
    letter-spacing: .01em;
}

.ep-label .req { color: #ef4444; margin-left: 2px; }
.ep-label .opt { color: #94a3b8; font-weight: 400; font-size: .75rem; }

.ep-input {
    border: 1.5px solid #d1dbe8 !important;
    border-radius: 10px !important;
    min-height: 44px;
    font-size: .93rem !important;
    background: #f9fbff !important;
    color: #1e293b !important;
    padding: .55rem .85rem !important;
    transition: border .15s, box-shadow .15s;
    width: 100%;
}

.ep-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
    background: #fff !important;
    outline: none;
}

.ep-hint {
    font-size: .76rem;
    color: #94a3b8;
    margin-top: .3rem;
}

.ep-tz-strip { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef2f7; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .78rem; color: #94a3b8; }
.ep-tz-strip i.material-icons { font-size: 14px; vertical-align: -2px; margin-right: 4px; }
.ep-tz-strip strong { color: #334155; font-weight: 600; }
.ep-tz-strip a { color: #3b82f6; font-weight: 600; white-space: nowrap; }
.ep-tz-warn { margin-top: 8px; background: #fef3c7; color: #92400e; border-radius: 8px; padding: 7px 10px; font-size: .75rem; display: flex; align-items: center; gap: 6px; }
.ep-tz-warn i.material-icons { font-size: 15px; }

.ep-end-date-wrap { position: relative; }
.ep-end-date-wrap .datepicker-end { padding-right: 2.2rem !important; }
.ep-end-date-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}
.ep-end-date-clear:hover { background: #ef4444; color: #fff; }
.ep-end-date-clear .material-icons { font-size: 16px; }

.ep-days-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .2rem;
}

.ep-days-wrap .btn.days {
    min-width: 48px;
    border-radius: 10px !important;
    font-size: .78rem;
    font-weight: 700;
    padding: .42rem .65rem !important;
    border: 1.5px solid #d1dbe8 !important;
    background: #f1f5fb !important;
    color: #475569 !important;
    transition: .15s;
    letter-spacing: .02em;
}

.ep-days-wrap .btn.days.selected,
.ep-days-wrap .btn.days.btn-success {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    border-color: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(37,99,235,.3) !important;
}

.ep-schedule-summary {
    background: #f0f7ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-top: 1rem;
}

.ep-schedule-summary-title {
    font-size: .8rem;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.ep-schedule-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: #374151;
    margin-bottom: .25rem;
}

.ep-schedule-row:last-child { margin-bottom: 0; }
.ep-schedule-row .material-icons { font-size: 14px; color: #3b82f6; }

.ep-btn-primary {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    padding: .6rem 1.3rem;
    letter-spacing: .02em;
    box-shadow: 0 3px 10px rgba(37,99,235,.3);
    transition: .15s;
}

.ep-btn-primary:hover { opacity: .9; color: #fff; }

.ep-btn-danger {
    background: #fff;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    color: #dc2626;
    font-size: .88rem;
    font-weight: 700;
    padding: .6rem 1.3rem;
    transition: .15s;
}

.ep-btn-danger:hover {
    background: #fef2f2;
    border-color: #ef4444;
    color: #b91c1c;
}

.ep-btn-success {
    background: linear-gradient(135deg, #15803d, #16a34a);
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    padding: .6rem 1.3rem;
    box-shadow: 0 3px 10px rgba(22,163,74,.25);
    transition: .15s;
}

.ep-btn-success:hover { opacity: .9; color: #fff; }

.ep-btn-remove {
    background: #fff;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    color: #dc2626;
    font-size: .82rem;
    font-weight: 600;
    padding: .5rem 1rem;
    transition: .15s;
}

.ep-btn-remove:hover {
    background: #fef2f2;
    border-color: #ef4444;
    color: #b91c1c;
}

.ep-alert-danger {
    border-radius: 10px;
    border: 1.5px solid #fca5a5;
    background: #fff5f5;
    color: #b91c1c;
    padding: .75rem 1rem;
    font-size: .88rem;
    margin-bottom: 1rem;
}

.ep-alert-success {
    border-radius: 10px;
    border: 1.5px solid #86efac;
    background: #f0fdf4;
    color: #15803d;
    padding: .75rem 1rem;
    font-size: .88rem;
    margin-bottom: 1rem;
}

@media (max-width: 576px) {
    .ep-hero { padding: 1.3rem 1rem 1.2rem; border-radius: 12px; }
    .ep-hero-title { font-size: 1.3rem; }
    .ep-card-body { padding: 1rem; }
    .ep-card-footer { flex-wrap: wrap; }
}

.playlist-page-card {
    min-height: 100%;
}

.playlist-page-card .playlist-hero {
    background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%) !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 1.35rem 1.4rem !important;
    margin-bottom: 0.5rem !important;
    box-shadow: 0 16px 16px rgba(180, 83, 9, .18) !important;
    position: relative;
    overflow: hidden;
}

.playlist-page-card .playlist-hero:before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -50px;
    top: -65px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(56, 189, 248, .35), rgba(56, 189, 248, 0));
}

.playlist-page-card .playlist-hero-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
    letter-spacing: -.02em;
}

.playlist-page-card .playlist-hero-subtitle {
    margin: .4rem 0 .5rem;
    color: rgba(248, 250, 252, .82);
    font-size: .96rem;
    max-width: 680px;
}

.playlist-page-card .playlist-hero-layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
}

.playlist-page-card .playlist-hero-controls,
.playlist-page-list .playlist-hero-controls {
    width: 430px;
    max-width: 100%;
}

.playlist-page-card .playlist-hero-buttons,
.playlist-page-list .playlist-hero-buttons {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-bottom: .6rem;
}

.playlist-page-card .playlist-hero-search,
.playlist-page-list .playlist-hero-search {
    margin-top: 0;
    margin-left: auto;
    width: 360px;
    max-width: 100%;
}

.playlist-page-card .playlist-hero-search .input-group,
.playlist-page-list .playlist-hero-search .input-group {
    background: rgba(15, 23, 42, .42);
    border: 1px solid rgba(148, 163, 184, .42);
    border-radius: 14px;
    padding: 5px 5px 5px 8px;
    box-shadow: 0 10px 24px rgba(2, 6, 23, .24);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.playlist-page-card .playlist-hero-search .input-group:focus-within,
.playlist-page-list .playlist-hero-search .input-group:focus-within {
    border-color: rgba(56, 189, 248, .68);
    background: rgba(15, 23, 42, .58);
    box-shadow: 0 12px 28px rgba(2, 6, 23, .35), 0 0 0 2px rgba(56, 189, 248, .18);
}

.playlist-page-card .playlist-hero-search .playlist-search-input,
.playlist-page-list .playlist-hero-search .playlist-search-input {
    background: transparent;
    border: 0;
    border-radius: 10px !important;
    color: #f8fafc !important;
    box-shadow: none;
    min-height: 42px;
    padding: 0 .9rem;
    font-size: .96rem;
}

.playlist-page-card .playlist-hero-search .playlist-search-input::placeholder,
.playlist-page-list .playlist-hero-search .playlist-search-input::placeholder {
    color: rgba(226, 232, 240, .72) !important;
}

.playlist-page-card .playlist-hero-search .playlist-search-input:focus,
.playlist-page-list .playlist-hero-search .playlist-search-input:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.playlist-page-card .playlist-hero-search .input-group-btn,
.playlist-page-list .playlist-hero-search .input-group-btn {
    padding: 0 !important;
}

.playlist-page-card .playlist-search-btn,
.playlist-page-list .playlist-search-btn {
    border-radius: 10px !important;
    padding: .35rem .9rem !important;
    border: 0 !important;
    font-size: .72rem !important;
    letter-spacing: .05em;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 4px 10px rgba(34, 197, 94, .3);
    text-transform: uppercase;
    align-self: center;
}

.playlist-page-card .playlist-search-btn:hover,
.playlist-page-list .playlist-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(34, 197, 94, .35);
}

.playlist-page-card .playlist-total-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .65rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .25);
    color: #e2e8f0;
    font-weight: 700;
    font-size: .76rem;
    border: 1px solid rgba(148, 163, 184, .35);
    margin-top: .75rem;
}

.playlist-page-card .playlist-search-input {
    border: 1px solid #dce3ef;
    border-radius: 13px;
    color: #2f3440 !important;
    background: #f8fbff;
    min-height: 42px;
}

.playlist-page-card .playlist-grid {
    margin-left: -8px;
    margin-right: -8px;
}
.playlist-page-card .playlist-grid > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}
.playlist-page-card .playlist-panel {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    overflow: visible;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
    background: #fff;
    transition: .2s ease;
    margin-bottom: 14px;
}

.playlist-page-card .playlist-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px rgba(15, 23, 42, .14);
}

.playlist-page-card .playlist-panel .playlist-card-head {
    background: #fff !important;
    color: #0f172a;
    border-bottom: 1px solid #e9eef5 !important;
    box-shadow: none;
    padding: .88rem .95rem;
    overflow: visible !important;
    border-radius: 18px 18px 0 0 !important;
}

.playlist-page-card .playlist-panel .playlist-head-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .8rem;
}

.playlist-page-card .playlist-panel .playlist-head-title-area {
    flex: 1;
    min-width: 0;
}

.playlist-page-card .playlist-panel .card-title {
    margin: 0;
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.playlist-page-card .playlist-panel .playlist-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    font-size: 1.1rem;
    letter-spacing: -.01em;
    color: #0f172a;
}

.playlist-page-card .playlist-panel .card-header .text-right {
    display: flex;
    gap: .3rem;
    justify-content: flex-end;
    align-items: center;
}

.playlist-page-card .playlist-panel .playlist-icon-btn {
    margin: 0;
    border-radius: 11px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #f1f5fb;
    color: #334155 !important;
    text-decoration: none !important;
    transition: .18s ease;
}

.playlist-page-card .playlist-panel .playlist-icon-btn:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.playlist-page-card .playlist-panel .card-body {
    padding: 1rem;
}

.playlist-page-card .playlist-panel .playlist-content .playlist-content-block {
    margin-bottom: 0;
    padding: 0 !important;
    max-width: unset !important;
    flex: 0 0 auto !important;
}

.playlist-page-card .playlist-panel .playlist-content .playlist-content-block .card {
    border: 1px solid #e9eef6;
    border-radius: 14px;
    box-shadow: 0 8px 16px rgba(15, 23, 42, .08);
    overflow: hidden;
    margin: 0 !important;
}

.playlist-page-card .playlist-panel .content-image,
.playlist-page-card .playlist-panel .play-video {
    border-radius: 0 !important;
}

.playlist-page-card .playlist-panel .overlay {
    background: linear-gradient(to bottom, rgba(15, 23, 42, .62), rgba(15, 23, 42, .15));
}

.playlist-page-card .playlist-panel .edit-duration {
    font-weight: 700;
    color: #2563eb;
}

.playlist-page-card .playlist-panel .row > .btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: .74rem;
    padding: .45rem .65rem !important;
    letter-spacing: .01em;
    margin-top: .2rem;
}

.playlist-page-card .playlist-panel .add-playlist-content-screen {
    border-radius: 10px;
}

.playlist-page-card .playlist-panel .playlist-meta {
    color: #64748b;
    font-size: .8rem;
    margin-top: .6rem;
    max-width: 100%;
    padding-top: .45rem;
    border-top: 1px dashed #d8e1ef;
}

.playlist-page-card .playlist-panel .playlist-meta i {
    color: #f59e0b;
    font-size: 22px;
    vertical-align: -5px;
}

.playlist-page-card .playlist-panel .playlist-screen-names {
    font-weight: 500;
}

.playlist-page-card .playlist-panel .playlist-name-wrap {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .1rem;
}

.playlist-page-card .playlist-panel .playlist-screen-list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    max-width: calc(100% - 72px);
    vertical-align: middle;
}

.playlist-page-card .playlist-panel .playlist-screen-label {
    font-size: 20px;
    color: #64748b;
    vertical-align: -5px;
    margin-right: 2px;
}

.playlist-page-card .playlist-panel .playlist-screen-chip {
    display: inline-flex;
    align-items: center;
    max-width: 160px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eef3fa;
    color: #334155;
    font-size: .74rem;
    font-weight: 600;
    border: 1px solid #d3deee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-page-card .playlist-panel .playlist-screens-hidden {
    display: none;
}

.playlist-page-card .playlist-panel .playlist-screens-more {
    font-size: .74rem;
    font-weight: 600;
    color: #2563eb;
    margin-left: 4px;
    white-space: nowrap;
}

.playlist-page-card .playlist-panel .playlist-actions {
    border-top: 1px solid #edf1f7;
    margin-top: .72rem;
    padding-top: .75rem;
    gap: .5rem;
}

.playlist-page-card .playlist-panel .playlist-actions .btn {
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .5rem .84rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

.screen-picker-modal .modal-dialog {
    max-width: 480px;
}

.screen-picker-modal .modal-header {
    background: linear-gradient(135deg, #0b1220 0%, #1f3356 100%);
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.25rem;
    border: 0;
}

.screen-picker-modal .modal-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.screen-picker-modal .modal-header .close {
    color: #fff;
    opacity: .7;
    text-shadow: none;
}

.screen-picker-modal .modal-body {
    padding: 0;
}

.screen-picker-modal .screen-search-wrap {
    padding: .75rem 1rem;
    border-bottom: 1px solid #edf2f8;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.screen-picker-modal .screen-search-input {
    border: 1px solid #d1dbe8;
    border-radius: 10px;
    min-height: 40px;
    background: #f8fbff;
    padding-left: 2.4rem;
}

.screen-picker-modal .screen-search-icon {
    position: absolute;
    left: 1.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 18px;
}

.screen-picker-modal .screen-list {
    max-height: 320px;
    overflow-y: auto;
    padding: .35rem 0;
}

.screen-picker-modal .screen-list::-webkit-scrollbar { width: 5px; }
.screen-picker-modal .screen-list::-webkit-scrollbar-thumb {
    background: #c8d4e4;
    border-radius: 99px;
}

.screen-picker-modal .screen-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .72rem 1.1rem;
    cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid #f3f5f9;
}

.screen-picker-modal .screen-item:last-child {
    border-bottom: 0;
}

.screen-picker-modal .screen-item:hover {
    background: #f4f8ff;
}

.screen-picker-modal .screen-item.is-checked {
    background: #eef5ff;
}

.screen-picker-modal .screen-item-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid #c8d4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .15s;
}

.screen-picker-modal .screen-item.is-checked .screen-item-check {
    background: #2563eb;
    border-color: #2563eb;
}

.screen-picker-modal .screen-item.is-checked .screen-item-check::after {
    content: "✓";
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.screen-picker-modal .screen-item-name {
    font-size: .9rem;
    font-weight: 600;
    color: #1e293b;
}

.screen-picker-modal .screen-item-code {
    font-size: .76rem;
    color: #64748b;
    margin-top: .1rem;
}

.screen-picker-modal .screen-item-tags {
    margin-left: auto;
    font-size: .7rem;
    color: #64748b;
    background: #f1f5fb;
    border: 1px solid #dce5f0;
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}

.screen-picker-modal .modal-footer {
    padding: .75rem 1rem;
    border-top: 1px solid #edf2f8;
    gap: .5rem;
}

.screen-picker-modal .btn-save-screens {
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    min-width: 110px;
}

.playlist-page-card .playlist-page-btn {
    border-radius: 11px !important;
    font-weight: 700;
    border: 0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .15);
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .04em;
}

.playlist-page-card .playlist-panel .content-image {
    height: 140px;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #edf1f7;
}

.playlist-page-card .playlist-panel .playlist-content-block > p {
    font-size: .78rem;
    color: #475569;
    margin-bottom: 0;
}

.playlist-page-card .playlist-panel .playlist-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
    margin: 0;
}

.playlist-page-card .playlist-panel .playlist-content-meta {
    text-align: center;
    padding: .55rem .2rem 0;
}

.playlist-page-card .playlist-panel .playlist-content-title {
    font-size: .82rem;
    line-height: 1.35;
    color: #334155;
    margin: .35rem 0 0;
    min-height: 2.2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.playlist-page-card .playlist-panel .edit-duration.btn.btn-link {
    margin: 0;
    padding: .2rem .52rem;
    border-radius: 8px;
    border: 1px solid #c8d4e8;
    background: #f8fbff;
    text-decoration: none;
}

.playlist-page-card .playlist-panel .duration-label {
    display: block;
    font-size: .7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .1rem;
}

@media (max-width: 991.98px) {
    .playlist-page-card .playlist-hero {
        padding: .9rem;
    }

    .playlist-page-card .playlist-panel .playlist-card-head {
        padding: .7rem;
    }
}

@media (max-width: 767.98px) {
    .playlist-page-card .playlist-hero-title {
        font-size: 1.26rem;
    }

    .playlist-page-card .playlist-hero-subtitle {
        font-size: .88rem;
    }

    .playlist-page-card .playlist-search-input {
        min-height: 42px;
        font-size: 16px;
    }

    .playlist-page-card .card-header .text-right a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        min-height: 38px;
        padding: .35rem;
    }

    .playlist-page-card .playlist-panel .card-body {
        padding: .75rem;
    }

    .playlist-page-card .playlist-hero-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .playlist-page-card .playlist-hero-controls {
        width: 100%;
    }

    .playlist-page-card .playlist-hero-buttons {
        justify-content: flex-start;
        margin-bottom: .55rem;
    }

    .playlist-page-card .playlist-hero-search {
        width: 100%;
        margin-top: 0;
    }

    .playlist-page-card .playlist-search-btn {
        min-width: 82px;
    }

    .playlist-page-card .playlist-panel .playlist-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .playlist-page-card .playlist-panel .playlist-content {
        grid-template-columns: 1fr;
    }

    .playlist-page-card .playlist-panel .playlist-actions {
        flex-wrap: nowrap;
        gap: .35rem;
    }

    .playlist-page-card .playlist-panel .playlist-actions .btn {
        flex: 1;
        padding: .45rem .3rem !important;
        font-size: .68rem;
        letter-spacing: 0;
    }
}

/* =========================================================================
   playlistList.blade.php  (scoped via .playlist-page-list)
   ========================================================================= */
.playlist-page-list .playlist-hero {
    background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
    border: 0;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 16px 16px rgba(180, 83, 9, .18);
}

.playlist-page-list .playlist-hero-title {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.playlist-page-list .playlist-hero-subtitle {
    margin: .3rem 0 0;
    color: rgba(248, 250, 252, .82);
    font-size: .95rem;
}

.playlist-page-list .playlist-toolbar {
    background: #fff;
    border: 1px solid #eceff5;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(27, 34, 53, .06);
    padding: .9rem 1rem;
    margin-bottom: 1rem;
}

.playlist-page-list .playlist-search-input {
    border: 1px solid #dce3ef;
    border-radius: 12px;
    color: #2f3440 !important;
    background: #f9fbff;
    min-height: 40px;
}

.playlist-page-list .playlist-search-input::placeholder {
    color: #8a91a3 !important;
}

.playlist-page-list .playlist-card {
    border: 1px solid #eceff5;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(27, 34, 53, .08);
    overflow: hidden;
}

.playlist-page-list .playlist-table thead th {
    border-bottom: 1px solid #eceff5;
    background: #f8faff;
    color: #61697d;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.playlist-page-list .playlist-table tbody tr:hover {
    background: #fcfdff;
}

.playlist-page-list .playlist-name {
    font-size: .95rem;
    font-weight: 700;
    color: #262c39;
}

.playlist-page-list .playlist-pill {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .72rem;
    border-radius: 999px;
    padding: .2rem .5rem;
    border: 1px solid #9dd6ff;
    background: #e8f5ff;
    color: #1b618f;
}

.playlist-page-list .playlist-empty {
    padding: 3rem 1rem;
    text-align: center;
}

@media (max-width: 991.98px) {
    .playlist-page-list .playlist-toolbar .nav-tabs {
        border-bottom: 0;
    }

    .playlist-page-list .playlist-toolbar .nav-tabs .nav-link {
        padding: .5rem .7rem;
        font-size: .9rem;
    }

    .playlist-page-list .playlist-hero {
        padding: .9rem;
    }
}

@media (max-width: 767.98px) {
    .playlist-page-list .playlist-hero-title {
        font-size: 1.2rem;
    }

    .playlist-page-list .playlist-hero-subtitle {
        font-size: .88rem;
    }

    .playlist-page-list .playlist-toolbar {
        padding: .75rem;
    }

    .playlist-page-list .playlist-search-input {
        min-height: 42px;
        font-size: 16px;
    }

    .playlist-page-list .playlist-table thead {
        display: none;
    }

    .playlist-page-list .playlist-table,
    .playlist-page-list .playlist-table tbody,
    .playlist-page-list .playlist-table tr,
    .playlist-page-list .playlist-table td {
        display: block;
        width: 100%;
    }

    .playlist-page-list .playlist-table tr.playlist-info-row {
        border-bottom: 1px solid #eceff5;
        padding: .4rem 0;
    }

    .playlist-page-list .playlist-table tr.playlist-info-row td {
        text-align: left !important;
        padding: .45rem .85rem !important;
        white-space: normal !important;
    }

    .playlist-page-list .playlist-table tr.playlist-info-row td.td-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .45rem;
    }

    .playlist-page-list .playlist-table tr.playlist-info-row td.td-actions .btn {
        min-height: 36px;
        min-width: 36px;
        padding: .42rem .5rem;
    }

    .playlist-page-list .playlist-table tr.content-row td,
    .playlist-page-list .playlist-table tr.playlist-screens td {
        padding: .6rem !important;
    }

    .playlist-page-list .playlist-content .playlist-content-block {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .playlist-page-list .playlist-content .playlist-content-block {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .playlist-page-list .screens-list-view .btn {
        margin-bottom: .35rem;
    }
}

/* ==========================================================================
   Reusable page hero (design-system standard header, derived from playlists)
   Use on any revamped page: .page-hero > .page-hero-layout
   ========================================================================== */
.page-hero {
    background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
    border: 0;
    border-radius: 12px;
    padding: 1.35rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: 0 16px 16px rgba(180, 83, 9, .18);
    position: relative;
    overflow: hidden;
}
.page-hero:before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -50px;
    top: -65px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(56, 189, 248, .35), rgba(56, 189, 248, 0));
}
.page-hero-layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
    position: relative;
    z-index: 1;
}
.page-hero-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
    letter-spacing: -.02em;
}
.page-hero-subtitle {
    margin: .4rem 0 .5rem;
    color: rgba(248, 250, 252, .82);
    font-size: .96rem;
    max-width: 680px;
}
.page-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .65rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .25);
    color: #e2e8f0;
    font-weight: 700;
    font-size: .76rem;
    border: 1px solid rgba(148, 163, 184, .35);
    margin-top: .75rem;
}
.page-hero-head {
    min-width: 0;
}
.page-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
    flex-shrink: 0;
    width: 340px;
    max-width: 100%;
}
.page-hero-aside .page-hero-search {
    width: 100%;
    flex: none;
    min-width: 0;
}
.page-hero-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 1.1rem;
    position: relative;
    z-index: 1;
}
.page-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
.page-hero-buttons .page-action,
.page-hero-buttons .btn {
    margin: 0;
}
.page-hero-btn {
    border-radius: 11px !important;
    font-weight: 700 !important;
    border: 0 !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .12);
    text-transform: uppercase;
    font-size: .68rem !important;
    letter-spacing: .03em;
    padding: .5rem .8rem !important;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.page-hero-search {
    flex: 1 1 280px;
    min-width: 200px;
}
.page-hero-search .input-group {
    background: rgba(15, 23, 42, .42);
    border: 1px solid rgba(148, 163, 184, .42);
    border-radius: 14px;
    padding: 5px 5px 5px 8px;
    box-shadow: 0 6px 16px rgba(2, 6, 23, .18);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    flex-wrap: nowrap;
}
.page-hero-search .input-group:focus-within {
    border-color: rgba(56, 189, 248, .68);
    background: rgba(15, 23, 42, .58);
    box-shadow: 0 12px 28px rgba(2, 6, 23, .35), 0 0 0 2px rgba(56, 189, 248, .18);
}
.page-hero-search .page-hero-search-input {
    background: transparent;
    border: 0;
    border-radius: 10px !important;
    color: #f8fafc !important;
    box-shadow: none;
    min-height: 42px;
    padding: 0 .9rem;
    font-size: .96rem;
}
.page-hero-search .page-hero-search-input::placeholder {
    color: rgba(226, 232, 240, .72) !important;
}
.page-hero-search .page-hero-search-input:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.page-hero-search .input-group-btn {
    padding: 0 !important;
}
.page-hero-search-btn {
    border-radius: 10px !important;
    padding: .35rem .9rem !important;
    border: 0 !important;
    font-size: .72rem !important;
    letter-spacing: .05em;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 4px 10px rgba(34, 197, 94, .3);
    text-transform: uppercase;
    align-self: center;
    color: #fff !important;
}
.page-hero-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(34, 197, 94, .35);
}
/* Segmented view toggle (List / Card) */
.page-view-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(15, 23, 42, .42);
    border: 1px solid rgba(148, 163, 184, .42);
    border-radius: 14px;
    padding: 4px;
    gap: 2px;
    flex-shrink: 0;
}
.page-view-toggle a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .42rem .8rem;
    border-radius: 10px;
    color: rgba(226, 232, 240, .85) !important;
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: .15s ease;
    white-space: nowrap;
}
.page-view-toggle a i {
    font-size: 16px;
}
.page-view-toggle a.active {
    background: #fff;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(2, 6, 23, .22);
}

/* ==========================================================================
   Reusable branded modal (.app-modal) — design-system standard popup
   ========================================================================== */
.app-modal .modal-dialog {
    max-width: 460px;
}
.app-modal .modal-content {
    border-radius: 14px;
    border: 0;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .35);
}
.app-modal .modal-header {
    background: linear-gradient(135deg, #0b1220 0%, #1f3356 100%);
    border: 0;
    padding: 1rem 1.25rem;
    align-items: center;
}
.app-modal .modal-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
.app-modal .modal-title .material-icons {
    font-size: 20px;
}
.app-modal .modal-header .close {
    color: #fff;
    opacity: .8;
    text-shadow: none;
    font-size: 1.4rem;
    margin: 0;
    padding: 0;
    transition: .15s ease;
}
.app-modal .modal-header .close:hover {
    opacity: 1;
}
.app-modal .modal-body {
    padding: 1.35rem 1.25rem .5rem;
}
.app-modal .form-group {
    margin-bottom: 1.1rem;
}
.app-modal .control-label {
    display: block;
    position: static;
    font-weight: 600;
    color: #334155;
    font-size: .82rem;
    margin-bottom: .4rem;
}
.app-modal .form-control {
    border: 1px solid #dce3ef !important;
    border-radius: 12px !important;
    background-color: #f8fbff !important;
    background-image: none !important;
    min-height: 44px;
    padding: .5rem .9rem !important;
    color: #0f172a !important;
    box-shadow: none !important;
    font-size: .92rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.app-modal .form-control::placeholder {
    color: #94a3b8;
}
.app-modal .form-control:focus {
    border-color: #2563eb !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
.app-modal .modal-hint {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .78rem;
    font-weight: 600;
    margin-top: .45rem;
}
.app-modal .modal-hint .material-icons {
    font-size: 15px;
}
.app-modal .modal-footer {
    border-top: 1px solid #edf2f8;
    padding: .85rem 1.25rem;
    gap: .5rem;
    justify-content: flex-end;
}
.app-modal .modal-footer .btn {
    border-radius: 10px !important;
    font-weight: 700;
    font-size: .8rem;
    padding: .55rem 1.05rem !important;
    min-width: 104px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    margin: 0;
}
.app-modal .modal-footer .btn .material-icons {
    font-size: 17px;
}
.app-modal .modal-footer .btn-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}
.app-modal .modal-footer .btn-secondary:hover {
    background: #e2e8f0 !important;
}

/* Reusable checkbox list (used in modals across the app: screen/playlist pickers) */
.cm-screen-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cm-screen-list::-webkit-scrollbar { width: 6px; }
.cm-screen-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.cm-screen-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .5rem .6rem;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 400;
    transition: background .15s ease;
}
.cm-screen-row + .cm-screen-row {
    border-top: 1px solid #f1f5f9;
}
.cm-screen-row:hover {
    background: #f4f8ff;
    border-color: transparent;
}
.cm-screen-row:has(.cm-screen-check:checked) {
    background: #eef4fb;
}
.cm-screen-check {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: #2563eb;
    cursor: pointer;
}
.cm-screen-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #334155;
    font-size: .86rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cm-screen-code {
    flex: 0 0 auto;
    margin-left: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 7px;
}
.cm-screen-empty {
    color: #94a3b8;
    font-size: .82rem;
    padding: .55rem;
}

/* ==========================================================================
   Screens page (shared by screenCard + screenList via .screens-page)
   ========================================================================== */
.screens-page .screen-grid {
    margin-left: -8px;
    margin-right: -8px;
}
.screens-page .screen-grid > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
}
.screens-page .screen-panel {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
    background: #fff;
    transition: .2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.screens-page .screen-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px rgba(15, 23, 42, .14);
}
.screens-page .screen-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .6rem;
    padding: .9rem .95rem;
    border-bottom: 1px solid #e9eef5;
}
.screens-page .screen-head-titles {
    min-width: 0;
    flex: 1;
}
.screens-page .screen-card-title {
    margin: 0;
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.screens-page .screen-card-code {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .25rem;
    font-size: .76rem;
    color: #64748b;
}
.screens-page .screen-card-code .code-chip {
    font-weight: 700;
    color: #334155;
    background: #f1f5fb;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1px 8px;
}
.screens-page .screen-version-warn {
    color: #dc2626;
    font-weight: 600;
}
.screens-page .screen-head-actions {
    display: flex;
    gap: .3rem;
    align-items: center;
}
.screens-page .screen-icon-btn {
    margin: 0;
    border-radius: 11px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #f1f5fb;
    color: #334155 !important;
    text-decoration: none !important;
    transition: .18s ease;
    border: 0;
    padding: 0;
}
.screens-page .screen-icon-btn i {
    font-size: 19px;
}
.screens-page .screen-icon-btn:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}
.screens-page .screen-icon-btn.is-danger:hover {
    background: #fee2e2;
    color: #dc2626 !important;
}
.screens-page .screen-card-body {
    padding: .55rem .95rem .85rem;
    flex: 1;
}
.screens-page .screen-meta-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: #475569;
    padding: .32rem 0;
    border-bottom: 1px dashed #eef2f8;
}
.screens-page .screen-meta-row:last-child {
    border-bottom: 0;
}
.screens-page .screen-meta-row > i {
    font-size: 19px;
    color: #94a3b8;
    flex-shrink: 0;
}
.screens-page .screen-meta-label {
    color: #94a3b8;
    font-weight: 600;
    margin-right: .15rem;
}
.screens-page .screen-meta-value {
    color: #334155;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.screens-page .screen-meta-value.is-empty {
    color: #94a3b8;
    font-weight: 400;
    font-style: italic;
}
.screens-page .screen-meta-edit {
    margin-left: auto;
    color: #2563eb !important;
    background: transparent;
    border: 0;
    padding: 2px;
    display: inline-flex;
    cursor: pointer;
}
.screens-page .screen-meta-edit i {
    font-size: 18px;
}
.screens-page .screen-meta-add {
    color: #2563eb !important;
    font-weight: 700;
    background: transparent;
    border: 0;
    padding: 2px 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
}
.screens-page .screen-tag-chip {
    display: inline-block;
    max-width: 100%;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eef3fa;
    color: #334155;
    font-size: .72rem;
    font-weight: 600;
    border: 1px solid #d3deee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.screens-page .screen-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none !important;
}
.screens-page .screen-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.screens-page .screen-status.is-active {
    background: #dcfce7;
    color: #15803d !important;
    border: 1px solid #bbf7d0;
}
.screens-page .screen-status.is-active .status-dot {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}
.screens-page .screen-status.is-inactive {
    background: #f1f5f9;
    color: #64748b !important;
    border: 1px solid #e2e8f0;
}
.screens-page .screen-status.is-inactive .status-dot {
    background: #94a3b8;
}
/* Inline playlist/channel editor inside a card */
.screens-page .playlist-screen {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px dashed #d8e1ef;
}
.screens-page .playlist-screen .select-playlist {
    border: 1px solid #e9eef6 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    background: #f8fbff;
}
.screens-page .playlist-screen .select-playlist span {
    font-size: .82rem;
    color: #334155;
}
.screens-page .playlist-screen .btn {
    border-radius: 10px;
    font-weight: 700;
    font-size: .72rem;
    margin-top: .3rem;
}
.screens-page .screen-card-foot {
    border-top: 1px solid #edf1f7;
    padding: .7rem .95rem;
    display: flex;
    gap: .5rem;
    align-items: center;
}
.screens-page .screen-card-foot form {
    margin: 0;
}
.screens-page .screen-card-foot .btn {
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: .01em;
    font-size: .74rem;
    padding: .5rem .8rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    margin: 0;
}
/* Utility cards (restyled signage-player / add-screen) */
.screens-page .screen-utility {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.6rem 1rem;
    border-style: dashed;
}
.screens-page .screen-utility .screen-utility-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e3eafc 60%, #d1e3fa 100%);
    color: #23426e;
    margin-bottom: .75rem;
}
.screens-page .screen-utility .screen-utility-icon i {
    font-size: 26px;
}
.screens-page .screen-utility h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 .9rem;
}
.screens-page .screen-utility .btn {
    border-radius: 10px;
    font-weight: 700;
    font-size: .74rem;
    padding: .5rem 1.1rem !important;
}

/* ----- List view (.screens-page-list) ----- */
.screens-page-list .screen-table-card {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
    background: #fff;
    overflow: hidden;
}
.screens-page-list .screen-table-card .card-body {
    padding: .5rem .5rem 0;
}
/* Bulk-action header bar inside the table card */
.screens-page-list .screen-table-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #e9eef5;
    background: #f8fbff;
}
.screens-page-list .screen-table-head-info {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.screens-page-list .screen-table-head-info > i {
    font-size: 20px;
    color: #2563eb;
}
.screens-page-list .screen-table-head-title {
    font-size: .95rem;
    font-weight: 700;
    color: #0f172a;
}
.screens-page-list .bulk-toolbar-hint {
    color: #94a3b8;
    font-size: .76rem;
}
.screens-page-list .screen-table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}
.screens-page-list .screen-table-actions form {
    margin: 0;
}
.screens-page-list .bulk-action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 10px;
    font-size: .74rem;
    font-weight: 700;
    padding: .45rem .8rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: .15s ease;
}
.screens-page-list .bulk-action i {
    font-size: 18px;
}
.screens-page-list .bulk-action:not([disabled]):hover {
    background: #eef2f8;
    border-color: #cbd5e1;
}
.screens-page-list .bulk-action.is-danger:not([disabled]):hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626 !important;
}
.screens-page-list .bulk-action-icon {
    padding: .45rem;
    width: 34px;
    justify-content: center;
}
.screens-page-list .bulk-action-icon i {
    font-size: 19px;
}

/* ==========================================================================
   Video Wall page (.video-wall-page)
   ========================================================================== */
.video-wall-page .card {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
    background: #fff;
    overflow: hidden;
    height: 100%;
    margin-bottom: 1.5rem;
}
.video-wall-page .btn {
    border-radius: 10px;
}
.video-wall-page .vw-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid #e9eef5;
    background: #fff;
}
.video-wall-page .vw-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.video-wall-page .vw-card-title i {
    color: #2563eb;
    font-size: 20px;
}
.video-wall-page .vw-screen-list {
    padding: .4rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Custom clean rows — deliberately NOT using Material .form-check */
.video-wall-page .vw-screen-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .55rem .65rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 400;
    transition: background .15s ease;
}
.video-wall-page .vw-screen-row:hover {
    background: #f4f8ff;
}
.video-wall-page .vw-screen-row:has(.vw-checkbox:checked) {
    background: #eef3fa;
}
.video-wall-page .vw-checkbox {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: #2563eb;
    cursor: pointer;
}
.video-wall-page .vw-screen-code {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: .72rem;
    color: #334155;
    background: #f1f5fb;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 8px;
    letter-spacing: .01em;
}
.video-wall-page .vw-screen-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #475569;
    font-size: .86rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video-wall-page .vw-card-foot {
    padding: .75rem 1.1rem;
    border-top: 1px solid #edf1f7;
}
.video-wall-page .vw-card-foot .btn {
    font-weight: 700;
}
.video-wall-page .vw-empty {
    text-align: center;
    padding: 2.75rem 1rem;
}
.video-wall-page .vw-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3eafc 60%, #d1e3fa 100%);
    color: #23426e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.video-wall-page .vw-empty-icon i {
    font-size: 30px;
}
.video-wall-page .vw-empty h4 {
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 .4rem;
}
.video-wall-page .vw-empty p {
    color: #64748b;
    max-width: 540px;
    margin: 0 auto 1rem;
    font-size: .9rem;
    line-height: 1.55;
}

/* ==========================================================================
   Billing — Add Address (.billing-address-page)
   ========================================================================== */
.billing-address-page .card {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
    background: #fff;
    overflow: hidden;
}
.billing-address-page .ba-card {
    margin-bottom: 1.25rem;
}
.billing-address-page .ba-card-head {
    background: #fff;
    border-bottom: 1px solid #e9eef5;
    padding: 1rem 1.25rem;
}
.billing-address-page .ba-card-head .card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.billing-address-page .ba-card-head .card-title i {
    color: #2563eb;
    font-size: 20px;
}
.billing-address-page .ba-card-head .card-category {
    margin: .25rem 0 0;
    color: #64748b;
    font-size: .82rem;
}
.billing-address-page .card-body {
    padding: 1.25rem;
}
.billing-address-page .form-group {
    display: flex !important;
    flex-direction: column;
    margin-bottom: 1.5rem;
    padding-left: 12px;
    padding-right: 12px;
}
.billing-address-page .form-group > label,
.billing-address-page .form-group label[class*="bmd-label"] {
    display: block !important;
    position: static !important;
    pointer-events: auto !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    will-change: auto !important;
    font-weight: 600;
    color: #334155 !important;
    font-size: .8rem !important;
    line-height: 1.2;
    margin: 0 0 .55rem !important;
}
.billing-address-page .card-body .row {
    margin-left: -12px;
    margin-right: -12px;
}
.billing-address-page .form-control,
.billing-address-page select.form-control {
    border: 1px solid #dce3ef !important;
    border-radius: 12px !important;
    background-color: #f8fbff !important;
    background-image: none !important;
    min-height: 44px;
    padding: .5rem .9rem !important;
    color: #0f172a !important;
    box-shadow: none !important;
    font-size: .92rem;
    width: 100%;
}
.billing-address-page .form-control::placeholder {
    color: #94a3b8;
}
.billing-address-page .form-control:focus,
.billing-address-page select.form-control:focus {
    border-color: #2563eb !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
.billing-address-page .ba-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: .25rem;
}
.billing-address-page .ba-form-actions .btn {
    border-radius: 10px;
    font-weight: 700;
    padding: .55rem 1.4rem !important;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Saved address list */
.billing-address-page .ba-address-card {
    margin-bottom: 1rem;
}
.billing-address-page .ba-address-card.is-default {
    border-color: #bbf7d0;
    box-shadow: 0 16px 30px rgba(22, 163, 74, .10);
}
.billing-address-page .ba-address-body {
    padding: 1rem 1.15rem .6rem;
}
.billing-address-page .ba-address-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}
.billing-address-page .ba-address-name {
    font-weight: 700;
    color: #0f172a;
    font-size: .95rem;
}
.billing-address-page .ba-default-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px 2px 6px;
}
.billing-address-page .ba-default-badge i {
    font-size: 14px;
}
.billing-address-page .ba-address-lines {
    color: #475569;
    font-size: .84rem;
    line-height: 1.55;
    margin: 0 0 .55rem;
}
.billing-address-page .ba-address-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    border-top: 1px dashed #e2e8f0;
    padding-top: .55rem;
}
.billing-address-page .ba-address-meta span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #64748b;
    font-size: .78rem;
}
.billing-address-page .ba-address-meta i {
    font-size: 16px;
    color: #94a3b8;
}
.billing-address-page .ba-address-foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.15rem;
    border-top: 1px solid #edf1f7;
}
.billing-address-page .ba-address-foot .btn {
    border-radius: 10px;
    font-weight: 700;
    font-size: .74rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
}
.billing-address-page .ba-address-foot .btn-outline-secondary {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
}
.billing-address-page .ba-address-foot .btn-outline-secondary:hover {
    background: #eef2f8;
}
.billing-address-page .ba-empty {
    text-align: center;
    padding: 2.25rem 1rem;
}
.billing-address-page .ba-empty-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3eafc 60%, #d1e3fa 100%);
    color: #23426e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
}
.billing-address-page .ba-empty-icon i {
    font-size: 27px;
}
.billing-address-page .ba-empty h4 {
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 .35rem;
}
.billing-address-page .ba-empty p {
    color: #64748b;
    font-size: .86rem;
    margin: 0;
}

/* ==========================================================================
   Content Management (.content-page)
   ========================================================================== */
.content-page .content-section-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin: .5rem 0 .7rem;
}
.content-page .content-section-label i {
    font-size: 18px;
    color: #94a3b8;
}
/* Selection toolbar */
.content-page .content-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid #dce4f2;
    border-radius: 14px;
    padding: .55rem .7rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}
.content-page .content-selectall {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .4rem .7rem;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    background: #f1f5fb;
    border: 1px solid #e2e8f0;
}
.content-page .content-selectall input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #2563eb;
    cursor: pointer;
}
.content-page .content-toolbar-spacer {
    flex: 1 1 auto;
}
.content-page .content-selected-count {
    font-size: .78rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff4fb;
    border: 1px solid #dbe6f7;
    border-radius: 999px;
    padding: .25rem .7rem;
}
/* Ghost action buttons: neutral when idle, tinted when active, filled on hover */
.content-page .content-action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .01em;
    padding: .5rem .9rem;
    margin: 0;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    box-shadow: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.content-page .content-action i {
    font-size: 16px;
}
.content-page .content-action[disabled] {
    opacity: 1;
    color: #94a3b8;
    background: #f8fafc;
    border-color: #eef2f8;
    cursor: not-allowed;
}
.content-page .content-action-danger:not([disabled]) {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}
.content-page .content-action-danger:not([disabled]):hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.content-page .content-action-success:not([disabled]) {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.content-page .content-action-success:not([disabled]):hover {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}
.content-page .content-action-primary:not([disabled]) {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
}
.content-page .content-action-primary:not([disabled]):hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
/* Folders */
.content-page .content-folders {
    margin-left: -6px;
    margin-right: -6px;
    margin-bottom: .5rem;
}
.content-page .folder-card {
    background: #fff !important;
    border: 1px solid #dce4f2 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .06) !important;
    padding: .85rem .95rem !important;
    margin: 0 !important;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.content-page .folder-card:hover {
    background: #f4f8ff !important;
    border-color: #c7d7ef !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(15, 23, 42, .10) !important;
}
.content-page .folder-card .folder-text {
    font-size: .88rem;
    font-weight: 700;
    color: #0f172a;
}
.content-page .folder-card .material-icons.text-gray {
    color: #f59e0b !important;
}
.content-page .folder-card .dropdown-btn {
    color: #94a3b8 !important;
}
.content-page .folder-hover {
    background: #e6effb !important;
    border: 2px solid #2563eb !important;
}
/* Media grid */
.content-page .content-grid {
    margin-left: -8px;
    margin-right: -8px;
}
.content-page .content-grid > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 1rem;
}
/* Image-forward tiles: thumbnail fills the tile, actions + title overlay on top */
.content-page .content-media-card {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #0f172a !important;
    border: 1px solid #e9eef6 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, .08) !important;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .15s ease;
}
.content-page .content-media-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .18) !important;
}
.content-page .content-media-card:has(.content-checkbox:checked) {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .45), 0 14px 26px rgba(37, 99, 235, .18) !important;
}
/* Blurred backdrop fills the tile so nothing is cropped */
.content-page .content-media-card .content-media-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    filter: blur(18px) brightness(.55);
    transform: scale(1.15);
}
/* Actual media sits contained on top of the backdrop — full frame, never cut off */
.content-page .content-media-card .content-image,
.content-page .content-media-card video,
.content-page .content-media-card .play-video {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    float: none !important;
    border-radius: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    object-fit: contain;
    z-index: 1;
}
.content-page .content-media-card .play-icon {
    z-index: 4;
}
/* Media-type badge (top-left), hidden while hovering/selected to keep actions clear */
.content-page .content-media-card .content-type-badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 4;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .12rem .5rem .12rem .34rem;
    border-radius: 999px;
    background: rgba(2, 6, 23, .62);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.5;
    transition: opacity .18s ease;
}
.content-page .content-media-card .content-type-badge i {
    font-size: 13px;
    color: #fff;
}
.content-page .content-media-card:hover .content-type-badge,
.content-page .content-media-card:has(.content-checkbox:checked) .content-type-badge {
    opacity: 0;
}
/* Video duration chip (bottom-right, above the caption gradient) */
.content-page .content-media-card .content-duration {
    position: absolute;
    right: .5rem;
    bottom: 2.1rem;
    z-index: 4;
    display: none;
    padding: .1rem .42rem;
    border-radius: 6px;
    background: rgba(2, 6, 23, .72);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.5;
}
/* Top action bar (checkbox left, zoom/crop/trash right), aligned in one row */
.content-page .content-media-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    z-index: 3;
    padding: .5rem .55rem 1.4rem;
    background: linear-gradient(to bottom, rgba(2, 6, 23, .68), rgba(2, 6, 23, 0));
    opacity: 0;
    transition: opacity .18s ease;
}
.content-page .content-media-card:hover .overlay,
.content-page .content-media-card:has(.content-checkbox:checked) .overlay {
    opacity: 1;
}
.content-page .content-media-card .delete-content-form {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    margin: 0;
}
.content-page .content-media-card .content-tile-check {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 0 auto 0 0;
    accent-color: #2563eb;
    cursor: pointer;
}
.content-page .content-media-card .content-tile-action {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0;
    padding: 0 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    line-height: 1;
    color: #fff !important;
    transition: transform .15s ease;
}
.content-page .content-media-card .zoom-icon.content-tile-action {
    margin-left: auto;
}
.content-page .content-media-card .content-tile-action i {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1;
    top: 0;
    margin: 0;
}
.content-page .content-media-card .content-tile-action:hover {
    transform: scale(1.18);
}
/* Bottom caption / inline title, overlaid on a gradient */
.content-page .content-media-card .card__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 1.5rem .5rem .35rem;
    border-top: 0;
    background: linear-gradient(to top, rgba(2, 6, 23, .88) 15%, rgba(2, 6, 23, 0));
}
.content-page .content-media-card .card__bottom .update-image-title .row {
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
}
.content-page .content-media-card .card__bottom .update-image-title .col-10 {
    padding-left: 0;
    padding-right: .25rem;
}
.content-page .content-media-card .card__bottom .form-control {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: .78rem;
    font-weight: 600;
    min-height: 0;
    height: auto;
    line-height: 1.4;
    padding: .18rem .35rem !important;
}
.content-page .content-media-card .card__bottom .form-control::placeholder {
    color: rgba(255, 255, 255, .55);
}
.content-page .content-media-card .card__bottom .form-control:focus {
    background: rgba(255, 255, 255, .16) !important;
    border-radius: 7px;
}
.content-page .content-media-card .card__bottom .btn {
    color: #fff !important;
    padding: .15rem .3rem !important;
    line-height: 1.4;
    white-space: nowrap;
}
.content-page .content-media-card .card__bottom .form-control-static {
    color: #fff;
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    padding: .18rem .35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Upload dropzone tile — matches tile size */
.content-page .content-upload-card {
    aspect-ratio: 4 / 3;
    border: 2px dashed #c7d2e4 !important;
    border-radius: 14px !important;
    background: #f8fbff !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, background .15s ease;
}
.content-page .content-upload-card:hover {
    border-color: #2563eb !important;
    background: #eef4fc !important;
}
.content-page .content-upload-card .upload-file {
    padding: 0 !important;
}
.content-page .content-upload-card .card__heading {
    font-size: .9rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .6rem;
}
.content-page .content-upload-card .upload-tile {
    border-radius: 10px;
    font-weight: 700;
}
.content-page .content-upload-card label[for="Product Name"] {
    display: block;
    margin-top: .6rem;
    font-size: .72rem;
    color: #94a3b8;
}
.content-page .content-upload-card .cq-upload-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eef4fc;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .6rem;
}
.content-page .content-upload-card .cq-upload-icon i {
    font-size: 26px;
}

/* ==========================================================================
   AI Image Generator (.ai-page)
   ========================================================================== */
.ai-page .ai-card {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
    background: #fff;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.ai-page .ai-card-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9eef5;
    background: #fff;
}
.ai-page .ai-card-head .card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.ai-page .ai-card-head .card-title i {
    color: #7c3aed;
    font-size: 20px;
}
.ai-page .ai-card-head .card-category {
    margin: .25rem 0 0;
    color: #64748b;
    font-size: .82rem;
}
.ai-page .ai-card-body {
    padding: 1.35rem;
}
.ai-page .ai-label {
    display: block;
    font-weight: 600;
    color: #334155;
    font-size: .8rem;
    margin-bottom: .5rem;
}
.ai-page .form-control {
    border: 1px solid #dce3ef !important;
    border-radius: 12px !important;
    background-color: #f8fbff !important;
    background-image: none !important;
    padding: .6rem .9rem !important;
    color: #0f172a !important;
    box-shadow: none !important;
    font-size: .92rem;
}
.ai-page textarea.form-control {
    min-height: 92px;
    resize: vertical;
    text-align: left;
}
.ai-page .form-control:focus {
    border-color: #7c3aed !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .14) !important;
}
/* Aspect ratio selectable tiles */
.ai-page .ai-ratio-grid {
    display: flex;
    gap: .6rem;
}
.ai-page .ai-ratio {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .6rem .7rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fbff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.ai-page .ai-ratio:hover {
    border-color: #cbd5e1;
}
.ai-page .ai-ratio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.ai-page .ai-ratio:has(input:checked) {
    border-color: #7c3aed;
    background: #f5f0ff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}
.ai-page .ai-ratio-shape {
    flex: 0 0 auto;
    background: #cbd5e1;
    border-radius: 3px;
}
.ai-page .ai-ratio:has(input:checked) .ai-ratio-shape {
    background: #7c3aed;
}
.ai-page .ai-ratio-landscape { width: 34px; height: 20px; }
.ai-page .ai-ratio-portrait { width: 20px; height: 34px; }
.ai-page .ai-ratio-label {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-size: .82rem;
    font-weight: 700;
    color: #334155;
}
.ai-page .ai-ratio-label small {
    font-size: .68rem;
    font-weight: 600;
    color: #94a3b8;
}
/* Color palette */
.ai-page .ai-color-row {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.ai-page input[type="color"].ai-color {
    -webkit-appearance: none;
    appearance: none;
    width: 46px;
    height: 42px;
    padding: 3px !important;
    border: 1px solid #dce3ef !important;
    border-radius: 10px !important;
    background: #fff !important;
    cursor: pointer;
}
.ai-page input[type="color"].ai-color::-webkit-color-swatch-wrapper { padding: 0; }
.ai-page input[type="color"].ai-color::-webkit-color-swatch { border: 0; border-radius: 7px; }
.ai-page .ai-color-hint {
    font-size: .78rem;
    color: #94a3b8;
}
.ai-page .btn-reset-color {
    border-radius: 9px;
    font-weight: 700;
    font-size: .72rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    padding: .4rem .75rem;
}
.ai-page .btn-reset-color:hover { background: #eef2f8; }
.ai-page .ai-generate-btn {
    border-radius: 10px !important;
    font-weight: 700;
    padding: .6rem 1.4rem !important;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(124, 58, 237, .28);
    color: #fff !important;
}
.ai-page .ai-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(124, 58, 237, .35);
}
/* Preview panel */
.ai-page .ai-preview {
    height: 100%;
    min-height: 300px;
    border: 1px dashed #d3dbe9;
    border-radius: 14px;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
}
.ai-page .ai-preview img {
    max-width: 100%;
    max-height: 380px;
    border-radius: 10px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .35);
}
.ai-page .ai-preview-empty {
    text-align: center;
    color: #94a3b8;
}
.ai-page .ai-preview-empty i {
    font-size: 44px;
    color: #475569;
    margin-bottom: .5rem;
}
.ai-page .ai-preview-empty p {
    margin: 0;
    font-size: .86rem;
}
/* Generated images gallery */
.ai-page .content-section-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin: .5rem 0 .7rem;
}
.ai-page .content-section-label i {
    font-size: 18px;
    color: #94a3b8;
}
.ai-page .ai-gallery {
    margin-left: -8px;
    margin-right: -8px;
}
.ai-page .ai-gallery > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 1rem;
}
.ai-page .ai-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid #e9eef6;
    box-shadow: 0 8px 16px rgba(15, 23, 42, .08);
    transition: transform .2s ease, box-shadow .2s ease;
    display: block;
}
.ai-page .ai-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .18);
}
.ai-page .ai-tile .content-image {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    float: none !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.ai-page .ai-tile-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.4rem .6rem .5rem;
    background: linear-gradient(to top, rgba(2, 6, 23, .9) 12%, rgba(2, 6, 23, 0));
    color: #fff;
    font-size: .74rem;
    line-height: 1.35;
    opacity: 0;
    transition: opacity .18s ease;
}
.ai-page .ai-tile:hover .ai-tile-caption {
    opacity: 1;
}

/* ==========================================================================
   Music (.music-page)
   ========================================================================== */
.music-page .card {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
    background: #fff;
    overflow: hidden;
}
.music-page .music-card-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9eef5;
    background: #fff;
}
.music-page .music-card-head .card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.music-page .music-card-head .card-title i {
    color: #2563eb;
    font-size: 20px;
}
.music-page .card-body {
    padding: .5rem .5rem 0;
}
.music-page table.table {
    margin: 0;
}
.music-page table.table thead th {
    color: #64748b;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    border-top: 0;
    border-bottom: 1px solid #e9eef5;
    padding: .75rem .9rem;
}
.music-page table.table tbody td {
    vertical-align: middle;
    border-top: 1px solid #eef2f8;
    color: #334155;
    font-size: .86rem;
    padding: .65rem .9rem;
}
.music-page table.table tbody tr:hover {
    background: #f8fbff;
}
.music-page .update-image-title .form-control {
    border: 1px solid #dce3ef !important;
    border-radius: 10px !important;
    background: #f8fbff !important;
    background-image: none !important;
    box-shadow: none !important;
    min-height: 40px;
    padding: .35rem .7rem !important;
    color: #0f172a !important;
    font-size: .86rem;
}
.music-page .update-image-title .form-control:focus {
    border-color: #2563eb !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
.music-page .update-image-title .btn {
    border-radius: 9px;
    font-weight: 700;
    font-size: .74rem;
}
.music-page audio {
    height: 40px;
    max-width: 100%;
    vertical-align: middle;
}
.music-page .music-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626 !important;
    cursor: pointer;
    transition: .15s ease;
    margin: 0;
}
.music-page .music-delete i {
    font-size: 18px;
}
.music-page .music-delete:hover {
    background: #dc2626;
    color: #fff !important;
    border-color: #dc2626;
}
.music-page .music-empty {
    text-align: center;
    padding: 2.75rem 1rem;
    width: 100%;
}
.music-page .music-empty-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3eafc 60%, #d1e3fa 100%);
    color: #23426e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.music-page .music-empty-icon i {
    font-size: 30px;
}
.music-page .music-empty h4 {
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 .35rem;
}
.music-page .music-empty p {
    color: #64748b;
    font-size: .88rem;
    margin: 0;
}

/* ==========================================================================
   URL Module (.url-page)
   ========================================================================== */
.url-page .url-grid {
    margin-left: -8px;
    margin-right: -8px;
}
.url-page .url-grid > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 1rem;
}
.url-page .url-card {
    height: 100%;
    border: 1px solid #dce4f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
}
.url-page .url-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, .14);
}
.url-page .url-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #e9eef5;
}
.url-page .url-card-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}
.url-page .url-card-title .url-favicon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #eef3fa;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.url-page .url-card-title .url-favicon i {
    font-size: 18px;
}
.url-page .url-card-title .url-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.url-page .url-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
}
.url-page .url-actions form {
    display: flex;
    gap: .3rem;
    margin: 0;
}
.url-page .url-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f1f5fb;
    color: #334155 !important;
    border: 0;
    cursor: pointer;
    text-decoration: none !important;
    transition: .15s ease;
}
.url-page .url-icon-btn i {
    font-size: 18px;
}
.url-page .url-icon-btn:hover {
    background: #e2e8f0;
}
.url-page .url-icon-btn.is-danger:hover {
    background: #fee2e2;
    color: #dc2626 !important;
}
.url-page .url-card-body {
    padding: 1rem;
    flex: 1 1 auto;
}
.url-page .url-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    background: #f8fbff;
    border: 1px solid #e9eef6;
    color: #334155 !important;
    font-size: .84rem;
    text-decoration: none !important;
    transition: .15s ease;
    word-break: break-all;
}
.url-page .url-link:hover {
    border-color: #c7d7ef;
    background: #eef4fc;
}
.url-page .url-link i {
    flex: 0 0 auto;
    font-size: 18px;
    color: #2563eb;
}
.url-page .url-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.url-page .url-empty {
    text-align: center;
    padding: 2.75rem 1rem;
}
.url-page .url-empty-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3eafc 60%, #d1e3fa 100%);
    color: #23426e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.url-page .url-empty-icon i {
    font-size: 30px;
}
.url-page .url-empty h4 {
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 .35rem;
}
.url-page .url-empty p {
    color: #64748b;
    font-size: .88rem;
    margin: 0 0 1rem;
}
/* Create / edit URL form */
.url-page .url-form-card .url-card-body {
    padding: 1.35rem;
}
.url-page .form-group {
    margin-bottom: 1.2rem;
}
.url-page .form-group > label {
    display: block;
    font-weight: 600;
    color: #334155;
    font-size: .8rem;
    margin-bottom: .5rem;
}
.url-page .form-control {
    border: 1px solid #dce3ef !important;
    border-radius: 12px !important;
    background-color: #f8fbff !important;
    background-image: none !important;
    min-height: 44px;
    padding: .5rem .9rem !important;
    color: #0f172a !important;
    box-shadow: none !important;
    font-size: .92rem;
    width: 100%;
}
.url-page .form-control:focus {
    border-color: #2563eb !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
.url-page .url-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid #e9eef6;
    border-radius: 12px;
    background: #f8fbff;
    margin-bottom: 1.25rem;
}
.url-page .url-toggle-row .url-toggle-title {
    display: block;
    font-weight: 700;
    color: #0f172a;
    font-size: .88rem;
}
.url-page .url-toggle-row p {
    margin: .1rem 0 0;
    color: #64748b;
    font-size: .8rem;
}
.url-page .url-toggle-row .togglebutton {
    flex: 0 0 auto;
}
.url-page .url-form-actions {
    display: flex;
    justify-content: flex-end;
}
.url-page .url-form-actions .btn {
    border-radius: 10px;
    font-weight: 700;
    padding: .55rem 1.4rem !important;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* ==========================================================================
   Questions Module (.questions-page)
   ========================================================================== */
.questions-page .questions-grid {
    margin-left: -8px;
    margin-right: -8px;
}
.questions-page .questions-grid > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 1rem;
}
.questions-page .question-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #dce4f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.questions-page .question-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, .14);
}
.questions-page .question-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #e9eef5;
}
.questions-page .question-card-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}
.questions-page .question-card-title .q-badge {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #eef3fa;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.questions-page .question-card-title .q-badge i {
    font-size: 18px;
}
.questions-page .question-card-title .q-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.questions-page .question-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
}
.questions-page .question-actions form {
    display: flex;
    gap: .3rem;
    margin: 0;
}
.questions-page .q-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f1f5fb;
    color: #334155 !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: .15s ease;
}
.questions-page .q-icon-btn i {
    font-size: 18px;
}
.questions-page .q-icon-btn:hover {
    background: #e2e8f0;
}
.questions-page .q-icon-btn.is-danger:hover {
    background: #fee2e2;
    color: #dc2626 !important;
}
/* Slide preview */
.questions-page .question-preview {
    position: relative;
    flex: 1 1 auto;
    min-height: 230px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #1e293b;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.questions-page .question-preview:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 23, .28), rgba(2, 6, 23, .5));
}
.questions-page .question-preview-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}
.questions-page .question-text {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1.1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.questions-page .question-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0 0 1rem;
}
.questions-page .question-icons img {
    width: 54px;
    height: 54px;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
}
.questions-page .question-logo img {
    max-height: 46px;
    max-width: 60%;
}
/* Empty state */
.questions-page .questions-empty {
    text-align: center;
    padding: 2.75rem 1rem;
}
.questions-page .questions-empty-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3eafc 60%, #d1e3fa 100%);
    color: #23426e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.questions-page .questions-empty-icon i {
    font-size: 30px;
}
.questions-page .questions-empty h4 {
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 .35rem;
}
.questions-page .questions-empty p {
    color: #64748b;
    font-size: .88rem;
    margin: 0 0 1rem;
}

/* ==========================================================================
   Create / Edit Question (.create-question-page)
   ========================================================================== */
.create-question-page .cq-card {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
    background: #fff;
    overflow: hidden;
}
.create-question-page .cq-card-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9eef5;
}
.create-question-page .cq-card-head .card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.create-question-page .cq-card-head .card-title i {
    color: #2563eb;
    font-size: 20px;
}
.create-question-page .cq-card-body {
    padding: 1.35rem;
}
.create-question-page .form-group {
    margin-bottom: 1.1rem;
}
.create-question-page .form-group > label,
.create-question-page .cq-label {
    display: block;
    font-weight: 600;
    color: #334155;
    font-size: .8rem;
    margin-bottom: .5rem;
}
.create-question-page .form-control {
    border: 1px solid #dce3ef !important;
    border-radius: 12px !important;
    background-color: #f8fbff !important;
    background-image: none !important;
    min-height: 44px;
    padding: .5rem .9rem !important;
    color: #0f172a !important;
    box-shadow: none !important;
    font-size: .92rem;
    width: 100%;
}
.create-question-page .form-control:focus {
    border-color: #2563eb !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
/* Timer checkbox row */
.create-question-page .cq-check-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .85rem;
    border: 1px solid #e9eef6;
    border-radius: 12px;
    background: #f8fbff;
    margin: 0;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    color: #334155;
}
.create-question-page .cq-check-row input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #2563eb;
    cursor: pointer;
}
/* Tabs */
.create-question-page #material-tabs {
    display: flex;
    gap: .35rem;
    border-bottom: 1px solid #e9eef5;
    margin-bottom: 1rem;
    padding-bottom: 0;
    position: relative;
}
.create-question-page #material-tabs a {
    padding: .55rem .95rem;
    font-size: .82rem;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}
.create-question-page #material-tabs a:hover {
    color: #334155;
}
.create-question-page #material-tabs a.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}
.create-question-page #material-tabs .yellow-bar {
    display: none;
}
.create-question-page .cart-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    margin: 0 0 .75rem;
}
/* Image picker tiles */
.create-question-page .tab-background,
.create-question-page .tab-logo {
    max-height: 300px;
    overflow-y: auto;
}
.create-question-page .playlist-content-block .card.card-container {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    margin: 0 !important;
}
.create-question-page .playlist-content-block:hover .card.card-container {
    border-color: #cbd5e1 !important;
}
.create-question-page .playlist-content-block:has(.content-checkbox:checked) .card.card-container {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .35) !important;
}
.create-question-page .playlist-content-block .content-image {
    height: 92px !important;
    border-radius: 0 !important;
    background-size: cover !important;
}
.create-question-page .playlist-content-block .overlay {
    height: 40px;
    background: linear-gradient(to bottom, rgba(2, 6, 23, .5), rgba(2, 6, 23, 0));
    opacity: 0;
    transition: opacity .15s ease;
}
.create-question-page .playlist-content-block:hover .overlay,
.create-question-page .playlist-content-block:has(.content-checkbox:checked) .overlay {
    opacity: 1;
}
/* Live preview slide */
.create-question-page .question-preview {
    position: relative;
    min-height: 340px;
    border-radius: 14px;
    overflow: hidden;
    padding: 1.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #1e293b;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    max-height: none !important;
}
.create-question-page .question-preview:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 23, .28), rgba(2, 6, 23, .5));
}
.create-question-page .question-preview > * {
    position: relative;
    z-index: 1;
}
.create-question-page .question-preview .question-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1.25rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.create-question-page .question-preview .question-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0 0 1.1rem;
}
.create-question-page .question-preview .question-icons img {
    width: 58px !important;
    height: 58px;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
}
.create-question-page .question-preview .question-logo img {
    max-height: 48px;
    max-width: 60%;
}
.create-question-page .cq-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: .5rem;
}
.create-question-page .cq-form-actions .btn {
    border-radius: 10px;
    font-weight: 700;
    padding: .55rem 1.4rem !important;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* ==========================================================================
   Edit Channel (.edit-channel-page)
   ========================================================================== */
.edit-channel-page .ec-card {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
    background: #fff;
    overflow: hidden;
}
.edit-channel-page .ec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid #e9eef5;
    background: #fff;
}
.edit-channel-page .update-channel-title {
    width: 100%;
    max-width: 360px;
    margin: 0;
}
.edit-channel-page .update-channel-title .ec-name-group {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.edit-channel-page .update-channel-title .form-control {
    border: 1px solid #dce3ef !important;
    border-radius: 10px !important;
    background: #f8fbff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #0f172a !important;
    font-weight: 700;
    font-size: .95rem;
    min-height: 40px;
    padding: .35rem .7rem !important;
}
.edit-channel-page .update-channel-title .form-control:focus {
    border-color: #2563eb !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
.edit-channel-page .update-channel-title .btn {
    border-radius: 9px;
    font-weight: 700;
    color: #2563eb !important;
}
/* Layout-part tabs */
.edit-channel-page .nav-tabs {
    border: 0;
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}
.edit-channel-page .nav-tabs .nav-item {
    margin: 0;
}
.edit-channel-page .nav-tabs .nav-link {
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .78rem;
    font-weight: 700;
    color: #64748b;
    background: #f8fafc;
    margin: 0;
}
.edit-channel-page .nav-tabs .nav-link.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.edit-channel-page .card-body {
    padding: 1.35rem;
}
/* Section content list */
.edit-channel-page .ec-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: #f8fbff;
    border: 1px solid #e9eef6;
    border-radius: 12px;
    padding: .7rem .85rem;
    margin: 0 0 .65rem;
}
.edit-channel-page .ec-section-info {
    min-width: 0;
}
.edit-channel-page .ec-section-name {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: #0f172a;
}
.edit-channel-page .ec-section-playlists {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    color: #64748b;
    margin-top: .15rem;
}
.edit-channel-page .ec-section-playlists .material-icons {
    font-size: 15px;
    color: #94a3b8;
}
.edit-channel-page .ec-section-playlists.is-empty {
    color: #ef4444;
}
.edit-channel-page .ec-section-playlists.is-empty .material-icons {
    color: #ef4444;
}
.edit-channel-page .ec-section-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 10px;
    font-weight: 700;
}
/* Preview */
.edit-channel-page .ec-preview {
    max-height: none;
}
.edit-channel-page .ec-preview-title {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin: 0 0 .6rem;
    text-align: left;
}
.edit-channel-page .channel-layout .channel-preview {
    border-radius: 14px !important;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}
.edit-channel-page .channel-layout .channel-preview > div {
    background-color: #e2e8f0 !important;
    border-radius: 14px;
    gap: 3px;
}
.edit-channel-page .channel-preview .zone {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cbd5e1;
    color: #475569;
    font-size: .74rem;
    font-weight: 700;
    border: 2px solid #fff;
    border-radius: 8px;
}
.edit-channel-page .channel-preview .zone.active {
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: #fff;
}
/* Layout picker radios in modal */
.app-modal .channels-orientation label {
    display: block;
    margin: 0;
    cursor: pointer;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: .5rem;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.app-modal .channels-orientation img {
    width: 100%;
    max-width: 120px;
    border-radius: 6px;
}
.app-modal .channels-orientation span {
    display: block;
    margin-top: .35rem;
    font-size: .78rem;
    font-weight: 700;
    color: #334155;
}
.app-modal .channels-orientation input {
    position: absolute;
    opacity: 0;
}
.app-modal .channels-orientation label:has(input:checked) {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* ==========================================================================
   Edit User (admin) — .edit-user-page
   ========================================================================== */
.edit-user-page .card {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
    background: #fff;
    overflow: hidden;
}
.edit-user-page .eu-card-head {
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #e9eef5;
    padding: 1rem 1.25rem;
    margin: 0 !important;
}
.edit-user-page .eu-card-head .card-title {
    color: #0f172a;
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
}
.edit-user-page .eu-card-head .card-category {
    color: #64748b !important;
    margin: 0;
}
.edit-user-page .btn {
    border-radius: 10px;
}
.edit-user-page .card-footer {
    border-top: 1px solid #edf1f7;
    background: #fff;
    padding: .85rem 1.25rem;
}
.edit-user-page .card-body:not(.pb-0) {
    padding-bottom: 1.35rem;
}
.edit-user-page .form-control {
    border: 1px solid #dce3ef !important;
    border-radius: 10px !important;
    background-color: #f8fbff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #0f172a !important;
    padding: .5rem .85rem !important;
    min-height: 42px;
}
.edit-user-page textarea.form-control {
    min-height: unset;
}
.edit-user-page .form-control:focus {
    border-color: #2563eb !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
.edit-user-page .col-form-label {
    color: #334155 !important;
    font-weight: 600;
    font-size: .85rem;
}
/* settings/management rows */
.edit-user-page .card-body .row.m-0 {
    padding: .55rem 0;
    border-bottom: 1px solid #f0f3f8;
    align-items: center;
}
.edit-user-page .card-body .row.m-0:last-child {
    border-bottom: 0;
}
.edit-user-page .card-body .row.m-0 p {
    margin: 0;
    color: #334155;
}
.edit-user-page .card-body .flex.m-0 {
    padding: .55rem 0;
    border-bottom: 1px solid #f0f3f8;
    align-items: center;
}
/* subscription plan cards */
.edit-user-page .plan-card {
    border: 1px solid #dce4f2 !important;
    border-radius: 12px !important;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}
.edit-user-page .plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}
.edit-user-page .plan-card.selected-plan {
    border-color: #16a34a !important;
    background: #dcfce7 !important;
}
.edit-user-page .plan-card.selected-plan p {
    color: #15803d !important;
}
.edit-user-page .plan-card.plan-active {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.screens-page-list table.table thead th {
    color: #64748b;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    border-top: 0;
    border-bottom: 1px solid #e9eef5;
    padding: .75rem .9rem;
}
.screens-page-list table.table thead th a {
    color: #64748b !important;
}
.screens-page-list table.table tbody td {
    vertical-align: middle;
    border-top: 1px solid #eef2f8;
    color: #334155;
    font-size: .85rem;
    padding: .7rem .9rem;
}
.screens-page-list table.table tbody tr.screen-info:hover {
    background: #f8fbff;
}
.screens-page-list .screen-table-foot {
    padding: .85rem;
}

@media (max-width: 991.98px) {
    .page-hero { padding: .9rem; }
}
@media (max-width: 767.98px) {
    .page-hero-title { font-size: 1.26rem; }
    .page-hero-subtitle { font-size: .88rem; }
    .page-hero-layout { flex-direction: column; align-items: stretch; gap: .8rem; }
    .page-hero-aside { width: 100%; align-items: stretch; }
    .page-hero-aside .page-view-toggle { align-self: flex-end; }
    .page-hero-buttons { justify-content: flex-start; }
    .page-hero-search-input { font-size: 16px; }
}
@media (max-width: 575.98px) {
    .page-hero-search { flex-basis: 100%; }
    .page-hero-buttons { width: 100%; }
    .screens-page .screen-card-foot { flex-wrap: wrap; }
}

/* ==========================================================================
   Signage Stick (dashboard card + modal)
   ========================================================================== */

.signage-badge {
    display: inline-block;
    background: #f57c00;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
}

.signage-badge--inline {
    margin-left: 8px;
    font-size: 10px;
    padding: 3px 8px;
}

.signage-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #4caf50;
    color: #fff;
    font-weight: bold;
}

/* Dashboard card layout */
.signage-card-body {
    padding: 0 !important;
    display: flex;
    flex-direction: row;
}


.dashboard-active-card.signage-media-card {
    height: auto !important;
}

.signage-content {
    flex: 1 1 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.signage-image-panel {
    flex: 0 0 38%;
    border-left: 1px solid #f5e6d0;
    position: relative;
    overflow: hidden;
}

.signage-image-panel a {
    position: absolute;
    inset: 0;
    display: block;
}

.signage-image-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.signage-title-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.signage-title {
    font-weight: 700;
    color: #222;
    font-size: 16px;
}

.signage-subtitle {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.signage-subtitle strong,
.signage-modal-section-header p strong {
    font-weight: 700;
    color: #222;
}

/* Region row links (compact, used in dashboard card and modal body) */
.signage-region-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.signage-region-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #333;
    text-decoration: none;
    transition: all .12s ease-in-out;
}

.signage-region-link:hover,
.signage-region-link:focus {
    border-color: #f57c00;
    background: #fff8f0;
    color: #333;
    text-decoration: none;
}

.signage-region-flag {
    font-size: 1.2rem;
    margin-right: 10px;
    line-height: 1;
}

.signage-region-label {
    flex-grow: 1;
    font-size: 14px;
}

.signage-region-arrow {
    color: #f57c00;
    font-weight: bold;
}

/* Benefit rows — compact (dashboard card) */
.signage-benefits {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.signage-benefit-inline {
    display: flex;
    align-items: flex-start;
    font-size: 13px;
}

.signage-benefit-inline .signage-check {
    width: 18px;
    height: 18px;
    min-width: 18px;
    font-size: 11px;
    margin-right: 8px;
    margin-top: 2px;
}

/* Benefit rows — full card (modal hero) */
.signage-benefit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.signage-benefit-card {
    display: flex;
    align-items: flex-start;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e8efe9;
    border-left: 3px solid #4caf50;
    border-radius: 6px;
}

.signage-benefit-card .signage-check {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 16px;
    margin-right: 12px;
}

.signage-benefit-title {
    font-weight: 700;
    color: #222;
    font-size: 14px;
    line-height: 1.2;
}

.signage-benefit-desc {
    color: #6c757d;
    font-size: 13px;
    margin-top: 2px;
}

/* Firesticks alternatives strip */
.signage-firesticks {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.signage-firesticks-title {
    font-weight: 700;
    color: #222;
    font-size: 13px;
    margin-bottom: 6px;
}

.signage-firesticks-title small {
    font-weight: 400;
    font-size: 12px;
}

.signage-firesticks-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Modal — hero panel */
.signage-modal-hero {
    padding: 1.5rem;
    background: linear-gradient(135deg, #fff8f0 0%, #fff 60%);
    border-bottom: 1px solid #f0f0f0;
}

.signage-modal-product-frame {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.signage-modal-product-frame img {
    max-width: 100%;
    height: auto;
}

/* Modal — region tile cards */
.signage-modal-section {
    padding: 1.5rem;
}

.signage-modal-section-header {
    text-align: center;
    margin-bottom: 1rem;
}

.signage-modal-section-header h5 {
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #333;
}

.signage-modal-section-header p {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 0;
}

.signage-region-tile {
    display: block;
    text-align: center;
    padding: 1rem;
    height: 100%;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    transition: all .15s ease-in-out;
    background: #fff;
}

.signage-region-tile:hover,
.signage-region-tile:focus {
    border-color: #f57c00;
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.15);
    transform: translateY(-2px);
    text-decoration: none;
}

.signage-region-tile-flag {
    font-size: 2.25rem;
    line-height: 1;
}

.signage-region-tile-name {
    font-weight: 700;
    margin-top: 0.5rem;
    color: #333;
}

.signage-region-tile-reseller {
    font-size: 0.875rem;
    color: #6c757d;
}

.signage-region-tile-cta {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #f57c00;
}

/* Mobile: collapse stacked tiles into compact horizontal rows */
@media (max-width: 767px) {
    .signage-modal-hero,
    .signage-modal-section {
        padding: 1rem;
    }

    .signage-modal-section-header {
        margin-bottom: 0.75rem;
    }

    .signage-region-tile {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 0.65rem 0.85rem;
    }

    .signage-region-tile-flag {
        font-size: 1.6rem;
        margin-right: 12px;
    }

    .signage-region-tile-name {
        margin-top: 0;
        font-size: 14px;
        flex-shrink: 0;
    }

    .signage-region-tile-reseller {
        margin-left: 6px;
    }

    .signage-region-tile-cta {
        margin-top: 0;
        margin-left: auto;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .signage-modal-product-frame {
        margin-top: 0.5rem;
        padding: 8px;
    }

    .signage-benefit-card {
        padding: 8px 10px;
    }

    .signage-benefit-card .signage-check {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 14px;
        margin-right: 10px;
    }

    /* Dashboard card: stack image as a banner above content */
    .dashboard-active-card {
        height: auto !important;
    }

    .signage-card-body {
        flex-direction: column;
        height: auto;
    }

    .signage-content {
        flex: 1 1 auto;
        padding: 16px;
    }

    .signage-image-panel {
        flex: 0 0 auto;
        order: -1;
        height: 160px;
        border-left: none;
        border-bottom: 1px solid #f5e6d0;
        background: #fafafa;
    }

    .signage-image-panel img {
        object-fit: contain;
        object-position: center;
    }

    .signage-title {
        font-size: 15px;
    }

    /* Firesticks: 2-column grid so buttons don't overflow card width */
    .signage-firesticks-list {
        gap: 6px;
    }

    .signage-firesticks-list .btn {
        flex: 1 1 calc(50% - 3px);
        font-size: 13px;
        padding: 7px 10px;
        min-width: 0;
    }
}

/* Promo callout used in upsell modal/email */
.signage-promo-callout {
    background: #fff8f0;
    border-left: 4px solid #f57c00;
    padding: 12px 16px;
    margin: 20px 0;
}

.signage-promo-callout strong {
    color: #f57c00;
}

/* ==========================================================================
   Screen Map (screenMap.blade.php)
   ========================================================================== */

.content { background: #f0f4f8; }
.main-panel { background: #f0f4f8; }

.smap-page-header {
    background: linear-gradient(135deg, #e65c00 0%, #FFA726 100%);
    border-radius: 16px;
    padding: 20px 24px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    box-shadow: 0 4px 20px rgba(230,92,0,.25);
}
.smap-header-left { display: flex; align-items: center; gap: 14px; }
.smap-header-icon {
    width: 48px; height: 48px;
    background: rgba(255,255,255,.18);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.smap-header-icon .material-icons { font-size: 26px; color: #fff; }
.smap-header-text h4 {
    font-size: 1.18rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 2px;
    letter-spacing: -.01em;
}
.smap-header-text p {
    font-size: .8rem;
    color: rgba(255,255,255,.82);
    margin: 0;
}
.smap-header-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.smap-stat-card {
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px;
    padding: 10px 18px;
    text-align: center;
    min-width: 80px;
}
.smap-stat-card .stat-num {
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    display: block;
}
.smap-stat-card .stat-label {
    font-size: .7rem;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: block;
    margin-top: 2px;
}
.smap-header-back {
    display: flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 9px;
    padding: 7px 14px;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: background .15s;
    backdrop-filter: blur(4px);
}
.smap-header-back:hover { background: rgba(255,255,255,.3); color: #fff; text-decoration: none; }
.smap-header-back .material-icons { font-size: 17px; }

.smap-wrap {
    position: relative;
    height: calc(100vh - 230px);
    min-height: 480px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(15,23,42,.13);
}
#screen-map {
    width: 100%;
    height: 100%;
}

.smap-topbar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.smap-topbar > * { pointer-events: auto; }

.smap-map-label {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    border-radius: 9px;
    padding: 6px 13px;
    font-size: .8rem;
    font-weight: 700;
    color: #475569;
    box-shadow: 0 2px 10px rgba(15,23,42,.12);
    white-space: nowrap;
    margin-left: auto;
}

.smap-stats { display: none; }
.smap-chip  { display: none; }

.smap-sidebar {
    position: absolute;
    top: 70px;
    left: 14px;
    bottom: 14px;
    width: 290px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(15,23,42,.13);
    overflow: hidden;
    transition: transform .25s ease;
}
.smap-sidebar.collapsed {
    transform: translateX(calc(-290px + 40px));
}
.smap-sidebar-head {
    padding: 12px 14px 10px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.smap-sidebar-head h6 {
    font-size: .8rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 8px;
}
.smap-search {
    position: relative;
}
.smap-search input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px 6px 32px;
    font-size: .82rem;
    color: #0f172a;
    outline: none;
    background: #f8fafc;
    transition: border .15s;
}
.smap-search input:focus { border-color: #FFA726; background: #fff; }
.smap-search .material-icons {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #94a3b8;
}
.smap-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}
.smap-sidebar-list::-webkit-scrollbar { width: 4px; }
.smap-sidebar-list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
.smap-screen-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background .12s;
    border-left: 3px solid transparent;
}
.smap-screen-item:hover { background: #f8fafc; }
.smap-screen-item.active-item { background: #fff7ed; border-left-color: #FFA726; }
.smap-screen-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.smap-screen-info { flex: 1; min-width: 0; }
.smap-screen-name {
    font-size: .84rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smap-screen-sub {
    font-size: .73rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smap-screen-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
}
.badge-online  { background: #dcfce7; color: #16a34a; }
.badge-offline { background: #f1f5f9; color: #94a3b8; }

.smap-collapse-btn {
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 52px;
    background: #fff;
    border: none;
    border-radius: 0 10px 10px 0;
    box-shadow: 4px 0 12px rgba(15,23,42,.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    z-index: 11;
    transition: color .15s;
}
.smap-collapse-btn:hover { color: #FFA726; }
.smap-collapse-btn .material-icons { font-size: 18px; }

.smap-legend {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 10;
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 2px 14px rgba(15,23,42,.13);
    font-size: .75rem;
}
.smap-legend-title {
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 7px;
    font-size: .7rem;
}
.smap-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-weight: 500;
    margin-bottom: 4px;
}
.smap-legend-item:last-child { margin-bottom: 0; }
.smap-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    flex-shrink: 0;
}

.smap-notice {
    position: absolute;
    bottom: 14px;
    left: 320px;
    right: 160px;
    z-index: 10;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: .8rem;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 2px 10px rgba(15,23,42,.08);
}
.smap-notice .material-icons { font-size: 16px; flex-shrink: 0; }

.sp-popup {
    min-width: 230px;
    padding: 4px 2px;
    font-family: inherit;
}
.sp-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.sp-popup-name {
    font-weight: 800;
    font-size: .95rem;
    color: #0f172a;
    line-height: 1.3;
}
.sp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.sp-status-pill.online  { background: #dcfce7; color: #16a34a; }
.sp-status-pill.offline { background: #f1f5f9; color: #64748b; }
.sp-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
}
.sp-status-pill.online  .sp-status-dot { background: #22c55e; }
.sp-status-pill.offline .sp-status-dot { background: #94a3b8; }
.sp-divider { height: 1px; background: #f1f5f9; margin: 8px 0; }
.sp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: #475569;
    margin-bottom: 5px;
}
.sp-row .material-icons { font-size: 14px; color: #94a3b8; flex-shrink: 0; }
.sp-row strong { color: #0f172a; }
.sp-tag {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    border-radius: 5px;
    padding: 1px 7px;
    font-size: .7rem;
    font-weight: 600;
    margin: 0 2px 2px 0;
}
.sp-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 5px;
}
.sp-location-badge.exact { background: #dcfce7; color: #15803d; }
.sp-location-badge.ip    { background: #dbeafe; color: #1d4ed8; }
.sp-location-badge .material-icons { font-size: 12px; }
.sp-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.sp-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FFA726;
    color: #fff;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
}
.sp-edit-btn:hover { background: #fb8c00; color: #fff; text-decoration: none; }
.sp-edit-btn .material-icons { font-size: 14px; }
.sp-hint { font-size: .68rem; color: #94a3b8; }
.sp-schedule-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .7rem;
    padding: 2px 7px;
    border-radius: 6px;
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
}
.sp-schedule-badge .material-icons { font-size: 12px; }

.video-gallery-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #ff5e4d;
    margin-bottom: 4px;
}
.video-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 48px 48px 44px;
    margin: 24px 0 26px;
    background: linear-gradient(120deg, #12001f, #3a0d3f, #5c1130, #1a0b3d);
    background-size: 300% 300%;
    animation: videoHeroShift 14s ease infinite;
    color: #fff;
}
@keyframes videoHeroShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.video-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
    animation: videoOrbFloat 9s ease-in-out infinite;
}
.video-hero-orb-1 {
    width: 280px;
    height: 280px;
    background: #e62117;
    top: -80px;
    left: -60px;
}
.video-hero-orb-2 {
    width: 320px;
    height: 320px;
    background: #7b2ff7;
    bottom: -120px;
    right: 10%;
    animation-delay: -3s;
}
.video-hero-orb-3 {
    width: 200px;
    height: 200px;
    background: #ff9f1c;
    top: 20%;
    right: -60px;
    animation-delay: -6s;
}
@keyframes videoOrbFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, -30px); }
}
.video-hero .row {
    position: relative;
    z-index: 1;
}
.video-hero-copy h1 {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1px;
    margin: 6px 0 12px;
    color: #fff;
}
.video-hero-copy p {
    color: rgba(255, 255, 255, .75);
    font-size: 16px;
    margin: 0 0 24px;
}
.video-hero-stats {
    display: flex;
    gap: 32px;
}
.video-hero-stat strong {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}
.video-hero-stat span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, .6);
}
.video-hero-featured {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .45);
    transform: rotate(2deg);
    transition: transform .35s ease, box-shadow .35s ease;
}
.video-hero-featured:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 0 32px 70px rgba(0, 0, 0, .55);
}
.video-hero-featured:hover .video-gallery-play {
    background: #e62117;
    transform: translate(-50%, -50%) scale(1.12);
    animation: videoPlayPulse 1.6s ease-out infinite;
}
.video-hero-featured:hover .video-gallery-thumb img {
    transform: scale(1.09);
}
.video-hero-featured:hover .video-gallery-thumb::before {
    left: 130%;
}
.video-hero-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background: #e62117;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: 0 6px 16px rgba(230, 33, 23, .4);
    animation: videoBadgePulse 2s ease-in-out infinite;
}
@keyframes videoBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}
.video-gallery-filters {
    margin: 6px 0 28px;
}
.video-filter-pill {
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 50px;
    padding: 9px 22px;
    margin: 4px 5px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    outline: none !important;
    transition: all .25s ease;
}
.video-filter-pill:hover {
    border-color: #bdbdbd;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
}
.video-filter-pill.active {
    background: linear-gradient(90deg, #e62117, #ff6b35);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px rgba(230, 33, 23, .35);
}
.pill-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px;
    background: #999;
}
.video-filter-pill[data-filter="getting-started"] .pill-dot { background: #ff6b35; }
.video-filter-pill[data-filter="content"] .pill-dot { background: #8e44ad; }
.video-filter-pill[data-filter="broadcast"] .pill-dot { background: #2980b9; }
.video-filter-pill[data-filter="insights"] .pill-dot { background: #27ae60; }
.video-filter-pill[data-filter="account"] .pill-dot { background: #e62117; }
.video-filter-pill.active .pill-dot {
    background: #fff;
}
.pill-count {
    margin-left: 7px;
    font-size: 11px;
    font-weight: 700;
    opacity: .55;
}
.video-gallery-item {
    perspective: 900px;
    animation: videoCardIn .6s cubic-bezier(.22, .61, .36, 1) both;
}
.video-gallery-grid .video-gallery-item:nth-child(1) { animation-delay: .03s; }
.video-gallery-grid .video-gallery-item:nth-child(2) { animation-delay: .08s; }
.video-gallery-grid .video-gallery-item:nth-child(3) { animation-delay: .13s; }
.video-gallery-grid .video-gallery-item:nth-child(4) { animation-delay: .18s; }
.video-gallery-grid .video-gallery-item:nth-child(5) { animation-delay: .23s; }
.video-gallery-grid .video-gallery-item:nth-child(6) { animation-delay: .28s; }
.video-gallery-grid .video-gallery-item:nth-child(7) { animation-delay: .33s; }
.video-gallery-grid .video-gallery-item:nth-child(8) { animation-delay: .38s; }
.video-gallery-grid .video-gallery-item:nth-child(9) { animation-delay: .43s; }
.video-gallery-grid .video-gallery-item:nth-child(10) { animation-delay: .48s; }
.video-gallery-grid .video-gallery-item:nth-child(11) { animation-delay: .53s; }
.video-gallery-grid .video-gallery-item:nth-child(12) { animation-delay: .58s; }
.video-gallery-grid .video-gallery-item:nth-child(13) { animation-delay: .63s; }
.video-gallery-grid .video-gallery-item:nth-child(14) { animation-delay: .68s; }
.video-gallery-grid .video-gallery-item:nth-child(15) { animation-delay: .73s; }
.video-gallery-grid .video-gallery-item:nth-child(16) { animation-delay: .78s; }
.video-gallery-grid .video-gallery-item:nth-child(17) { animation-delay: .83s; }
.video-gallery-grid .video-gallery-item:nth-child(18) { animation-delay: .88s; }
@keyframes videoCardIn {
    from {
        opacity: 0;
        transform: translateY(26px) scale(.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.video-gallery-card {
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
    transition: transform .18s ease-out, box-shadow .3s ease;
    will-change: transform;
}
.video-gallery-card:hover {
    box-shadow: 0 22px 45px rgba(0, 0, 0, .2);
}
.video-gallery-thumb {
    position: relative;
    padding-top: 56.25%;
    background: #000;
    overflow: hidden;
}
.video-gallery-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.video-gallery-card:hover .video-gallery-thumb img {
    transform: scale(1.09);
}
.video-gallery-thumb::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 55%);
    opacity: .75;
    transition: opacity .3s ease;
}
.video-gallery-card:hover .video-gallery-thumb::after {
    opacity: .3;
}
.video-gallery-thumb::before {
    content: "";
    position: absolute;
    top: 0;
    left: -85%;
    width: 55%;
    height: 100%;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
    transform: skewX(-22deg);
    z-index: 2;
    pointer-events: none;
    transition: left .65s ease;
}
.video-gallery-card:hover .video-gallery-thumb::before {
    left: 130%;
}
.video-gallery-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    transition: background .3s ease, transform .3s ease;
}
.video-gallery-play .material-icons {
    color: #fff;
    font-size: 34px;
}
.video-gallery-card:hover .video-gallery-play {
    background: #e62117;
    transform: translate(-50%, -50%) scale(1.12);
    animation: videoPlayPulse 1.6s ease-out infinite;
}
@keyframes videoPlayPulse {
    0% { box-shadow: 0 0 0 0 rgba(230, 33, 23, .45); }
    100% { box-shadow: 0 0 0 20px rgba(230, 33, 23, 0); }
}
.video-gallery-card .card-body {
    padding: 14px 18px 16px;
}
.video-gallery-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 50px;
    margin-bottom: 6px;
    color: #e62117;
    background: rgba(230, 33, 23, .09);
}
.video-gallery-item[data-category="getting-started"] .video-gallery-tag { color: #ff6b35; background: rgba(255, 107, 53, .1); }
.video-gallery-item[data-category="content"] .video-gallery-tag { color: #8e44ad; background: rgba(142, 68, 173, .1); }
.video-gallery-item[data-category="broadcast"] .video-gallery-tag { color: #2980b9; background: rgba(41, 128, 185, .1); }
.video-gallery-item[data-category="insights"] .video-gallery-tag { color: #27ae60; background: rgba(39, 174, 96, .12); }
.video-gallery-item[data-category="account"] .video-gallery-tag { color: #e62117; background: rgba(230, 33, 23, .09); }
.video-gallery-card .card-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #212121;
}
#video-tutorial-player .modal-content {
    background: #161616;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
#video-tutorial-player .modal-header {
    border: 0;
    padding: 18px 24px 10px;
}
#video-tutorial-player .modal-title {
    color: #fff;
}
#video-tutorial-player .close {
    color: #fff;
    opacity: .7;
    text-shadow: none;
}
#video-tutorial-player .close:hover {
    opacity: 1;
}
#video-tutorial-player .modal-body {
    padding: 0 24px 24px;
}
.video-gallery-frame {
    position: relative;
    padding-top: 56.25%;
    border-radius: 10px;
    overflow: hidden;
}
.video-gallery-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 991px) {
    .video-hero {
        padding: 32px 26px;
    }
    .video-hero-copy h1 {
        font-size: 28px;
    }
    .video-hero-featured {
        margin-top: 26px;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .video-hero,
    .video-hero-orb,
    .video-hero-badge,
    .video-gallery-item,
    .video-gallery-card:hover .video-gallery-play {
        animation: none;
    }
}

.video-tutorials-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #e62117, #ff6b35) !important;
    color: #fff !important;
    padding: 12px 20px;
    font-weight: 600;
    text-transform: none;
    box-shadow: 0 6px 18px rgba(230, 33, 23, .35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.video-tutorials-btn .material-icons {
    font-size: 18px;
    margin-right: 7px;
}
.video-tutorials-btn:hover,
.video-tutorials-btn:focus {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(230, 33, 23, .48);
}
.video-tutorials-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    transition: left .6s ease;
    pointer-events: none;
}
.video-tutorials-btn:hover::before {
    left: 130%;
}
/* Edit screen (route edit-screen) — scoped to .edit-screen-page; rotation uses buttons not radios (avoids BMD overlap) */
.edit-screen-page .card {
    border: 1px solid #dce4f2;
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .10);
    background: #fff;
    overflow: hidden;
}

.edit-screen-page .btn {
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.edit-screen-page .card-body .form-control:not(.input-tags) {
    border: 1px solid #dce3ef;
    border-radius: 12px;
    background-color: #f8fbff;
    background-image: none;
    box-shadow: none;
    color: #0f172a;
}

.edit-screen-page .card-body .form-control:not(.input-tags):focus {
    border-color: #2563eb;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.edit-screen-page .edit-screen-card-head {
    background: #fff !important;
    border-bottom: 1px solid #e9eef5;
    padding: 1rem 1.25rem;
}

.edit-screen-page .edit-screen-card-head .card-title {
    color: #0f172a;
    font-weight: 700;
    font-size: 1.05rem;
}

.edit-screen-page .edit-screen-card-head .card-category,
.edit-screen-page .edit-screen-card-head .text-muted {
    color: #64748b !important;
}

.edit-screen-page .form-section {
    margin-bottom: 1.5rem;
}

.edit-screen-page .form-section:last-of-type {
    margin-bottom: 0;
}

.edit-screen-page .edit-screen-static-field > label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: #343a40;
    margin-bottom: 0.35rem;
}

.edit-screen-page .edit-screen-static-field .form-control,
.edit-screen-page .edit-screen-static-field select.form-control {
    border: 1px solid #dce3ef;
    border-radius: 12px;
    padding: 0.55rem 0.9rem;
    background-color: #f8fbff;
    background-image: none;
    font-size: 0.95rem;
    min-height: 44px;
    color: #0f172a;
}

.edit-screen-page .edit-screen-static-field .form-control:focus {
    border-color: #2563eb;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.edit-screen-page .edit-screen-static-field small.form-text {
    color: #6c757d !important;
    font-size: 0.8125rem;
    margin-top: 0.35rem;
}

.edit-screen-page .form-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.35rem;
}

.edit-screen-page .form-section-hint {
    font-size: 0.8125rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.edit-screen-page .rotation-panel {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem;
    background: #f8fbff;
}

.edit-screen-page .rotation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 576px) {
    .edit-screen-page .rotation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.edit-screen-page .rotation-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0.65rem 0.35rem 0.5rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    font: inherit;
    color: inherit;
    text-align: center;
    min-height: 7.5rem;
}

.edit-screen-page .rotation-chip:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
}

.edit-screen-page .rotation-chip:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

.edit-screen-page .rotation-chip.is-selected {
    border-color: #2563eb;
    background: #eef3fa;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}

.edit-screen-page .rotation-chip-visual {
    width: 48px;
    height: 38px;
    margin: 0 auto 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    border-radius: 6px;
}

.edit-screen-page .rotation-chip-screen {
    width: 36px;
    height: 24px;
    background: linear-gradient(160deg, #2563eb 0%, #60a5fa 100%);
    border-radius: 3px;
    border: 1px solid #1d4ed8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.edit-screen-page .rotation-chip-deg {
    font-weight: 700;
    font-size: 1rem;
    color: #212529;
    line-height: 1.2;
}

.edit-screen-page .rotation-chip-hint {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 0.15rem;
    line-height: 1.2;
}

.edit-screen-page .tags-input-wrap {
    display: block;
    width: 100%;
    min-width: 0;
}

.edit-screen-page .tags-input-wrap .input-tags {
    width: 100%;
    min-width: 12rem;
}

.edit-screen-page .side-card .card-body {
    padding-top: 1rem;
}

.edit-screen-page .edit-screen-static-field.bmd-form-group > label {
    position: static !important;
    pointer-events: auto !important;
    color: #343a40 !important;
    font-weight: 600 !important;
    margin-bottom: 0.35rem !important;
    display: block !important;
}

.edit-screen-page .edit-screen-static-field.bmd-form-group .form-control {
    background-image: none !important;
    background-color: #f8fbff !important;
    border: 1px solid #dce3ef !important;
    border-radius: 12px !important;
    padding: 0.55rem 0.9rem !important;
}

.edit-screen-page .edit-screen-static-field.bmd-form-group select.form-control {
    height: auto !important;
}

.admin-glass-tabs.nav-tabs {
    border-bottom: 1px solid #eef0f3 !important;
    padding: 0 !important;
}
.admin-glass-tabs .nav-item {
    margin-bottom: -1px;
}
.admin-glass-tabs .nav-item .nav-link,
.admin-glass-tabs .nav-item .nav-link:hover,
.admin-glass-tabs .nav-item .nav-link:focus {
    color: #6c757d !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 500 !important;
    text-transform: none !important;
    font-size: 0.95em !important;
    padding: 0.6em 1em !important;
    transition: color 0.15s, background 0.15s;
}
.admin-glass-tabs .nav-item .nav-link:hover {
    color: #23426e !important;
    background: #f7f8fa !important;
}
.admin-glass-tabs .nav-item .nav-link.active,
.admin-glass-tabs .nav-item.show .nav-link {
    color: #23426e !important;
    background: #fff !important;
    border-color: #eef0f3 #eef0f3 #fff !important;
    font-weight: 600 !important;
}

.signage-badge {
    display: inline-block;
    background: #f57c00;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
}

.signage-badge--inline {
    margin-left: 8px;
    font-size: 10px;
    padding: 3px 8px;
}

.signage-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #4caf50;
    color: #fff;
    font-weight: bold;
}

/* Dashboard card layout */
.signage-card-body {
    padding: 0 !important;
    display: flex;
    flex-direction: row;
}


.dashboard-active-card.signage-media-card {
    height: auto !important;
}

.signage-content {
    flex: 1 1 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.signage-image-panel {
    flex: 0 0 38%;
    border-left: 1px solid #f5e6d0;
    position: relative;
    overflow: hidden;
}

.signage-image-panel a {
    position: absolute;
    inset: 0;
    display: block;
}

.signage-image-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.signage-title-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.signage-title {
    font-weight: 700;
    color: #222;
    font-size: 16px;
}

.signage-subtitle {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.signage-subtitle strong,
.signage-modal-section-header p strong {
    font-weight: 700;
    color: #222;
}

/* Region row links (compact, used in dashboard card and modal body) */
.signage-region-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.signage-region-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #333;
    text-decoration: none;
    transition: all .12s ease-in-out;
}

.signage-region-link:hover,
.signage-region-link:focus {
    border-color: #f57c00;
    background: #fff8f0;
    color: #333;
    text-decoration: none;
}

.signage-region-flag {
    font-size: 1.2rem;
    margin-right: 10px;
    line-height: 1;
}

.signage-region-label {
    flex-grow: 1;
    font-size: 14px;
}

.signage-region-arrow {
    color: #f57c00;
    font-weight: bold;
}

/* Benefit rows — compact (dashboard card) */
.signage-benefits {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.signage-benefit-inline {
    display: flex;
    align-items: flex-start;
    font-size: 13px;
}

.signage-benefit-inline .signage-check {
    width: 18px;
    height: 18px;
    min-width: 18px;
    font-size: 11px;
    margin-right: 8px;
    margin-top: 2px;
}

/* Benefit rows — full card (modal hero) */
.signage-benefit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.signage-benefit-card {
    display: flex;
    align-items: flex-start;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e8efe9;
    border-left: 3px solid #4caf50;
    border-radius: 6px;
}

.signage-benefit-card .signage-check {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 16px;
    margin-right: 12px;
}

.signage-benefit-title {
    font-weight: 700;
    color: #222;
    font-size: 14px;
    line-height: 1.2;
}

.signage-benefit-desc {
    color: #6c757d;
    font-size: 13px;
    margin-top: 2px;
}

/* Firesticks alternatives strip */
.signage-firesticks {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.signage-firesticks-title {
    font-weight: 700;
    color: #222;
    font-size: 13px;
    margin-bottom: 6px;
}

.signage-firesticks-title small {
    font-weight: 400;
    font-size: 12px;
}

.signage-firesticks-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Modal — hero panel */
.signage-modal-hero {
    padding: 1.5rem;
    background: linear-gradient(135deg, #fff8f0 0%, #fff 60%);
    border-bottom: 1px solid #f0f0f0;
}

.signage-modal-product-frame {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.signage-modal-product-frame img {
    max-width: 100%;
    height: auto;
}

/* Modal — region tile cards */
.signage-modal-section {
    padding: 1.5rem;
}

.signage-modal-section-header {
    text-align: center;
    margin-bottom: 1rem;
}

.signage-modal-section-header h5 {
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #333;
}

.signage-modal-section-header p {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 0;
}

.signage-region-tile {
    display: block;
    text-align: center;
    padding: 1rem;
    height: 100%;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    transition: all .15s ease-in-out;
    background: #fff;
}

.signage-region-tile:hover,
.signage-region-tile:focus {
    border-color: #f57c00;
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.15);
    transform: translateY(-2px);
    text-decoration: none;
}

.signage-region-tile-flag {
    font-size: 2.25rem;
    line-height: 1;
}

.signage-region-tile-name {
    font-weight: 700;
    margin-top: 0.5rem;
    color: #333;
}

.signage-region-tile-reseller {
    font-size: 0.875rem;
    color: #6c757d;
}

.signage-region-tile-cta {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #f57c00;
}

/* Mobile: collapse stacked tiles into compact horizontal rows */
@media (max-width: 767px) {
    .signage-modal-hero,
    .signage-modal-section {
        padding: 1rem;
    }

    .signage-modal-section-header {
        margin-bottom: 0.75rem;
    }

    .signage-region-tile {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 0.65rem 0.85rem;
    }

    .signage-region-tile-flag {
        font-size: 1.6rem;
        margin-right: 12px;
    }

    .signage-region-tile-name {
        margin-top: 0;
        font-size: 14px;
        flex-shrink: 0;
    }

    .signage-region-tile-reseller {
        margin-left: 6px;
    }

    .signage-region-tile-cta {
        margin-top: 0;
        margin-left: auto;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .signage-modal-product-frame {
        margin-top: 0.5rem;
        padding: 8px;
    }

    .signage-benefit-card {
        padding: 8px 10px;
    }

    .signage-benefit-card .signage-check {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 14px;
        margin-right: 10px;
    }

    /* Dashboard card: stack image as a banner above content */
    .dashboard-active-card {
        height: auto !important;
    }

    .signage-card-body {
        flex-direction: column;
        height: auto;
    }

    .signage-content {
        flex: 1 1 auto;
        padding: 16px;
    }

    .signage-image-panel {
        flex: 0 0 auto;
        order: -1;
        height: 160px;
        border-left: none;
        border-bottom: 1px solid #f5e6d0;
        background: #fafafa;
    }

    .signage-image-panel img {
        object-fit: contain;
        object-position: center;
    }

    .signage-title {
        font-size: 15px;
    }

    /* Firesticks: 2-column grid so buttons don't overflow card width */
    .signage-firesticks-list {
        gap: 6px;
    }

    .signage-firesticks-list .btn {
        flex: 1 1 calc(50% - 3px);
        font-size: 13px;
        padding: 7px 10px;
        min-width: 0;
    }
}

/* Promo callout used in upsell modal/email */
.signage-promo-callout {
    background: #fff8f0;
    border-left: 4px solid #f57c00;
    padding: 12px 16px;
    margin: 20px 0;
}

.signage-promo-callout strong {
    color: #f57c00;
}

/* ═══════════════════════════════════════════════════════════════
   Admin Dashboard v3 — all styles scoped under #admin-dash-root
   ═══════════════════════════════════════════════════════════════ */

/* Override .content padding so our .main controls spacing */
#admin-dash-root.content { padding: 0; }

#admin-dash-root {
  --font-mono: ui-monospace, 'Geist Mono', monospace;
  --bg:           #f8f9fc;
  --surface-0:    #ffffff;
  --surface-1:    #ffffff;
  --surface-2:    #f0f2f7;
  --surface-3:    #e8eaf2;
  --border:       #e3e6ef;
  --border-strong:#d0d4e2;
  --text:         #1a1f36;
  --text-2:       #4a5170;
  --muted:        #8890aa;
  --bar:          #dde1ee;
  --accent:       #16a34a;
  --info:         #2563eb;
  --warn:         #d97706;
  --danger:       #dc2626;
  --p-free:       #8890aa;
  --p-lite:       #0891b2;
  --p-basic:      #c2410c;
  --p-pro:        #15803d;
  --p-enterprise: #7c3aed;
  --card-pad:     20px;
  --row-gap:      18px;
  --kpi-num:      36px;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

#admin-dash-root[data-theme="dark"] {
  --bg:           #111827;
  --surface-0:    #111827;
  --surface-1:    #1e2535;
  --surface-2:    #252f42;
  --surface-3:    #2e3a50;
  --border:       #2e3a50;
  --border-strong:#3d4d66;
  --text:         #f0f4ff;
  --text-2:       #94a3c8;
  --muted:        #5a6a8a;
  --bar:          #2e3a50;
}

#admin-dash-root[data-density="compact"] { --card-pad: 14px; --row-gap: 12px; --kpi-num: 30px; }
#admin-dash-root[data-density="cozy"]    { --card-pad: 20px; --row-gap: 18px; --kpi-num: 36px; }
#admin-dash-root[data-density="airy"]    { --card-pad: 28px; --row-gap: 26px; --kpi-num: 44px; }

#admin-dash-root * { box-sizing: border-box; }
#admin-dash-root button { font-family: inherit; }
#admin-dash-root a { color: inherit; text-decoration: none; }

/* ── Main layout ────────────────────────────────────────────── */
#admin-dash-root .adm-main {
  padding: 4px 12px 48px;
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  max-width: 1560px;
  margin: 0 auto;
  width: 100%;
}

@keyframes adm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@keyframes adm-pulse-dot {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: .7; }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Page header ────────────────────────────────────────────── */
#admin-dash-root .adm-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-top: 4px;
}
#admin-dash-root .adm-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 6px;
}
#admin-dash-root .adm-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 4px;
  color: var(--text);
}
#admin-dash-root .adm-sub {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
#admin-dash-root .adm-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: adm-pulse 2s infinite;
}
#admin-dash-root .adm-actions { display: flex; gap: 8px; }
#admin-dash-root .adm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
#admin-dash-root .adm-btn:hover { border-color: var(--border-strong); }
#admin-dash-root .adm-btn-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
#admin-dash-root .adm-btn-ghost { background: transparent; }

/* ── Card ───────────────────────────────────────────────────── */
#admin-dash-root .adm-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
}
#admin-dash-root .adm-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 12px;
}
#admin-dash-root .adm-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 3px;
}
#admin-dash-root .adm-card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--text);
}
#admin-dash-root .adm-card-link {
  font-size: 12px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
#admin-dash-root .adm-card-link:hover { color: var(--text); }
#admin-dash-root .adm-card-body { flex: 1; }
#admin-dash-root .adm-card-body-tight {
  margin: 0 calc(var(--card-pad) * -1);
}
#admin-dash-root .adm-card-body-tight > table { width: 100%; }

/* ── KPI strip ──────────────────────────────────────────────── */
#admin-dash-root .adm-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
#admin-dash-root .adm-kpi-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}
#admin-dash-root .adm-kpi-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-2);
  font-weight: 500;
}
#admin-dash-root .adm-kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#admin-dash-root .adm-kpi-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-2);
}
#admin-dash-root .adm-kpi-value {
  font-size: var(--kpi-num);
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: 4px;
  color: var(--text);
}
#admin-dash-root .adm-kpi-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  gap: 8px;
}
#admin-dash-root .adm-kpi-sub {
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--font-mono);
}

/* ── Delta badge ────────────────────────────────────────────── */
#admin-dash-root .adm-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 5px;
  font-family: var(--font-mono);
}
#admin-dash-root .adm-delta-up   { color: var(--accent); background: rgba(22,163,74,.1); }
#admin-dash-root .adm-delta-down { color: var(--danger); background: rgba(220,38,38,.1); }
#admin-dash-root .adm-delta-neutral { color: var(--muted); background: var(--surface-2); }

/* ── Live hero ──────────────────────────────────────────────── */
#admin-dash-root .adm-live-hero { padding: 0; overflow: hidden; }
#admin-dash-root .adm-live-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr .9fr;
}
#admin-dash-root .adm-live-now {
  padding: 28px 32px;
  border-right: 1px solid var(--border);
}
#admin-dash-root .adm-live-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  font-weight: 500;
  margin-bottom: 8px;
}
#admin-dash-root .adm-pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: adm-pulse-dot 1.6s infinite;
}
#admin-dash-root .adm-live-num {
  font-size: 80px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin: 4px 0 4px;
}
#admin-dash-root .adm-live-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 22px;
}
#admin-dash-root .adm-fleet-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px 24px; }
#admin-dash-root .adm-fleet-stat { display: flex; align-items: baseline; gap: 8px; }
#admin-dash-root .adm-fleet-bullet { width: 6px; height: 6px; border-radius: 50%; align-self: center; flex-shrink: 0; }
#admin-dash-root .adm-fleet-num { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 28px; color: var(--text); }
#admin-dash-root .adm-fleet-cap { font-size: 12px; color: var(--text-2); }

#admin-dash-root .adm-live-30 {
  padding: 28px 32px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
#admin-dash-root .adm-live-label-sm { font-size: 12.5px; color: var(--text-2); font-weight: 500; margin-bottom: 8px; }
#admin-dash-root .adm-live-num-sm {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin: 4px 0 16px;
}
#admin-dash-root .adm-live-spark { color: var(--accent); margin-bottom: 12px; }
#admin-dash-root .adm-live-spark svg { width: 100%; }
#admin-dash-root .adm-live-meta {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: auto;
}
#admin-dash-root .adm-live-quick {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
}
#admin-dash-root .adm-quick-card {
  flex: 1;
  padding: 20px 26px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#admin-dash-root .adm-quick-card:last-child { border-bottom: 0; }
#admin-dash-root .adm-quick-label { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
#admin-dash-root .adm-quick-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--text); }
#admin-dash-root .adm-quick-foot { font-size: 11.5px; margin-top: 4px; font-family: var(--font-mono); }
#admin-dash-root .adm-quick-foot.adm-muted { color: var(--muted); }
#admin-dash-root .adm-quick-foot.adm-up    { color: var(--accent); }

/* ── Grid layouts ───────────────────────────────────────────── */
#admin-dash-root .adm-grid-3 {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.2fr;
  gap: 14px;
}
#admin-dash-root .adm-grid-signups {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}

/* ── Plan mix ───────────────────────────────────────────────── */
#admin-dash-root .adm-planmix-body { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; }
#admin-dash-root .adm-planmix-donut { flex-shrink: 0; }
#admin-dash-root .adm-donut-value {
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  fill: var(--text);
  font-variant-numeric: tabular-nums;
}
#admin-dash-root .adm-donut-label {
  font-size: 10px;
  fill: var(--muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}
#admin-dash-root .adm-planmix-legend { width: 100%; display: flex; flex-direction: column; gap: 10px; }
#admin-dash-root .adm-legend-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
#admin-dash-root .adm-legend-swatch { width: 8px; height: 8px; border-radius: 2px; margin-left: 2px; }
#admin-dash-root .adm-legend-label { color: var(--text); }
#admin-dash-root .adm-legend-value { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
#admin-dash-root .adm-legend-pct { font-family: var(--font-mono); font-size: 11px; color: var(--muted); min-width: 32px; text-align: right; }
#admin-dash-root .adm-legend-divider { height: 1px; background: var(--border); margin: 4px 0; grid-column: 1 / -1; }
#admin-dash-root .adm-trial-row {
  display: flex; gap: 12px; align-items: center;
  font-size: 11.5px; color: var(--text-2);
  margin-top: 4px;
  font-family: var(--font-mono);
}
#admin-dash-root .adm-trial-row strong { color: var(--text); }
#admin-dash-root .adm-trial-tag {
  padding: 2px 6px;
  background: var(--surface-2);
  border-radius: 4px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Bar list ───────────────────────────────────────────────── */
#admin-dash-root .adm-barlist { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding-right: 10px; }
#admin-dash-root .adm-barlist::-webkit-scrollbar { width: 4px; }
#admin-dash-root .adm-barlist::-webkit-scrollbar-track { background: transparent; }
#admin-dash-root .adm-barlist::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
#admin-dash-root .adm-barlist-row {
  display: grid;
  grid-template-columns: 92px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
#admin-dash-root .adm-barlist-label { color: var(--text-2); }
#admin-dash-root .adm-barlist-track { height: 7px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
#admin-dash-root .adm-barlist-fill { height: 100%; border-radius: 3px; background: var(--accent); }
#admin-dash-root .adm-barlist-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
#admin-dash-root .adm-histo-foot {
  display: flex; gap: 24px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border);
}
#admin-dash-root .adm-histo-num { font-size: 20px; font-weight: 700; letter-spacing: -.02em; display: block; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
#admin-dash-root .adm-histo-cap { font-size: 11px; color: var(--muted); margin-top: 4px; display: block; font-family: var(--font-mono); }

#admin-dash-root .adm-upgrades-scroll { max-height: 260px; overflow-y: auto; }
#admin-dash-root .adm-upgrades-scroll::-webkit-scrollbar { width: 4px; }
#admin-dash-root .adm-upgrades-scroll::-webkit-scrollbar-track { background: transparent; }
#admin-dash-root .adm-upgrades-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
#admin-dash-root .adm-upgrades-table { width: 100%; border-collapse: collapse; }
#admin-dash-root .adm-upgrades-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 13px; }
#admin-dash-root .adm-upgrades-table tr:last-child td { border-bottom: 0; }
#admin-dash-root .adm-upgrades-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* ── Top customers ──────────────────────────────────────────── */
#admin-dash-root .adm-topc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#admin-dash-root .adm-topc-table th {
  text-align: left; font-weight: 500; color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  padding: 6px 8px 10px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}
#admin-dash-root .adm-topc-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); }
#admin-dash-root .adm-topc-table th:first-child,
#admin-dash-root .adm-topc-table td:first-child { padding-left: var(--card-pad); }
#admin-dash-root .adm-topc-table th:last-child,
#admin-dash-root .adm-topc-table td:last-child { padding-right: var(--card-pad); }
#admin-dash-root .adm-topc-table tr:last-child td { border-bottom: 0; }
#admin-dash-root .adm-topc-table tr:hover td { background: var(--surface-2); }
#admin-dash-root .adm-card-body-tight:has(> .adm-topc-table) { max-height: 560px; overflow-y: auto; }
#admin-dash-root .adm-card-body-tight:has(> .adm-topc-table) thead th { position: sticky; top: 0; background: var(--surface-1); z-index: 1; }
#admin-dash-root .adm-rank { font-family: var(--font-mono); color: var(--muted); font-size: 11px; }
#admin-dash-root .adm-cust { display: flex; align-items: center; gap: 9px; }
#admin-dash-root .adm-cust-avatar {
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--text); text-transform: uppercase;
}
#admin-dash-root .adm-cust-name { color: var(--text); font-weight: 500; }
#admin-dash-root .adm-cust-name:hover { color: var(--accent); }
#admin-dash-root .adm-plan-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500; text-transform: capitalize;
  font-family: var(--font-mono);
}
#admin-dash-root .adm-plan-dot { width: 5px; height: 5px; border-radius: 50%; }
#admin-dash-root .adm-screens-num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Signups chart ──────────────────────────────────────────── */
#admin-dash-root .adm-head-stats { display: flex; gap: 22px; }
#admin-dash-root .adm-head-stat-num {
  font-size: 18px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--text);
}
#admin-dash-root .adm-head-stat-cap {
  font-size: 10.5px; color: var(--muted);
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .06em; margin-top: 4px;
}
#admin-dash-root .adm-signups-chart { width: 100%; }
#admin-dash-root .adm-axis-label { font-size: 10.5px; fill: var(--muted); font-family: var(--font-mono); }
#admin-dash-root .adm-bar-count { font-size: 8px; fill: var(--text-2); font-family: var(--font-mono); font-weight: 600; }
#admin-dash-root .adm-legend-inline {
  display: flex; gap: 16px; margin-top: 8px;
  font-size: 11.5px; color: var(--text-2);
}
#admin-dash-root .adm-legend-inline span { display: inline-flex; align-items: center; gap: 6px; }
#admin-dash-root .adm-legend-square { width: 10px; height: 8px; border-radius: 2px; }
#admin-dash-root .adm-legend-dashline { width: 16px; height: 0; border-top: 1.5px dashed; }

/* ── Activity feed ──────────────────────────────────────────── */
#admin-dash-root .adm-activity { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
#admin-dash-root .adm-activity::-webkit-scrollbar { width: 4px; }
#admin-dash-root .adm-activity::-webkit-scrollbar-track { background: transparent; }
#admin-dash-root .adm-activity::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
#admin-dash-root .adm-activity-row {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 10px; padding: 10px var(--card-pad);
  border-bottom: 1px solid var(--border);
}
#admin-dash-root .adm-activity-row:last-child { border-bottom: 0; }
#admin-dash-root .adm-activity-icon { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; margin-top: 2px; }
#admin-dash-root .adm-activity-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#admin-dash-root .adm-activity-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: var(--font-mono); }
#admin-dash-root .adm-activity-when { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
#admin-dash-root .adm-activity-who { font-size: 13px; font-weight: 500; color: var(--text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#admin-dash-root .adm-activity-meta { font-size: 12px; color: var(--text-2); margin-top: 1px; }

/* ── Footer ─────────────────────────────────────────────────── */
#admin-dash-root .adm-foot {
  display: flex; gap: 10px; margin-top: 8px; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted); font-family: var(--font-mono);
}

/* ── Theme toggle button ─────────────────────────────────────── */
#admin-dash-root .adm-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-2); cursor: pointer;
}
#admin-dash-root .adm-theme-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* ── Responsive: ≤1200px ─────────────────────────────────────── */
@media (max-width: 1200px) {
  #admin-dash-root .adm-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  #admin-dash-root .adm-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  #admin-dash-root .adm-grid-signups {
    grid-template-columns: 1fr;
  }
  #admin-dash-root .adm-live-grid {
    grid-template-columns: 1fr 1fr;
  }
  #admin-dash-root .adm-live-quick {
    grid-column: 1 / -1;
    flex-direction: row;
    border-top: 1px solid var(--border);
  }
  #admin-dash-root .adm-quick-card {
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }
  #admin-dash-root .adm-quick-card:last-child {
    border-right: 0;
  }
}

@media (max-width: 720px) {
  #admin-dash-root .adm-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  #admin-dash-root .adm-grid-3 {
    grid-template-columns: 1fr;
  }
  #admin-dash-root .adm-live-grid {
    grid-template-columns: 1fr;
  }
  #admin-dash-root .adm-live-now,
  #admin-dash-root .adm-live-30 {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:active,
.btn.btn-outline-danger.active {
  color: #fff !important;
  background-color: #f44336 !important;
  border-color: #f44336 !important;
}
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary.active {
  color: #fff !important;
  background-color: #9c27b0 !important;
  border-color: #9c27b0 !important;
}
.btn.btn-outline-warning:hover,
.btn.btn-outline-warning:active,
.btn.btn-outline-warning.active {
  color: #fff !important;
  background-color: #ff9800 !important;
  border-color: #ff9800 !important;
}
.btn.btn-outline-success:hover,
.btn.btn-outline-success:active,
.btn.btn-outline-success.active {
  color: #fff !important;
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
}
.btn.btn-outline-info:hover,
.btn.btn-outline-info:active,
.btn.btn-outline-info.active {
  color: #fff !important;
  background-color: #00bcd4 !important;
  border-color: #00bcd4 !important;
}
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:active,
.btn.btn-outline-secondary.active {
  color: #fff !important;
  background-color: #333333 !important;
  border-color: #333333 !important;
}

/* ==========================================================================
   Dashboard (.dashboard-page)
   ========================================================================== */
.dashboard-page .dashboard-hero {
    margin-bottom: 1.25rem;
}
/* KPI grid */
.dashboard-page .dash-kpi-grid {
    margin-left: -8px;
    margin-right: -8px;
    margin-bottom: .25rem;
}
.dashboard-page .dash-kpi-grid > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 1rem;
}
.dashboard-page .dash-kpi {
    display: flex;
    align-items: center;
    gap: .85rem;
    height: 100%;
    background: #fff;
    border: 1px solid #dce4f2;
    border-radius: 18px;
    padding: 1rem 1.1rem;
    box-shadow: 0 2px 6px rgba(90, 40, 120, .05);
    transition: transform .18s ease, box-shadow .18s ease;
    text-decoration: none !important;
}
.dashboard-page .dash-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .12);
}
.dashboard-page .dash-kpi-icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dashboard-page .dash-kpi-icon i {
    font-size: 25px;
}
.dashboard-page .dash-kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dashboard-page .dash-kpi-value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.05;
    color: #0f172a;
}
.dashboard-page .dash-kpi-value small {
    font-size: .9rem;
    font-weight: 700;
    color: #94a3b8;
}
.dashboard-page .dash-kpi-label {
    font-size: .82rem;
    font-weight: 600;
    color: #64748b;
    margin-top: .1rem;
}
.dashboard-page .dash-kpi--blue   .dash-kpi-icon { background: #e3eafc; }
.dashboard-page .dash-kpi--blue   .dash-kpi-icon i { color: #23426e; }
.dashboard-page .dash-kpi--rose   .dash-kpi-icon { background: #ffe4ec; }
.dashboard-page .dash-kpi--rose   .dash-kpi-icon i { color: #e11d68; }
.dashboard-page .dash-kpi--green  .dash-kpi-icon { background: #dcfce7; }
.dashboard-page .dash-kpi--green  .dash-kpi-icon i { color: #16a34a; }
.dashboard-page .dash-kpi--teal   .dash-kpi-icon { background: #d2f4ea; }
.dashboard-page .dash-kpi--teal   .dash-kpi-icon i { color: #00796b; }
.dashboard-page .dash-kpi--purple .dash-kpi-icon { background: #e9d8fd; }
.dashboard-page .dash-kpi--purple .dash-kpi-icon i { color: #805ad5; }

/* Data panels */
.dashboard-page .dash-panel {
    background: #fff;
    border: 1px solid #dce4f2;
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .08);
    padding: 1.1rem 1.15rem;
    height: 100%;
}
.dashboard-page .dash-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .9rem;
}
.dashboard-page .dash-panel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #23426e;
}
.dashboard-page .dash-panel-eyebrow i {
    font-size: 17px;
    color: #23426e;
}
.dashboard-page .dash-panel-link {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}
.dashboard-page .dash-panel-link i { font-size: 16px; }
.dashboard-page .dash-panel-count {
    min-width: 24px;
    text-align: center;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #fef2f2;
    color: #ef4444;
    font-size: .78rem;
    font-weight: 800;
}

/* Health ring */
.dashboard-page .dash-health {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.dashboard-page .dash-ring {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: conic-gradient(#22c55e calc(var(--dash-pct, 0) * 1%), #e9eef6 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.dashboard-page .dash-ring-center {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #eef2f8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dashboard-page .dash-ring-pct {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}
.dashboard-page .dash-ring-pct small { font-size: .9rem; color: #94a3b8; }
.dashboard-page .dash-ring-sub {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    margin-top: .2rem;
}
.dashboard-page .dash-health-legend {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 120px;
}
.dashboard-page .dash-health-legend-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
}
.dashboard-page .dash-health-num {
    font-weight: 800;
    color: #0f172a;
    min-width: 1.5rem;
}
.dashboard-page .dash-health-txt { color: #64748b; }
.dashboard-page .dash-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.dashboard-page .dash-dot--on { background: #22c55e; }
.dashboard-page .dash-dot--off { background: #f59e0b; }
.dashboard-page .dash-dot--total { background: #cbd5e1; }

/* Needs attention list */
.dashboard-page .dash-attention { max-height: 280px; overflow: auto; }
.dashboard-page .dash-attn-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dashboard-page .dash-attn-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 0;
    border-bottom: 1px solid #eef2f8;
}
.dashboard-page .dash-attn-row:last-child { border-bottom: 0; }
.dashboard-page .dash-attn-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .86rem;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-page .dash-attn-name:hover { color: #2563eb; }
.dashboard-page .dash-attn-meta {
    flex: 0 0 auto;
    font-size: .74rem;
    color: #94a3b8;
    font-weight: 500;
}
.dashboard-page .dash-attn-more {
    display: inline-block;
    margin-top: .6rem;
    font-size: .8rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

/* Player versions */
.dashboard-page .dash-version-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}
.dashboard-page .dash-version-row:last-child { margin-bottom: 0; }
.dashboard-page .dash-version-label {
    flex: 0 0 78px;
    font-size: .8rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-page .dash-version-bar {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: #eef2f8;
    overflow: hidden;
}
.dashboard-page .dash-version-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.dashboard-page .dash-version-count {
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 800;
    color: #0f172a;
    min-width: 1.5rem;
    text-align: right;
}

/* Empty states */
.dashboard-page .dash-empty {
    text-align: center;
    padding: 1.5rem .5rem;
    color: #94a3b8;
}
.dashboard-page .dash-empty i { font-size: 34px; }
.dashboard-page .dash-empty p { margin: .4rem 0 0; font-size: .85rem; font-weight: 600; }
.dashboard-page .dash-empty--ok { color: #16a34a; }
.dashboard-page .dash-empty--ok i { color: #22c55e; }

@media (max-width: 575px) {
    .dashboard-page .dash-health { justify-content: center; }
}

/* Dashboard analytics (ApexCharts panels) */
.dashboard-page .dash-analytics { margin-bottom: .25rem; }
.dashboard-page .dash-analytics > [class*="col-"] { margin-bottom: 1.25rem; }
.dashboard-page .dash-chart { width: 100%; min-height: 240px; }
.dashboard-page .dash-panel-sub {
    font-size: .74rem;
    color: #94a3b8;
    font-weight: 600;
}
.dashboard-page .dash-range-chip {
    font-size: .72rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5fb;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: .2rem .6rem;
}
/* KPI trend delta */
.dashboard-page .dash-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    font-size: .72rem;
    font-weight: 800;
    margin-left: .35rem;
    padding: .02rem .3rem;
    border-radius: 6px;
}
.dashboard-page .dash-kpi-delta i { font-size: 13px; }
.dashboard-page .dash-kpi-delta.is-up { color: #16a34a; background: #dcfce7; }
.dashboard-page .dash-kpi-delta.is-down { color: #dc2626; background: #fee2e2; }
/* Trend stat row */
.dashboard-page .dash-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: .2rem 0 1rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid #eef2f8;
}
.dashboard-page .dash-stat { display: flex; flex-direction: column; }
.dashboard-page .dash-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
.dashboard-page .dash-stat-label {
    font-size: .74rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* Content mix footer */
.dashboard-page .dash-mix-foot {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .5rem;
}
.dashboard-page .dash-mix-legend {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    color: #334155;
}
.dashboard-page .dash-mix-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.dashboard-page .dash-storage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 700;
    color: #475569;
    background: #f8fbff;
    border: 1px solid #e9eef6;
    border-radius: 10px;
    padding: .4rem .6rem;
}
.dashboard-page .dash-storage i { font-size: 16px; color: #94a3b8; }

/* Dashboard v2 — layout, promo restyle (replaces the old inline dash-polish), new widgets */
.dashboard-page .section-gap { margin-top: .25rem; }
.dashboard-page .dash-promo > [class*="col-"] { margin-bottom: 1.25rem; }
.dashboard-page .dashboard-active-card,
.dashboard-page .dash-wrap .card {
    border: 1px solid #dce4f2 !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .08) !important;
    background: #fff;
    overflow: hidden;
}
.dashboard-page .dashboard-active-card .card-header,
.dashboard-page .dashboard-active-card .card-header.card-header-success,
.dashboard-page .dashboard-active-card .card-header.card-header-info {
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #e9eef5;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: .85rem 1.15rem !important;
}
.dashboard-page .dashboard-active-card .card-header .card-title {
    color: #23426e !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 !important;
}
.dashboard-page .dashboard-active-card .card-body { padding: 1.1rem 1.15rem !important; }
.dashboard-page .dashboard-active-card .dashboard-upgrade h4 { font-size: .92rem; color: #334155; line-height: 1.8; }
.dashboard-page .dash-video { min-height: 300px; }
.dashboard-page .dash-video iframe { min-height: 280px; border-radius: 12px; }

/* Health radial + legend */
.dashboard-page .dash-chart--health { min-height: 230px; }
.dashboard-page .dash-health-legend--row {
    flex-direction: row;
    justify-content: space-around;
    gap: .5rem;
    padding-top: .5rem;
    border-top: 1px solid #eef2f8;
}
.dashboard-page .dash-health-legend--row .dash-health-legend-row { flex-direction: column; align-items: center; gap: .1rem; text-align: center; }
.dashboard-page .dash-health-legend--row .dash-health-txt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.dashboard-page .dash-health-legend--row .material-icons { font-size: 18px; }
.dashboard-page .dash-status-ok { color: #16a34a; }
.dashboard-page .dash-status-warn { color: #f59e0b; }
.dashboard-page .dash-status-muted { color: #94a3b8; }

/* Top content leaderboard */
.dashboard-page .dash-leader { list-style: none; margin: 0; padding: 0; }
.dashboard-page .dash-leader-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem 0;
    border-bottom: 1px solid #eef2f8;
}
.dashboard-page .dash-leader-row:last-child { border-bottom: 0; }
.dashboard-page .dash-leader-rank {
    flex: 0 0 22px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #f1f5fb;
    color: #23426e;
    font-size: .72rem;
    font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.dashboard-page .dash-leader-row:first-child .dash-leader-rank { background: #2a78d6; color: #fff; }
.dashboard-page .dash-leader-thumb {
    flex: 0 0 56px;
    width: 56px; height: 40px;
    border-radius: 8px;
    background: #e2e8f0 center/cover no-repeat;
    position: relative;
    overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
}
.dashboard-page .dash-leader-thumb .material-icons {
    color: #fff; font-size: 18px;
    background: rgba(2, 6, 23, .55); border-radius: 50%; padding: 2px;
}
.dashboard-page .dash-leader-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.dashboard-page .dash-leader-name { font-size: .84rem; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-page .dash-leader-bar { display: block; height: 6px; border-radius: 999px; background: #eef2f8; overflow: hidden; }
.dashboard-page .dash-leader-fill { display: block; height: 100%; border-radius: 999px; background: #2a78d6; }
.dashboard-page .dash-leader-val { flex: 0 0 auto; font-size: .84rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }

/* Content mix meter */
.dashboard-page .dash-mix-hero { text-align: center; margin: .2rem 0 .8rem; }
.dashboard-page .dash-mix-hero-num { display: block; font-size: 2rem; font-weight: 800; color: #0f172a; line-height: 1; }
.dashboard-page .dash-mix-hero-label { font-size: .74rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.dashboard-page .dash-meter { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #eef2f8; gap: 2px; }
.dashboard-page .dash-meter-fill { display: block; height: 100%; }
.dashboard-page .dash-meter-img { background: #2a78d6; border-radius: 999px 0 0 999px; }
.dashboard-page .dash-meter-vid { background: #eb6834; border-radius: 0 999px 999px 0; }
.dashboard-page .dash-mix-legend { display: flex; flex-direction: column; gap: .4rem; margin: .8rem 0; font-size: .82rem; font-weight: 600; color: #334155; }
.dashboard-page .dash-mix-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.dashboard-page .dash-mix-legend em { margin-left: auto; font-style: normal; color: #64748b; font-weight: 700; }
.dashboard-page .dash-mix-legend .material-icons { font-size: 17px; }
.dashboard-page .dash-mix-ic-img { color: #2a78d6; }
.dashboard-page .dash-mix-ic-vid { color: #eb6834; }

/* Attention list in two columns on wide panels */
.dashboard-page .dash-attn-list--cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
.dashboard-page .dash-attn-list--cols .dash-attn-row .material-icons { font-size: 16px; }
@media (max-width: 767px) { .dashboard-page .dash-attn-list--cols { grid-template-columns: 1fr; } }

/* Dashboard: plan-upgrade card inside an analytics row stretches like the data panels */
.dashboard-page .dash-analytics .dashboard-active-card {
    height: 100% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}
.dashboard-page .dash-analytics .dashboard-active-card > .h-100 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.dashboard-page .dash-analytics .dashboard-active-card .card-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-page .dash-analytics .dashboard-active-card .dashboard-upgrade {
    height: auto !important;
    flex: 1 1 auto;
}

/* Dashboard v3 — review fixes: uniform rhythm, equal-height legacy cards, plan card, reports section */
.dashboard-page > .row { margin-top: 0 !important; margin-bottom: 0 !important; }
.dashboard-page > .row > [class*="col-"] { margin-bottom: 1.25rem !important; }
.dashboard-page .dashboard-active-card {
    height: 100% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}
.dashboard-page .dashboard-active-card > .h-100 { display: flex; flex-direction: column; flex: 1 1 auto; }
.dashboard-page .dashboard-active-card .card-body { flex: 1 1 auto; }
.dashboard-page .dashboard-active-card .dash-video { display: flex; padding: 1.1rem 1.15rem !important; }
.dashboard-page .dashboard-active-card .dash-video iframe { flex: 1 1 auto; width: 100%; height: auto; min-height: 320px; border-radius: 12px; }

/* Plan upgrade card */
.dashboard-page .dash-plan {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #0b1220 0%, #1f3356 100%);
    border-color: #1f3356;
    color: #fff;
}
.dashboard-page .dash-plan .dash-panel-eyebrow,
.dashboard-page .dash-plan .dash-panel-eyebrow i { color: #93c5fd; }
.dashboard-page .dash-plan-name { font-size: 1.35rem; font-weight: 800; margin: .1rem 0 .15rem; color: #fff; letter-spacing: -.01em; }
.dashboard-page .dash-plan-tag { font-size: .8rem; color: rgba(226, 232, 240, .78); margin-bottom: .9rem; }
.dashboard-page .dash-plan-features { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; flex: 1 1 auto; }
.dashboard-page .dash-plan-features li { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: #e2e8f0; }
.dashboard-page .dash-plan-features .material-icons { font-size: 18px; color: #4ade80; flex: 0 0 auto; }
.dashboard-page .dash-plan-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.dashboard-page .dash-plan-price { font-size: 1.6rem; font-weight: 800; line-height: 1; color: #fff; }
.dashboard-page .dash-plan-price small { font-size: .76rem; font-weight: 600; color: rgba(226, 232, 240, .72); margin-left: .15rem; }
.dashboard-page .dash-plan-foot .btn { margin: 0; border-radius: 10px; font-weight: 700; }

/* Reports section (bottom) */
.dashboard-page .dash-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem .75rem; margin: 0; }
.dashboard-page .dash-section-title { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.02rem; font-weight: 700; color: #0f172a; margin: 0; }
.dashboard-page .dash-section-title i { color: #23426e; font-size: 20px; }
.dashboard-page .dash-section-sub { font-size: .8rem; color: #64748b; font-weight: 500; }
.dashboard-page .dash-empty--reports { padding: 2.75rem 1rem; }
.dashboard-page .dash-empty--reports i { font-size: 48px; color: #94a3b8; }
.dashboard-page .dash-empty--reports h4 { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: .6rem 0 .3rem; }
.dashboard-page .dash-empty--reports p { color: #64748b; max-width: 520px; margin: 0 auto 1.1rem; font-weight: 500; }
.dashboard-page .dash-empty--reports .btn { margin: 0; border-radius: 10px; font-weight: 700; }
.dashboard-page .dash-kpi--amber .dash-kpi-icon { background: #fef3c7; }
.dashboard-page .dash-kpi--amber .dash-kpi-icon i { color: #b45309; }
.dashboard-page .dash-map-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dashboard-page .dash-map-count { margin-left: .45rem; padding: .1rem .55rem; border-radius: 999px; background: #eef3fa; color: #23426e; font-size: .72rem; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* ==========================================================================
   Reports page (.reports-page) — shares the dashboard component language
   ========================================================================== */
.reports-page .page-hero { margin-bottom: 1.25rem; }
.reports-page .page-hero-buttons form { margin: 0; }
/* Date filter bar */
.reports-page .rp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .8rem 1.15rem; }
.reports-page .rp-filter-label { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #23426e; }
.reports-page .rp-filter-label i { font-size: 17px; }
.reports-page .rp-presets { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 auto; }
.reports-page .rp-preset {
    border: 1px solid #dce4f2; background: #f8fbff; color: #334155;
    border-radius: 999px; padding: .35rem .85rem; font-size: .76rem; font-weight: 700; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.reports-page .rp-preset:hover { border-color: #2563eb; color: #2563eb; background: #fff; }
.reports-page .rp-preset.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }
.reports-page .rp-range-form { margin: 0; flex: 0 0 auto; }
.reports-page .rp-range { width: 270px; max-width: 100%; }
.reports-page .rp-range .input-group-text { background: #f8fbff; border: 1px solid #dce4f2; border-right: 0; border-radius: 10px 0 0 10px; color: #64748b; padding: 0 .6rem; }
.reports-page .rp-range .input-group-text i { font-size: 18px; }
.reports-page .rp-range .form-control {
    border: 1px solid #dce4f2 !important; border-left: 0 !important; border-radius: 0 10px 10px 0 !important;
    background: #f8fbff !important; background-image: none !important; box-shadow: none !important;
    color: #0f172a !important; font-weight: 600; font-size: .84rem; min-height: 38px; padding: .3rem .6rem !important; cursor: pointer;
}
.reports-page .dash-kpi { cursor: default; }
/* Peak performance */
.reports-page .rp-peak-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin: .2rem 0 .5rem; }
.reports-page .rp-peak-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.reports-page .rp-peak-row { display: flex; align-items: center; gap: .6rem; }
.reports-page .rp-peak-label { flex: 0 0 82px; font-size: .84rem; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reports-page .rp-peak-bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: #eef2f8; overflow: hidden; }
.reports-page .rp-peak-fill { display: block; height: 100%; border-radius: 999px; background: #2a78d6; }
.reports-page .rp-peak-fill--alt { background: #eb6834; }
.reports-page .rp-peak-val { flex: 0 0 auto; font-size: .8rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.reports-page .rp-peak-val em { font-style: normal; font-weight: 600; color: #94a3b8; margin-left: .2rem; }
/* Shared chip */
.reports-page .rp-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; background: #eef3fa; border: 1px solid #dce4f2; color: #334155; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.reports-page .rp-chip b { color: #0f172a; font-weight: 800; }
.reports-page .rp-chip--muted { background: #f8fafc; color: #64748b; }
/* Leaderboard links */
.reports-page .dash-leader-thumb { text-decoration: none; }
.reports-page .dash-leader-name:hover { color: #2563eb; }
/* Creative gallery */
.reports-page .rp-creative-grid { margin-left: -8px; margin-right: -8px; }
.reports-page .rp-creative-grid > [class*="col-"] { padding-left: 8px; padding-right: 8px; margin-bottom: 1rem !important; }
.reports-page .rp-creative { background: #fff; border: 1px solid #e9eef6; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 16px rgba(15, 23, 42, .06); height: 100%; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.reports-page .rp-creative:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(15, 23, 42, .12); }
.reports-page .rp-creative-media { position: relative; display: block; aspect-ratio: 16 / 10; background: #0f172a center/cover no-repeat; }
.reports-page .rp-creative-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reports-page .rp-creative-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 44px; color: rgba(255, 255, 255, .9); text-shadow: 0 2px 10px rgba(0, 0, 0, .35); pointer-events: none; }
.reports-page .rp-creative-total { position: absolute; top: .5rem; left: .5rem; padding: .15rem .55rem; border-radius: 999px; background: rgba(2, 6, 23, .68); color: #fff; font-size: .7rem; font-weight: 700; backdrop-filter: blur(4px); }
.reports-page .rp-creative-body { padding: .7rem .8rem .8rem; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; }
.reports-page .rp-creative-name { font-size: .86rem; font-weight: 700; color: #0f172a; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reports-page .rp-creative-name:hover { color: #2563eb; }
.reports-page .rp-creative-screens { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 84px; overflow: auto; }
/* Playlist breakdown */
.reports-page .rp-playlist-grid { margin-left: -8px; margin-right: -8px; }
.reports-page .rp-playlist-grid > [class*="col-"] { padding-left: 8px; padding-right: 8px; margin-bottom: 1rem !important; }
.reports-page .rp-playlist { background: #f8fbff; border: 1px solid #e9eef6; border-radius: 14px; padding: .9rem 1rem; height: 100%; display: flex; flex-direction: column; }
.reports-page .rp-playlist-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.reports-page .rp-playlist-name { font-size: .95rem; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reports-page .rp-playlist-stats { display: flex; gap: 1.25rem; padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid #e9eef6; font-size: .95rem; font-weight: 800; color: #0f172a; }
.reports-page .rp-playlist-stats em { display: block; font-style: normal; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.reports-page .rp-playlist-table { max-height: 220px; overflow: auto; }
.reports-page .rp-playlist-table .table { font-size: .82rem; }
.reports-page .rp-playlist-table th { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; border-top: 0; border-bottom: 1px solid #e9eef6; padding: .3rem .4rem; }
.reports-page .rp-playlist-table td { padding: .35rem .4rem; border-top: 1px solid #eef2f8; color: #334155; font-weight: 500; font-variant-numeric: tabular-nums; }
.reports-page .rp-playlist-empty { font-size: .84rem; color: #94a3b8; }
@media (max-width: 767px) {
    .reports-page .rp-range { width: 100%; }
    .reports-page .rp-range-form { flex: 1 1 100%; }
}

/* Reports — dense table + master/detail (scrollable for large accounts) */
.reports-page .rp-head-tools { align-items: flex-start; }
.reports-page .rp-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem .9rem; }
.reports-page .rp-search-wrap { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: 0 .55rem; height: 34px; border: 1px solid #dce4f2; border-radius: 10px; background: #f8fbff; }
.reports-page .rp-search-wrap i { font-size: 17px; color: #94a3b8; }
.reports-page .rp-search-wrap:focus-within { border-color: #2563eb; background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.reports-page .rp-search { border: 0; background: transparent; outline: 0; width: 170px; font-size: .82rem; font-weight: 600; color: #0f172a; }
.reports-page .rp-search::placeholder { color: #94a3b8; font-weight: 500; }

.reports-page .rp-table-wrap { max-height: 520px; overflow: auto; border: 1px solid #e9eef6; border-radius: 12px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.reports-page .rp-table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.reports-page .rp-table-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.reports-page .rp-table-wrap--detail { max-height: 440px; border: 0; border-radius: 0; }
.reports-page .rp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; }
.reports-page .rp-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fbff; color: #64748b; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .55rem .75rem; border-bottom: 1px solid #e9eef6; white-space: nowrap; }
.reports-page .rp-table td { padding: .55rem .75rem; border-bottom: 1px solid #eef2f8; vertical-align: middle; color: #334155; }
.reports-page .rp-table tbody tr:last-child td { border-bottom: 0; }
.reports-page .rp-table tbody tr.rp-row:hover td { background: #fbfcfe; }
.reports-page .rp-col-rank { width: 44px; }
.reports-page .rp-col-share { width: 30%; min-width: 150px; }
.reports-page .rp-col-toggle { width: 44px; text-align: right; }
.reports-page .rp-num { font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reports-page .rp-muted { color: #64748b; font-weight: 600; }
.reports-page .rp-cell-name { font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; display: inline-block; vertical-align: middle; }
.reports-page .rp-creative-cell { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; max-width: 100%; }
.reports-page .rp-creative-cell:hover .rp-cell-name { color: #2563eb; }
.reports-page .rp-thumb { flex: 0 0 48px; width: 48px; height: 34px; border-radius: 7px; background: #e2e8f0 center/cover no-repeat; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.reports-page .rp-thumb .material-icons { font-size: 16px; color: #fff; background: rgba(2, 6, 23, .55); border-radius: 50%; padding: 2px; }
.reports-page .rp-bar { display: inline-block; vertical-align: middle; width: calc(100% - 52px); height: 8px; border-radius: 999px; background: #eef2f8; overflow: hidden; }
.reports-page .rp-bar-fill { display: block; height: 100%; border-radius: 999px; background: #2a78d6; }
.reports-page .rp-bar-fill--alt { background: #eb6834; }
.reports-page .rp-bar-pct { display: inline-block; vertical-align: middle; width: 46px; text-align: right; font-size: .74rem; font-weight: 700; color: #64748b; font-variant-numeric: tabular-nums; }
.reports-page .rp-toggle { width: 30px; height: 30px; border: 1px solid #dce4f2; border-radius: 8px; background: #fff; color: #64748b; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: transform .15s ease, border-color .15s ease, color .15s ease; }
.reports-page .rp-toggle i { font-size: 18px; transition: transform .18s ease; }
.reports-page .rp-toggle:hover { border-color: #2563eb; color: #2563eb; }
.reports-page .rp-toggle.is-open i { transform: rotate(180deg); }
.reports-page .rp-row-detail td { background: #f8fbff; padding: .6rem 1rem .75rem 4.5rem; }
.reports-page .rp-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .4rem 1.5rem; }
.reports-page .rp-detail-row { display: flex; align-items: center; gap: .6rem; font-size: .8rem; }
.reports-page .rp-detail-name { flex: 0 0 120px; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reports-page .rp-detail-row .rp-bar { flex: 1 1 auto; width: auto; }
.reports-page .rp-detail-row .rp-num { flex: 0 0 auto; min-width: 2.4rem; text-align: right; font-size: .8rem; }
.reports-page .rp-nomatch { padding: 1.5rem; text-align: center; color: #94a3b8; font-weight: 600; font-size: .86rem; }

@media (max-width: 991px) {
    .reports-page .rp-cell-name { max-width: 200px; }
}

.reports-page .rp-thumb--icon { background: #eef3fa; }
.reports-page .rp-thumb--icon .material-icons { background: none; color: #23426e; font-size: 20px; padding: 0; }
.reports-page .rp-detail-avg { flex: 0 0 auto; font-size: .72rem; font-weight: 600; color: #94a3b8; white-space: nowrap; min-width: 4.2rem; text-align: right; }

/* Reports — playlist distribution strips */
.reports-page .rp-sorts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.reports-page .rp-sort-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; margin-right: .2rem; }
.reports-page .rp-sort { border: 1px solid #dce4f2; background: #f8fbff; color: #334155; border-radius: 999px; padding: .28rem .7rem; font-size: .74rem; font-weight: 700; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.reports-page .rp-sort:hover { border-color: #2563eb; color: #2563eb; background: #fff; }
.reports-page .rp-sort.is-active { background: #23426e; border-color: #23426e; color: #fff; }
.reports-page .rp-strip-hint { font-size: .8rem; color: #64748b; margin: -.2rem 0 .8rem; }
.reports-page .rp-strips-wrap { max-height: 600px; overflow: auto; border: 1px solid #e9eef6; border-radius: 12px; padding: .35rem .6rem; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.reports-page .rp-strips-wrap::-webkit-scrollbar { width: 8px; }
.reports-page .rp-strips-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.reports-page .rp-strip { display: grid; grid-template-columns: minmax(200px, 26%) 1fr; align-items: center; gap: 1rem; padding: .6rem .3rem; border-bottom: 1px solid #eef2f8; }
.reports-page .rp-strip:last-of-type { border-bottom: 0; }
.reports-page .rp-strip.is-collapsed, .reports-page .rp-strip.is-filtered { display: none; }
.reports-page .rp-strip-meta { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.reports-page .rp-strip-name { font-size: .9rem; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reports-page .rp-strip-stats { font-size: .74rem; color: #64748b; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reports-page .rp-strip-stats b { color: #0f172a; font-weight: 800; }
.reports-page .rp-strip-stats i { font-style: normal; color: #cbd5e1; margin: 0 .2rem; }
.reports-page .rp-strip-bar { display: flex; height: 28px; border-radius: 8px; overflow: hidden; background: #f1f5fb; gap: 2px; }
.reports-page .rp-seg { display: flex; align-items: center; min-width: 3px; height: 100%; overflow: hidden; transition: filter .15s ease; cursor: default; }
.reports-page .rp-seg:hover { filter: brightness(1.12); }
.reports-page .rp-seg-label { padding: 0 .5rem; font-size: .72rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reports-page .rp-seg-1 { background: #0d366b; } .reports-page .rp-seg-2 { background: #1c5cab; } .reports-page .rp-seg-3 { background: #256abf; } .reports-page .rp-seg-4 { background: #3987e5; }
.reports-page .rp-seg-5 { background: #5598e7; } .reports-page .rp-seg-6 { background: #6da7ec; } .reports-page .rp-seg-7 { background: #86b6ef; } .reports-page .rp-seg-8 { background: #9ec5f4; }
.reports-page .rp-seg-7 .rp-seg-label, .reports-page .rp-seg-8 .rp-seg-label { color: #0f172a; }
.reports-page .rp-seg-other { background: repeating-linear-gradient(135deg, #e2e8f0 0 6px, #f1f5f9 6px 12px); }
.reports-page .rp-seg-other .rp-seg-label { color: #475569; }
.reports-page .rp-seg-empty { width: 100%; background: #f8fafc; border: 1px dashed #dce4f2; border-radius: 8px; justify-content: center; }
.reports-page .rp-seg-empty .rp-seg-label { color: #94a3b8; font-weight: 600; }
.reports-page .rp-strip-more-wrap { text-align: center; padding: .75rem 0 .4rem; }
.reports-page .rp-strip-more { border-radius: 10px; font-weight: 700; margin: 0; }
@media (max-width: 767px) { .reports-page .rp-strip { grid-template-columns: 1fr; gap: .4rem; } }
.reports-page .rp-seg-unassigned { background: repeating-linear-gradient(135deg, #f1f5f9 0 4px, #e2e8f0 4px 5px); border: 1px dashed #cbd5e1; }
.reports-page .rp-seg-unassigned .rp-seg-label { color: #64748b; font-weight: 600; }
.reports-page .rp-strip-search { border: 0; background: transparent; outline: 0; width: 170px; font-size: .82rem; font-weight: 600; color: #0f172a; -webkit-appearance: none; appearance: none; }
.reports-page .rp-strip-search::placeholder { color: #94a3b8; font-weight: 500; }

/* Reports — screen leaderboard with 24h sparklines */
.reports-page .rp-board-wrap { max-height: 380px; overflow: auto; border: 1px solid #e9eef6; border-radius: 12px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.reports-page .rp-board-wrap::-webkit-scrollbar { width: 8px; }
.reports-page .rp-board-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.reports-page .rp-board { list-style: none; margin: 0; padding: 0; }
.reports-page .rp-board-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 96px 92px; align-items: center; gap: .7rem; padding: .55rem .8rem; border-bottom: 1px solid #eef2f8; }
.reports-page .rp-board-row:last-child { border-bottom: 0; }
.reports-page .rp-board-row:hover { background: #fbfcfe; }
.reports-page .rp-board-main { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.reports-page .rp-board-name { display: flex; align-items: center; gap: .4rem; font-size: .86rem; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reports-page .rp-status-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.reports-page .rp-status-dot.is-on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.reports-page .rp-status-dot.is-off { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.reports-page .rp-board-sub { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; color: #64748b; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reports-page .rp-board-sub .material-icons { font-size: 13px; color: #94a3b8; }
.reports-page .rp-spark { width: 96px; height: 28px; overflow: visible; }
.reports-page .rp-spark polyline { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.reports-page .rp-board-val { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.reports-page .rp-board-val b { font-size: .9rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.reports-page .rp-board-bar { display: block; width: 92px; height: 5px; border-radius: 999px; background: #eef2f8; overflow: hidden; }
.reports-page .rp-board-fill { display: block; height: 100%; border-radius: 999px; background: #2a78d6; }
@media (max-width: 575px) { .reports-page .rp-board-row { grid-template-columns: 26px minmax(0, 1fr) 80px; } .reports-page .rp-spark { display: none; } }
.reports-page .rp-board-wrap { max-height: 468px; }
.reports-page .rp-board-row { grid-template-columns: 26px minmax(0, 1fr) 88px 74px; gap: .6rem; }
.reports-page .rp-spark { width: 88px; }
.reports-page .rp-board-bar { width: 74px; }
.reports-page .rp-board-sub em { font-style: normal; color: #cbd5e1; margin: 0 .1rem; }

/* ==========================================================================
   Setup Wizard (.wizard-page) — single page
   ========================================================================== */
.wizard-page .page-hero { margin-bottom: 1.25rem; }
.wizard-page > .container-fluid > .row > [class*="col-"] { margin-bottom: 1.25rem; }
.wizard-page .wz-panel { background: #fff; border: 1px solid #dce4f2; border-radius: 18px; box-shadow: 0 16px 30px rgba(15, 23, 42, .08); overflow: hidden; position: relative; }
.wizard-page .wz-panel + .wz-panel { margin-top: 1.25rem; }
.wizard-page .wz-panel.is-locked { opacity: .62; }
.wizard-page .wz-panel.is-locked .wz-head { background: #f8fbff; }
.wizard-page .wz-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem .9rem; padding: .95rem 1.15rem; border-bottom: 1px solid #e9eef5; }
.wizard-page .wz-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #23426e; }
.wizard-page .wz-eyebrow > i { font-size: 18px; color: #23426e; }
.wizard-page .wz-num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: 0; }
.wizard-page .wz-num i { font-size: 16px; }
.wizard-page .wz-num.is-done { background: #dcfce7; color: #15803d; }
.wizard-page .wz-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: .05rem .5rem; border-radius: 999px; background: #eef3fa; color: #23426e; font-size: .74rem; font-weight: 800; letter-spacing: 0; }
.wizard-page .wz-head-tools { display: flex; align-items: center; gap: .75rem; }
.wizard-page .wz-head-tools .btn, .wizard-page .wz-actions .btn, .wizard-page .wz-inline .btn, .wizard-page .wz-empty .btn { margin: 0; border-radius: 10px; font-weight: 700; white-space: nowrap; }
.wizard-page .wz-body { padding: 1.15rem; }
.wizard-page .wz-body--tight { padding: .9rem 1.15rem 1.15rem; }
.wizard-page .wz-actions { display: flex; justify-content: flex-end; margin-top: .9rem; }
.wizard-page .wz-link { display: inline-flex; align-items: center; gap: .15rem; font-size: .8rem; font-weight: 700; color: #2563eb; text-decoration: none; }
.wizard-page .wz-link i { font-size: 16px; }
.wizard-page .wz-banner { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; padding: .8rem 1rem; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; font-weight: 700; font-size: .9rem; }
.wizard-page .wz-banner i { font-size: 20px; }
.wizard-page .wz-muted { display: flex; align-items: center; gap: .45rem; padding: .7rem .85rem; border-radius: 12px; background: #f8fbff; border: 1px dashed #d8e1ef; color: #64748b; font-size: .84rem; font-weight: 500; }
.wizard-page .wz-muted i { font-size: 18px; color: #94a3b8; }
.wizard-page .wz-hint { display: flex; align-items: flex-start; gap: .4rem; margin: .8rem 0 0; font-size: .8rem; color: #64748b; }
.wizard-page .wz-hint i { font-size: 17px; color: #94a3b8; flex: 0 0 auto; }
.wizard-page .wz-error { margin-top: .8rem; padding: .6rem .8rem; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: .84rem; font-weight: 600; }
.wizard-page .wz-chip { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px; background: #eef3fa; border: 1px solid #dce4f2; color: #23426e; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.wizard-page .wz-chip.is-on { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.wizard-page .wz-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.wizard-page .wz-dot.is-on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.wizard-page .wz-dot.is-off { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.wizard-page .wz-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 700; color: #64748b; }
.wizard-page .wz-status.is-on { color: #15803d; }
/* Screen summary */
.wizard-page .wz-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.wizard-page .wz-summary-name { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
/* Fields */
.wizard-page .wz-field { margin-bottom: 1rem; }
.wizard-page .wz-label { display: block; font-size: .78rem; font-weight: 700; color: #334155; margin: 0 0 .4rem; }
.wizard-page .wz-field .form-control, .wizard-page .wz-inline .form-control {
    border: 1px solid #dce3ef !important; border-radius: 10px !important; background: #f8fbff !important; background-image: none !important; box-shadow: none !important;
    color: #0f172a !important; font-weight: 600; font-size: .92rem; min-height: 44px; padding: .5rem .85rem !important;
}
.wizard-page .form-control:focus { border-color: #2563eb !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important; }
.wizard-page .wz-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: lowercase; }
.wizard-page .wz-select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%) !important; background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50% !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; padding-right: 2.2rem !important; }
.wizard-page .wz-inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wizard-page .wz-inline .form-control { flex: 1 1 200px; min-width: 0; }
.wizard-page .wz-or { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.wizard-page .wz-orient { display: flex; flex-wrap: wrap; gap: .6rem; }
.wizard-page .wz-orient-opt { position: relative; display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; border: 1px solid #dce4f2; border-radius: 12px; background: #fff; cursor: pointer; margin: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.wizard-page .wz-orient-opt input { position: absolute; opacity: 0; pointer-events: none; }
.wizard-page .wz-orient-opt.is-selected { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); background: #f8fbff; }
.wizard-page .wz-orient-shape { display: block; border: 2px solid #23426e; border-radius: 4px; background: #e3eafc; }
.wizard-page .wz-orient-shape--land { width: 34px; height: 20px; }
.wizard-page .wz-orient-shape--port { width: 20px; height: 34px; }
.wizard-page .wz-orient-name { font-size: .88rem; font-weight: 700; color: #0f172a; }
/* Help expander + TV code mock */
.wizard-page .wz-help { margin-top: .4rem; border: 1px dashed #d8e1ef; border-radius: 12px; background: #f8fbff; }
.wizard-page .wz-help summary { list-style: none; display: flex; align-items: center; gap: .4rem; padding: .65rem .85rem; cursor: pointer; font-size: .84rem; font-weight: 700; color: #2563eb; }
.wizard-page .wz-help summary::-webkit-details-marker { display: none; }
.wizard-page .wz-help summary i { font-size: 18px; }
.wizard-page .wz-help-body { padding: 0 .85rem .9rem; }
.wizard-page .wz-help-body a { color: #2563eb; font-weight: 700; }
.wizard-page .wz-howto { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.wizard-page .wz-howto li { display: flex; align-items: flex-start; gap: .6rem; font-size: .84rem; color: #334155; line-height: 1.45; }
.wizard-page .wz-howto-num { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #e3eafc; color: #23426e; font-size: .7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: .05rem; }
.wizard-page .wz-tv { margin: .6rem auto 0; max-width: 260px; }
.wizard-page .wz-tv-screen { aspect-ratio: 16 / 9; border-radius: 10px; background: radial-gradient(120% 100% at 50% 0%, #1f3356 0%, #0b1220 70%); border: 5px solid #111827; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; color: #fff; }
.wizard-page .wz-tv-brand { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.wizard-page .wz-tv-label { font-size: .68rem; color: rgba(255, 255, 255, .75); }
.wizard-page .wz-tv-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.3rem; font-weight: 800; letter-spacing: .08em; padding: .1rem .7rem; border: 2px dashed rgba(255, 255, 255, .5); border-radius: 8px; }
.wizard-page .wz-tv-stand { width: 34%; height: 7px; margin: 0 auto; background: #111827; border-radius: 0 0 8px 8px; }
/* Switchers */
.wizard-page .wz-switch { display: inline-block; }
.wizard-page .wz-switch-btn { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; padding: .5rem .8rem; border: 1px solid #dce4f2; border-radius: 12px; background: #f8fbff; color: #0f172a; font-weight: 700; font-size: .88rem; cursor: pointer; }
.wizard-page .wz-switch-btn > .material-icons { font-size: 19px; color: #64748b; }
.wizard-page .wz-switch--hero .wz-switch-btn { background: rgba(15, 23, 42, .32); border-color: rgba(148, 163, 184, .45); color: #fff; border-radius: 11px; padding: .45rem .8rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.wizard-page .wz-switch--hero .wz-switch-btn > .material-icons { color: #fff; font-size: 17px; }
.wizard-page .wz-switch-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wizard-page .wz-switch-code { font-size: .72rem; font-weight: 700; color: #64748b; background: #eef3fa; border-radius: 6px; padding: .1rem .4rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wizard-page .wz-switch-menu { min-width: 280px; max-height: 320px; overflow: auto; border: 1px solid #dce4f2; border-radius: 12px; box-shadow: 0 16px 30px rgba(15, 23, 42, .14); padding: .3rem; }
.wizard-page .wz-switch-item { display: flex; align-items: center; gap: .5rem; border-radius: 8px; font-size: .86rem; font-weight: 600; color: #0f172a; padding: .5rem .65rem; text-transform: none; letter-spacing: 0; }
.wizard-page .wz-switch-item i.material-icons { font-size: 18px; color: #64748b; }
.wizard-page .wz-switch-item.is-current { background: #eef3fa; }
.wizard-page .wz-switch-item.is-muted { color: #94a3b8; }
.wizard-page .wz-switch-item .wz-switch-code { margin-left: auto; }
/* Playlist */
.wizard-page .wz-pl-current { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid #eef2f8; }
.wizard-page .wz-pl-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.wizard-page .wz-pl-name { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.wizard-page .wz-pl-name i { color: #23426e; }
.wizard-page .wz-assign-form { margin: 0; }
.wizard-page .wz-strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; padding: .85rem 1.15rem .4rem; border-top: 1px solid #e9eef5; }
.wizard-page .wz-strip-title { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 700; color: #0f172a; }
.wizard-page .wz-strip-sub { font-size: .78rem; color: #94a3b8; font-weight: 500; margin: 0 0 .6rem; }
.wizard-page .wz-strip { display: flex; gap: .6rem; overflow-x: auto; padding: .4rem 1.15rem 1.15rem; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.wizard-page .wz-strip .wz-tile { flex: 0 0 150px; }
.wizard-page .wz-strip-empty { display: flex; align-items: center; gap: .5rem; width: 100%; padding: 1rem; border: 1px dashed #d8e1ef; border-radius: 12px; background: #f8fbff; color: #64748b; font-size: .84rem; font-weight: 500; }
.wizard-page .wz-strip-empty i { color: #94a3b8; }
/* Media tiles */
.wizard-page .wz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; max-height: 520px; overflow: auto; padding: .1rem .1rem .3rem; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.wizard-page .wz-tile { position: relative; margin: 0 !important; border: 1px solid #e9eef6 !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 4px 10px rgba(15, 23, 42, .06) !important; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.wizard-page .wz-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(15, 23, 42, .12) !important; }
.wizard-page .wz-tile-media { position: relative; aspect-ratio: 4 / 3; background: #0f172a center/cover no-repeat; display: flex; align-items: center; justify-content: center; }
.wizard-page .wz-tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wizard-page .wz-tile-media--app { background: linear-gradient(135deg, #e3eafc, #d1e3fa); color: #23426e; flex-direction: column; gap: .2rem; font-size: .74rem; font-weight: 700; text-align: center; padding: .5rem; }
.wizard-page .wz-tile-media--app i { font-size: 28px; }
.wizard-page .wz-tile-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
.wizard-page .wz-tile-play i { font-size: 40px; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.wizard-page .wz-tile-name { padding: .4rem .55rem; font-size: .74rem; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wizard-page .wz-tile-actions { position: absolute; top: .4rem; left: .4rem; right: .4rem; display: flex; justify-content: space-between; gap: .3rem; opacity: 0; transition: opacity .15s ease; z-index: 3; }
.wizard-page .wz-tile:hover .wz-tile-actions, .wizard-page .wz-tile:hover .wz-tile-remove { opacity: 1; }
.wizard-page .wz-tile-remove { position: absolute; top: .4rem; right: .4rem; margin: 0; opacity: 0; transition: opacity .15s ease; z-index: 3; }
.wizard-page .wz-tile-btn { position: static !important; width: 30px; height: 30px; border-radius: 9px; display: inline-flex !important; align-items: center; justify-content: center; background: rgba(15, 23, 42, .78); color: #fff !important; cursor: pointer; text-decoration: none; padding: 0 !important; margin: 0 !important; transition: background .15s ease, transform .15s ease; }
.wizard-page .wz-tile-btn i { font-size: 18px !important; color: #fff !important; position: static; margin: 0; }
.wizard-page .wz-tile-btn:hover { transform: scale(1.08); }
.wizard-page .wz-tile-btn--add { background: #16a34a; }
.wizard-page .wz-tile-btn--add.is-disabled { background: rgba(15, 23, 42, .45); cursor: not-allowed; }
.wizard-page .wz-tile-btn--add.is-busy { opacity: .6; pointer-events: none; }
.wizard-page .wz-tile-btn--danger { background: rgba(220, 38, 38, .9); }
/* Preview */
.wizard-page .wz-sticky { position: sticky; top: 1rem; }
.wizard-page .wz-live { display: flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; background: #f0fdf4; color: #15803d; font-size: .84rem; font-weight: 700; border-bottom: 1px solid #bbf7d0; }
.wizard-page .wz-live i { font-size: 18px; }
.wizard-page .wz-preview { background: #0f172a; display: flex; align-items: center; justify-content: center; padding: .8rem; }
.wizard-page .wz-preview .wizard-iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; background: #000; display: block; }
.wizard-page .wz-preview.is-portrait .wizard-iframe { width: 56%; aspect-ratio: 9 / 16; }
.wizard-page .wz-preview-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; padding: .7rem 1.15rem; font-size: .78rem; color: #64748b; border-top: 1px solid #e9eef5; }
.wizard-page .wz-preview-empty { padding: .8rem; background: #f8fbff; }
.wizard-page .wz-preview-empty-box { aspect-ratio: 16 / 9; border-radius: 10px; border: 2px dashed #cbd5e1; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center; padding: 1rem 1.5rem; color: #64748b; }
.wizard-page .wz-preview-empty.is-portrait .wz-preview-empty-box { aspect-ratio: auto; min-height: 320px; }
.wizard-page .wz-preview-empty-box i { font-size: 40px; color: #94a3b8; }
.wizard-page .wz-preview-empty-box strong { font-size: 1rem; color: #0f172a; }
.wizard-page .wz-preview-empty-box span { font-size: .82rem; }
/* Empty state */
.wizard-page .wz-empty { text-align: center; padding: 2rem 1rem; color: #94a3b8; }
.wizard-page .wz-empty i { font-size: 44px; }
.wizard-page .wz-empty h4 { font-size: 1rem; font-weight: 700; color: #0f172a; margin: .5rem 0 .3rem; }
.wizard-page .wz-empty p { color: #64748b; font-weight: 500; margin: 0 0 1rem; }
@media (max-width: 991px) { .wizard-page .wz-sticky { position: static; } }
/* wizard hero hosts a dropdown: it must not clip its overflow */
.wizard-page .page-hero { overflow: visible; }
.wizard-page .page-hero:before { display: none; }
.wizard-page .wz-switch-menu { z-index: 1060; }
/* wizard v2 polish: hero progress, dismissible banner, TV bezel preview, touch-friendly tiles, busy buttons */
.wizard-page .wz-progress { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .8rem 0 0; padding: 0; position: relative; z-index: 1; }
.wizard-page .wz-progress li { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 700; color: rgba(248, 250, 252, .62); letter-spacing: .02em; }
.wizard-page .wz-progress li span { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); display: inline-block; }
.wizard-page .wz-progress li.is-active { color: #fff; }
.wizard-page .wz-progress li.is-active span { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
.wizard-page .wz-progress li.is-done { color: #fff; }
.wizard-page .wz-progress li.is-done span { background: #22c55e; border-color: #22c55e; }
.wizard-page .wz-banner { position: relative; padding-right: 2.6rem; }
.wizard-page .wz-banner-close { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #15803d; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wizard-page .wz-banner-close:hover { background: rgba(21, 128, 61, .1); }
.wizard-page .wz-banner-close i { font-size: 18px; }
.wizard-page .wz-preview { background: #0b1220; padding: 1rem 1rem 1.25rem; position: relative; }
.wizard-page .wz-preview .wizard-iframe { border: 6px solid #111827; border-radius: 12px; box-shadow: 0 18px 34px rgba(2, 6, 23, .45), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.wizard-page .wz-preview::after { content: ""; position: absolute; left: 50%; bottom: .55rem; transform: translateX(-50%); width: 28%; height: 6px; border-radius: 0 0 8px 8px; background: #1f2937; }
.wizard-page .wz-panel { animation: wz-fade .28s ease both; }
@keyframes wz-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.wizard-page .btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.wizard-page .btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: wz-spin .7s linear infinite; }
@keyframes wz-spin { to { transform: rotate(360deg); } }
@media (hover: none) { .wizard-page .wz-tile-actions, .wizard-page .wz-tile-remove { opacity: 1; } }
@media (max-width: 575px) { .wizard-page .wz-preview .wizard-iframe { border-width: 4px; } .wizard-page .wz-orient-opt { flex: 1 1 auto; justify-content: center; } }
/* wizard v4: device chips, playlist cards/chips, media tools, select mode, drag & drop, now playing */
.wizard-page .wz-label small { font-weight: 500; color: #94a3b8; text-transform: none; }
.wizard-page .wz-devchips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.wizard-page .wz-devchip { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border: 1px solid #dce4f2; border-radius: 999px; background: #f8fbff; color: #334155; font-size: .78rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.wizard-page .wz-devchip i { font-size: 16px; color: #64748b; }
.wizard-page .wz-devchip em { font-style: normal; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #15803d; background: #dcfce7; border-radius: 999px; padding: .05rem .4rem; margin-left: .15rem; }
.wizard-page .wz-devchip:hover { border-color: #93c5fd; }
.wizard-page .wz-devchip.is-selected { background: #2563eb; border-color: #2563eb; color: #fff; }
.wizard-page .wz-devchip.is-selected i { color: #fff; }
.wizard-page .wz-devchip.is-selected em { background: rgba(255, 255, 255, .22); color: #fff; }
.wizard-page .wz-form { padding-left: .25rem; }
.wizard-page .wz-hint a { display: inline-flex; align-items: center; gap: .3rem; color: #2563eb; font-weight: 700; }
.wizard-page .wz-hint a i { color: #2563eb; }
/* playlist cards */
.wizard-page .wz-plcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin: .4rem 0 1rem; }
.wizard-page .wz-plcard { position: relative; display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem .7rem .7rem; border: 1px solid #dce4f2; border-radius: 14px; background: #fff; color: #0f172a; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.wizard-page .wz-plcard:hover { border-color: #93c5fd; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 23, 42, .08); }
.wizard-page .wz-plcard.is-current { border-color: #2563eb; background: #f8fbff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.wizard-page .wz-plcard-check i { font-size: 22px; color: #cbd5e1; }
.wizard-page .wz-plcard.is-current .wz-plcard-check i { color: #2563eb; }
.wizard-page .wz-plcard-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.wizard-page .wz-plcard-name { font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wizard-page .wz-plcard-meta { font-size: .74rem; color: #64748b; font-weight: 500; }
.wizard-page .wz-plcard-meta em { font-style: normal; color: #b45309; font-weight: 700; }
.wizard-page .wz-plcard-remove { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: #cbd5e1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wizard-page .wz-plcard-remove i { font-size: 16px; }
.wizard-page .wz-plcard-remove:hover { background: #fef2f2; color: #dc2626; }
.wizard-page .wz-addpl { padding-top: .9rem; border-top: 1px solid #eef2f8; }
.wizard-page .wz-plchips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.wizard-page .wz-plchip { display: inline-flex; align-items: center; gap: .25rem; padding: .35rem .7rem .35rem .5rem; border: 1px dashed #c7d2e4; border-radius: 999px; background: #fff; color: #23426e; font-size: .78rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.wizard-page .wz-plchip i { font-size: 16px; color: #2563eb; }
.wizard-page .wz-plchip small { color: #94a3b8; font-weight: 600; margin-left: .15rem; }
.wizard-page .wz-plchip:hover { border-style: solid; border-color: #2563eb; background: #f8fbff; }
.wizard-page .wz-plchip.is-busy { opacity: .5; pointer-events: none; }
.wizard-page .wz-create-form { margin: 0; }
/* tile badges + select mode */
.wizard-page .wz-tile-badge { position: absolute; left: .4rem; bottom: 2.3rem; z-index: 2; display: inline-flex; align-items: center; gap: .15rem; padding: .08rem .45rem; border-radius: 999px; background: rgba(2, 6, 23, .62); color: #fff; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; backdrop-filter: blur(3px); }
.wizard-page .wz-tile-badge--dur { text-transform: none; letter-spacing: 0; font-size: .68rem; }
.wizard-page .wz-tile-badge i { font-size: 12px; }
.wizard-page .wz-tile-check { position: absolute; top: .4rem; left: .4rem; z-index: 4; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(15, 23, 42, .35); color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.wizard-page .wz-tile-check i { font-size: 15px; opacity: 0; }
.wizard-page .wz-media.is-selecting .wz-tile-check { display: inline-flex; }
.wizard-page .wz-media.is-selecting .wz-media-tile { cursor: pointer; }
.wizard-page .wz-media.is-selecting .wz-tile-actions { display: none; }
.wizard-page .wz-media-tile.is-checked { outline: 3px solid #2563eb; outline-offset: -1px; }
.wizard-page .wz-media-tile.is-checked .wz-tile-check { background: #2563eb; }
.wizard-page .wz-media-tile.is-checked .wz-tile-check i { opacity: 1; }
/* media tools */
.wizard-page .wz-mtools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .7rem 1.15rem; border-bottom: 1px solid #e9eef5; background: #fbfcfe; }
.wizard-page .wz-msearch { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: 0 .55rem; height: 36px; border: 1px solid #dce4f2; border-radius: 10px; background: #fff; flex: 1 1 200px; min-width: 160px; }
.wizard-page .wz-msearch i { font-size: 18px; color: #94a3b8; }
.wizard-page .wz-msearch input { border: 0; background: transparent; outline: 0; width: 100%; font-size: .84rem; font-weight: 600; color: #0f172a; }
.wizard-page .wz-msearch:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.wizard-page .wz-mfilter { display: inline-flex; border: 1px solid #dce4f2; border-radius: 10px; overflow: hidden; background: #fff; }
.wizard-page .wz-mfilter button { border: 0; background: transparent; padding: .4rem .75rem; font-size: .78rem; font-weight: 700; color: #64748b; cursor: pointer; border-right: 1px solid #eef2f8; }
.wizard-page .wz-mfilter button:last-child { border-right: 0; }
.wizard-page .wz-mfilter button small { color: #94a3b8; font-weight: 600; }
.wizard-page .wz-mfilter button.is-active { background: #23426e; color: #fff; }
.wizard-page .wz-mfilter button.is-active small { color: rgba(255, 255, 255, .7); }
.wizard-page .wz-select-toggle { display: inline-flex; align-items: center; gap: .3rem; height: 36px; padding: 0 .8rem; border: 1px solid #dce4f2; border-radius: 10px; background: #fff; color: #334155; font-size: .78rem; font-weight: 700; cursor: pointer; margin-left: auto; }
.wizard-page .wz-select-toggle i { font-size: 17px; color: #64748b; }
.wizard-page .wz-select-toggle.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }
.wizard-page .wz-select-toggle.is-active i { color: #fff; }
.wizard-page .wz-select-toggle.is-disabled { opacity: .55; }
.wizard-page .wz-nomatch { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: 1.5rem; color: #94a3b8; font-weight: 600; font-size: .86rem; }
.wizard-page .wz-selbar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1.15rem; background: #0f172a; color: #fff; font-size: .86rem; font-weight: 600; box-shadow: 0 -8px 20px rgba(15, 23, 42, .18); }
.wizard-page .wz-selbar b { font-size: 1rem; }
.wizard-page .wz-selbar-actions { display: flex; gap: .5rem; }
.wizard-page .wz-selbar .btn { margin: 0; border-radius: 10px; font-weight: 700; }
/* drag & drop */
.wizard-page .wz-media-tile { cursor: grab; }
.wizard-page .wz-drag-helper { width: 130px !important; opacity: .92; transform: rotate(-2deg); box-shadow: 0 18px 34px rgba(15, 23, 42, .3) !important; pointer-events: none; }
.wizard-page .wz-drag-helper .wz-tile-actions, .wizard-page .wz-drag-helper .wz-tile-check { display: none !important; }
.wizard-page .wz-dropzone { min-height: 96px; border-radius: 12px; transition: background .15s ease, box-shadow .15s ease; }
.wizard-page .wz-dropzone.is-target { background: #f8fbff; box-shadow: inset 0 0 0 2px #93c5fd; }
.wizard-page .wz-dropzone.is-over { background: #eff6ff; box-shadow: inset 0 0 0 2px #2563eb; }
.wizard-page .wz-dropzone.is-busy { opacity: .6; pointer-events: none; }
/* now playing */
.wizard-page .wz-nowplaying { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .7rem 1.15rem; border-top: 1px solid #e9eef5; }
.wizard-page .wz-nowplaying-label { display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #15803d; }
.wizard-page .wz-nowplaying-label i { font-size: 16px; }
.wizard-page .wz-nowplaying-name { font-size: .92rem; font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wizard-page .wz-nowplaying-meta { font-size: .76rem; color: #64748b; font-weight: 600; white-space: nowrap; }
@media (max-width: 767px) { .wizard-page .wz-select-toggle { margin-left: 0; } .wizard-page .wz-form { padding-left: 0; margin-top: 1rem; } }
/* wizard v4.1: full-width preview under the hero */
.wizard-page .wz-preview-panel .wz-preview { padding: 1.25rem 1.25rem 1.6rem; }
.wizard-page .wz-preview-panel .wz-preview .wizard-iframe { max-width: 1040px; margin: 0 auto; }
.wizard-page .wz-preview-panel .wz-preview.is-portrait .wizard-iframe { width: auto; height: 560px; max-height: 70vh; aspect-ratio: 9 / 16; }
.wizard-page .wz-preview-panel .wz-preview::after { width: 18%; }
.wizard-page .wz-preview-panel .wz-preview-empty { padding: .8rem 1.15rem; }
.wizard-page .wz-preview-panel .wz-preview-empty-box { aspect-ratio: auto; min-height: 0; flex-direction: row; justify-content: flex-start; gap: 1rem; padding: 1rem 1.25rem; text-align: left; }
.wizard-page .wz-preview-panel .wz-preview-empty-box i { font-size: 34px; }
.wizard-page .wz-preview-panel .wz-preview-empty-box strong { font-size: .95rem; }
.wizard-page .wz-preview-panel .wz-preview-empty-box span { display: block; }
.wizard-page .wz-preview-panel .wz-preview-empty-box > *:not(i):not(strong) { flex: 1 1 auto; }
@media (max-width: 767px) { .wizard-page .wz-preview-panel .wz-preview-empty-box { flex-direction: column; align-items: flex-start; } }

/* Wizard v5: status, recap, schedule tags, web pages */
.wizard-page .wz-switch-item .wz-switch-code { margin-left: auto; }
.wizard-page .wz-switch-seen { font-size: .7rem; font-weight: 600; color: #94a3b8; white-space: nowrap; min-width: 58px; text-align: right; }
.wizard-page .wz-recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem 1rem; padding: .85rem 1.15rem; border-top: 1px solid #e9eef5; background: #fbfcfe; }
.wizard-page .wz-recap-item { display: grid; grid-template-columns: 20px 1fr; grid-template-rows: auto auto; column-gap: .45rem; align-items: center; min-width: 0; }
.wizard-page .wz-recap-item > i.material-icons { grid-row: 1 / span 2; font-size: 18px; color: #64748b; }
.wizard-page .wz-recap-item > .wz-dot { grid-row: 1 / span 2; margin: 0 auto; }
.wizard-page .wz-recap-k { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.wizard-page .wz-recap-v { font-size: .86rem; font-weight: 700; color: #0f172a; line-height: 1.25; overflow-wrap: anywhere; }
.wizard-page .wz-recap-v small { font-size: .72rem; font-weight: 700; color: #64748b; background: #eef3fa; border-radius: 6px; padding: .05rem .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wizard-page .wz-recap-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .35rem; border-top: 1px dashed #e2e8f0; }
.wizard-page .wz-recap-actions .btn { margin: 0; border-radius: 10px; font-weight: 700; white-space: nowrap; }
.wizard-page .wz-plcard-tag { display: inline-flex; align-items: center; gap: .2rem; margin-top: .25rem; width: max-content; max-width: 100%; padding: .05rem .45rem; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: .68rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wizard-page .wz-plcard-tag i { font-size: 13px; }
.wizard-page .wz-plcard-tag.is-sched { background: #fef3c7; color: #b45309; }
.wizard-page .wz-plcards .wz-plcard-body { gap: 0; }
.wizard-page .wz-media-tile--url .wz-tile-media--app { width: 100%; height: 100%; }
.wizard-page .wz-webform { margin: 0 0 1rem; padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid #c7d2e4; background: linear-gradient(180deg, #f8fbff, #fff); }
.wizard-page .wz-webform-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .2rem; }
.wizard-page .wz-webform-head .wz-label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .9rem; color: #0f172a; }
.wizard-page .wz-webform-head .wz-label i { font-size: 18px; color: #2563eb; }
.wizard-page .wz-webform-close { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wizard-page .wz-webform-close:hover { background: #eef3fa; color: #0f172a; }
.wizard-page .wz-webform-close i { font-size: 18px; }
.wizard-page .wz-webform-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 1rem; margin-top: .6rem; }
.wizard-page .wz-webform .wz-field { margin-bottom: .6rem; }
.wizard-page .wz-webform .wz-actions { margin-top: .6rem; }
.wizard-page .wz-check { display: inline-flex; align-items: center; gap: .45rem; margin: .2rem 0 0; font-size: .82rem; font-weight: 600; color: #334155; cursor: pointer; }
.wizard-page .wz-check input { width: 16px; height: 16px; margin: 0; accent-color: #2563eb; }
.wizard-page .wz-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.wizard-page .wz-empty + .wz-webform { margin: 0 1.15rem 1.15rem; }
@media (max-width: 767px) {
    .wizard-page .wz-webform-grid { grid-template-columns: 1fr; }
    .wizard-page .wz-recap { grid-template-columns: 1fr 1fr; }
}

/* Add content to playlist: second action bar at the bottom of the grid */
.playlist-add-page .add-content-bottom-bar { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #e9eef5; }
.playlist-add-page .add-content-bottom-hint { font-size: .8rem; color: #64748b; font-weight: 500; }
.playlist-add-page .playlist-content-count { font-weight: 800; opacity: .85; }
@media (max-width: 767.98px) {
    .playlist-add-page .add-content-bottom-bar { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Admin: AI image usage */
.ai-usage-page .ai-usage-panel { padding: 1.4rem 1.6rem; }
.ai-usage-page .ai-usage-panel-head { gap: 10px; }
.ai-usage-page .ai-usage-panel-icon { font-size: 1.45rem; }
.ai-usage-page .ai-usage-btn-icon { font-size: 16px; vertical-align: middle; }
.ai-usage-page .ai-usage-kpi-icon--blue { background: linear-gradient(135deg, #e3eafc 60%, #d1e3fa 100%); color: #23426e; }
.ai-usage-page .ai-usage-kpi-icon--teal { background: linear-gradient(135deg, #d2f4ea 60%, #b9ede0 100%); color: #00796b; }
.ai-usage-page .ai-usage-kpi-icon--amber { background: linear-gradient(135deg, #fff3cd 60%, #ffe69c 100%); color: #b8860b; }
.ai-usage-page .ai-usage-kpi-icon--purple { background: linear-gradient(135deg, #e9d8fd 60%, #dcc6fb 100%); color: #805ad5; }
.ai-usage-page .ai-usage-kpi-label--blue { color: #23426e; }
.ai-usage-page .ai-usage-kpi-label--teal { color: #00796b; }
.ai-usage-page .ai-usage-kpi-label--amber { color: #b8860b; }
.ai-usage-page .ai-usage-kpi-label--purple { color: #805ad5; }
.ai-usage-page .ai-usage-chart { position: relative; height: 280px; }
.ai-usage-page .ai-usage-table { font-size: 0.95em; }
.ai-usage-page .ai-usage-top-scroll { max-height: 280px; overflow-y: auto; }
.ai-usage-page .ai-usage-top-scroll thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.ai-usage-page .ai-usage-table td { vertical-align: middle; }
.ai-usage-page .ai-usage-count { background: #e3eafc; color: #23426e; font-size: 0.85em; padding: 0.4em 0.75em; }
.ai-usage-page .ai-usage-total { font-size: 0.95em; }
.ai-usage-page .ai-usage-search { flex: 0 1 360px; min-width: 240px; gap: 8px; }
.ai-usage-page .ai-usage-search .form-control { flex: 1 1 auto; min-width: 0; }
.ai-usage-page .ai-usage-search .btn { white-space: nowrap; }
.ai-usage-page .ai-usage-thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid #dce4f2; background: #f1f5fb; }
.ai-usage-page .ai-usage-prompt { max-width: 520px; color: #334155; white-space: pre-wrap; word-break: break-word; }
.ai-usage-page .ai-usage-break { word-break: break-all; }
.ai-usage-page .ai-usage-nowrap { white-space: nowrap; }