@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap");

:root {
    --outer: #1f1f1f;
    --frame: #0d0e1b;
    --sidebar: #111730;
    --sidebar-deep: #0E0E1A;
    --sidebar-card: #0E0E1A;
    --nav-active: #111122;
    --dark-card: #172338;
    --white: #ffffff;
    --soft: #f7f9fc;
    --panel-line: #d8e0ec;
    --text: #061126;
    --muted: #5e6c82;
    --muted-dark: #aab5cc;
    --blue: #251bd7;
    --green: #0fbf73;
    --cyan: #0db6a0;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    overflow: hidden;
    color: var(--text);
    background: var(--frame);
    font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
}

button,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    display: block;
}

.manager-shell {
    height: 100vh;
    padding: 0;
    overflow: hidden;
}

.mobile-menu-toggle,
.sidebar-backdrop,
.sidebar-close {
    display: none;
}

.view-label {
    display: none;
    margin: 0;
    color: #6c6c6c;
    font-size: 11px;
    font-weight: 700;
}

.panel-frame {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    width: 100vw;
    height: 100vh;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 18px 0 22px 18px;
    background: var(--frame);
    overflow: hidden;
}

.sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 18px 14px 14px;
    border-radius: 4px;
    background: var(--sidebar);
}

.brand {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    padding: 0 10px;
    color: #fff;
    line-height: 1;
    text-align: left;
}

.brand strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .5px;
}

.brand span {
    display: block;
    margin-top: 2px;
    color: #c7cde2;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
}

.brand img {
    display: block;
    width: min(205px, 100%);
    height: auto;
}

.radio-card {
    position: relative;
    padding: 9px 10px 10px;
    border-radius: 5px;
    color: #fff;
    background: var(--sidebar-card);
}

.radio-top,
.radio-actions,
.radio-current,
.side-menu > a,
.menu-parent,
.menu-parent-label,
.submenu a,
.storage div:first-child,
.profile-mini,
.top-strip,
.now-card,
.now-info > div,
.now-metrics,
.promo-card,
.card-head,
.quick-stats,
.frequency-head,
.tabs,
.playlist-title,
.track,
.manage-btn {
    display: flex;
    align-items: center;
}

.radio-top {
    position: relative;
    align-items: flex-start;
    gap: 7px;
}

.radio-logo {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0px;
    border-radius: 7px;
    object-fit: contain;
    background: #d7d7d7;
}

.radio-station-main {
    min-width: 0;
    flex: 1 1 auto;
}

.radio-station-main strong {
    display: block;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .2px;
}

.radio-clock {
    position: absolute;
    top: 2px;
    right: 0;
    flex: 0 0 auto;
    color: #fff;
    font-size: 12px;
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: .2px;
    white-space: nowrap;
}

.radio-actions {
    gap: 5px;
    margin-top: 5px;
}

.radio-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: #111122;
    font-size: 15px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.radio-action-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
}

.radio-action-btn:hover,
.radio-action-btn[aria-pressed="true"] {
    color: #fff;
    background: var(--blue);
}

.radio-action-btn:active {
    transform: scale(.94);
}

.radio-volume-panel {
    position: absolute;
    top: 72px;
    left: 52px;
    z-index: 4;
    width: 138px;
    padding: 9px 10px;
    border-radius: 8px;
    background: #111122;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .28);
}

.radio-volume-panel input {
    display: block;
    width: 100%;
    accent-color: var(--blue);
}

.radio-current {
    position: relative;
    gap: 8px;
    margin-top: 14px;
    padding-right: 22px;
}

.radio-cover {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    object-fit: cover;
}

.radio-track-text {
    min-width: 0;
    flex: 1 1 auto;
}

.radio-track-text strong,
.radio-track-text span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.radio-track-text strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .2px;
}

.radio-track-text span {
    margin-top: 2px;
    color: #fff;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: .2px;
}

.radio-expand {
    position: absolute;
    top: 50%;
    right: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 0;
    color: #69718e;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .16s ease;
}

.radio-expand i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    transition: transform .16s ease;
}

.radio-card.switcher-open .radio-expand {
    color: #fff;
}

.radio-card.switcher-open .radio-expand i {
    transform: rotate(180deg);
}

.radio-switcher {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.radio-switcher[hidden] {
    display: none;
}

.radio-switcher-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .035);
    transition: background .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.radio-switcher-item.is-current {
    background: rgba(37, 27, 215, .28);
    box-shadow: inset 0 0 0 1px rgba(122, 143, 255, .36);
}

.radio-switcher.is-loading .radio-switcher-item,
.radio-switcher.is-loading .radio-switcher-add,
.radio-switcher.is-loading .radio-switcher-repair {
    pointer-events: none;
    opacity: .62;
}

.radio-switcher-item img {
    width: 28px;
    height: 28px;
    padding: 0px;
    border-radius: 5px;
    object-fit: contain;
    background: #fff;
}

.radio-switcher-item strong {
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.radio-switcher-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.radio-switcher-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: #111122;
    font-size: 14px;
    cursor: pointer;
}

.radio-switcher-actions button:hover {
    background: var(--blue);
}

.radio-switcher-actions [data-switch-dashboard] {
    color: #fff;
    background: rgba(37, 27, 215, .28);
}

.radio-switcher-actions [data-switch-dashboard]:hover {
    background: var(--blue);
}

.radio-switcher-add {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin-top: 4px;
    padding: 4px;
    border-radius: 6px;
    color: #fff;
    background: rgba(37, 27, 215, .18);
    text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}

.radio-switcher-add span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    color: #fff;
    background: var(--blue);
    font-size: 16px;
}

.radio-switcher-add strong {
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.radio-switcher-add:hover {
    color: #fff;
    background: rgba(37, 27, 215, .34);
}

.radio-switcher-add:active {
    transform: scale(.98);
}

.radio-switcher-repair {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    color: #b8c7ff;
    background: rgba(255, 255, 255, .045);
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.radio-switcher-repair span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    color: #fff;
    background: rgba(37, 27, 215, .36);
    font-size: 15px;
}

.radio-switcher-repair strong {
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.radio-switcher-repair:hover {
    color: #fff;
    background: rgba(37, 27, 215, .24);
}

.radio-switcher-repair.is-loading i {
    animation: sd-spin .7s linear infinite;
}

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

.side-menu {
    display: grid;
    align-content: start;
    flex: 1 1 auto;
    gap: 3px;
    min-height: 0;
    margin-top: 16px;
    padding-right: 2px;
    overflow-y: auto;
    scrollbar-width: none;
}

.side-menu::-webkit-scrollbar {
    display: none;
}

.side-menu > a,
.menu-parent {
    width: 100%;
    gap: 10px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: transparent;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
}

.menu-parent {
    justify-content: space-between;
}

.menu-parent-label {
    min-width: 0;
    gap: 10px;
}

.menu-parent-label i,
.side-menu > a i {
    flex: 0 0 auto;
}

.menu-parent > i {
    margin-left: auto;
    color: #8b96b8;
    font-size: 13px;
    transition: color .16s ease, transform .16s ease;
}

.menu-group.open .menu-parent > i {
    color: #fff;
    transform: rotate(180deg);
}

.side-menu > a.active,
.menu-group.active .menu-parent {
    background: var(--nav-active);
}

.side-menu > a:hover,
.menu-parent:hover {
    background: rgba(255, 255, 255, .08);
}

.side-menu i {
    font-size: 14px;
}

.submenu {
    display: grid;
    gap: 1px;
    margin: 2px 0 5px 21px;
}

.submenu[hidden] {
    display: none;
}

.submenu a {
    gap: 8px;
    min-height: 26px;
    padding: 0 7px;
    border-radius: 4px;
    color: #8f9ab8;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}

.submenu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

.submenu i {
    color: #7e8aaa;
    font-size: 13px;
}

.side-menu > span {
    margin: 10px 0 4px 15px;
    color: #b9c2d7;
    font-size: 14px;
    text-transform: uppercase;
}

.sidebar-bottom {
    margin-top: auto;
}

.storage {
    padding: 10px;
    border-radius: 4px;
    color: #fff;
    background: var(--sidebar-card);
}

.storage div:first-child {
    justify-content: space-between;
    gap: 8px;
}

.storage span,
.storage strong,
.storage small {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.storage small {
    display: block;
    margin-top: 6px;
    font-weight: 500;
}

.storage-bar {
    height: 6px;
    margin-top: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: #111122;
}

.storage-bar span {
    display: block;
    width: 4%;
    height: 100%;
    border-radius: inherit;
    background: #fff;
}

.storage-mobile {
    display: none;
}

.profile-area {
    position: relative;
    margin-top: 20px;
    padding-top: 18px;
}

.profile-area::before {
    content: "";
    position: absolute;
    top: 0;
    right: -4px;
    left: -4px;
    height: 1px;
    background: rgba(255, 255, 255, .12);
}

.profile-mini {
    width: 100%;
    gap: 9px;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    background: var(--sidebar-deep);
    font-size: 12px;
    font-weight: 800;
}

.profile-text {
    min-width: 0;
    flex: 1 1 auto;
}

.profile-text strong,
.profile-text > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-text strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 800;
}

.profile-text > span {
    margin-top: 3px;
    color: #c4cce2;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 500;
}

.profile-mini > i {
    margin-left: auto;
    color: #6b789b;
    font-size: 14px;
    transition: transform .16s ease, color .16s ease;
}

.profile-area.open .profile-mini > i {
    color: #fff;
    transform: rotate(180deg);
}

.profile-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 8;
    display: grid;
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    background: #0E0E1A;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .35);
}

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

.profile-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    padding: 0 9px;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.profile-language {
    display: grid;
    gap: 4px;
    margin: 2px 0;
    border-radius: 8px;
}

.profile-language-toggle,
.profile-language-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    color: #8f9ab8;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.profile-language-toggle {
    justify-content: space-between;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.profile-language-toggle:hover,
.profile-language.open .profile-language-toggle {
    color: #fff;
    background: rgba(37, 27, 215, .28);
}

.profile-language-toggle strong {
    margin-right: 7px;
    color: #b7c1dd;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .6px;
}

.profile-language-toggle i {
    margin-left: auto;
    color: #8b96b8;
    font-size: 13px;
    line-height: 1;
    transition: transform .16s ease, color .16s ease;
}

.profile-language.open .profile-language-toggle i {
    color: #fff;
    transform: rotate(180deg);
}

.profile-language-menu {
    display: grid;
    gap: 1px;
    padding: 4px;
    border-radius: 8px;
    background: #0b0b13;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.profile-language-menu[hidden] {
    display: none;
}

.profile-language-menu button {
    position: relative;
    gap: 9px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.profile-language-menu button span {
    width: 19px;
    color: #8f9ab8;
    font-size: 11px;
    letter-spacing: .7px;
}

.profile-language-menu button:hover,
.profile-language-menu button.active {
    color: #fff;
    background: rgba(37, 27, 215, .24);
}

.profile-language-menu button.active span,
.profile-language-menu button.active i {
    color: #362bff;
}

.profile-language-menu button i {
    margin-left: auto;
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    font-size: 13px;
    line-height: 1;
}

.profile-menu a:hover {
    background: rgba(255, 255, 255, .08);
}

.profile-menu a:last-child {
    color: #dfe7ff;
}

.workspace {
    min-width: 0;
    padding-left: 18px;
    padding-right: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-color: #2f3548 transparent;
    scrollbar-width: thin;
}

.workspace::-webkit-scrollbar,
.tracks::-webkit-scrollbar {
    width: 7px;
}

.workspace::-webkit-scrollbar-track,
.tracks::-webkit-scrollbar-track {
    background: transparent;
}

.workspace::-webkit-scrollbar-thumb,
.tracks::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #2f3548;
}

.page-title {
    position: sticky;
    top: 0;
    z-index: 25;
    margin: 0 0 10px;
    padding: 0 0 4px;
    color: #fff;
    background: var(--frame);
    text-transform: uppercase;
}

.page-title::before {
    content: "";
    position: absolute;
    inset: -18px -24px 0 -18px;
    z-index: -1;
    background: var(--frame);
}

.page-title h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.05;
    font-weight: 800;
}

.page-title p {
    margin: 3px 0 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
}

.top-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 27%);
    align-items: stretch;
    gap: 16px;
    margin-bottom: 28px;
    padding: 0;
    background: transparent;
}

.now-card {
    min-width: 0;
    min-height: 136px;
    gap: 20px;
    padding: 22px 24px;
    border-radius: 8px;
    color: #fff;
    background: var(--sidebar);
}

.now-card > img {
    width: 74px;
    height: 74px;
    border-radius: 7px;
    object-fit: cover;
}

.now-info {
    min-width: 0;
    flex: 1 1 auto;
}

.now-info > div {
    gap: 12px;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(15, 191, 115, .15);
    font-size: 14px;
    font-weight: 700;
}

.live-pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.now-info small {
    color: #8c9ab4;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.now-info h2 {
    margin: 8px 0 4px;
    overflow: hidden;
    color: #fff;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.now-info p {
    margin: 0;
    color: #b8c3da;
    font-size: 14px;
    line-height: 1.25;
}

.station-name {
    display: block;
    margin-top: 8px;
    color: #9daac3;
    font-size: 14px;
}

.now-metrics {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-items: end;
    align-items: center;
    gap: 32px;
    flex: 0 0 auto;
    text-align: right;
}

.now-metrics strong {
    display: block;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
}

.now-metrics span {
    display: block;
    color: #d9e0ed;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.now-metrics small {
    display: block;
    grid-column: 1 / -1;
    margin-top: -20px;
    color: #9daac3;
    font-size: 14px;
    font-weight: 400;
}

.promo-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-content: center;
    gap: 16px;
    min-height: 136px;
    height: 100%;
    padding: 22px 24px;
    border: 0;
    border-radius: 8px;
    background: var(--sidebar);
}

.promo-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 7px;
    color: var(--blue);
    background: rgba(37, 27, 215, .14);
}

.promo-card h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 20px;
    line-height: 1.12;
    font-weight: 800;
}

.promo-card p {
    margin: 0;
    color: #b9c5dd;
    font-size: 14px;
    line-height: 1.45;
}

.promo-lights {
    position: absolute;
    top: 22px;
    right: 14px;
    display: flex;
    gap: 6px;
}

.promo-lights span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d5deec;
}

.promo-lights span:first-child {
    width: 16px;
    border-radius: 999px;
    background: var(--blue);
}

.content-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 27%);
    align-items: stretch;
    gap: 16px;
    padding: 0;
    background: transparent;
}

.stats-column {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.stats-card,
.frequency-card,
.program-card {
    min-width: 0;
    border: 0;
    border-radius: 8px;
    background: #111833;
    overflow: hidden;
}

.program-card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 100%;
}

.manager-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 14px 2px 18px;
    color: #7f8ca8;
}

.manager-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.manager-footer a {
    color: #9daac3;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.manager-footer a:hover {
    color: #fff;
}

.manager-footer small {
    color: #7f8ca8;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    text-align: right;
}

.card-head {
    justify-content: space-between;
    gap: 12px;
    min-height: 70px;
    padding: 18px 20px;
    border-bottom: 0;
}

.card-head h2 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 800;
}

.card-head h2 i {
    color: #dfe7ff;
}

.card-head select {
    width: 118px;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: var(--sidebar);
    font-size: 14px;
}

.card-head button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 6px;
    color: var(--blue);
    background: #0d0e1b;
}

.quick-stats {
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px 18px;
}

.quick-stats div {
    min-width: 120px;
}

.quick-stats span {
    display: block;
    color: #9daccc;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.quick-stats strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
}

.chart-area {
    height: 300px;
    padding: 0 20px 14px;
}

.listening-chart-area {
    height: 320px;
}

.frequency-chart-area {
    height: 260px;
    padding-top: 0;
}

.chart-note {
    margin: 0;
    padding: 0 20px 22px;
    color: #9daccc;
    font-size: 14px;
    line-height: 1.5;
}

.frequency-card .card-head {
    min-height: 58px;
    padding-bottom: 8px;
}

.tabs {
    gap: 12px;
    padding: 4px 20px 12px;
}

.tabs button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    color: #c7d2ea;
    background: transparent;
    font-size: 14px;
    font-weight: 800;
}

.tabs button.active {
    color: #fff;
    background: #251bd7;
}

.program-panel {
    display: none;
    min-height: 0;
}

.program-panel.active {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.playlist-title {
    justify-content: space-between;
    padding: 0 20px 14px;
}

.playlist-title strong,
.playlist-title span {
    display: block;
}

.playlist-title strong {
    color: #fff;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 800;
}

.playlist-title span {
    color: #9daccc;
    font-size: 14px;
}

.playlist-title em {
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    background: #251bd7;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.tracks {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #56617e #111833;
}

.track {
    gap: 14px;
    min-height: 62px;
    padding: 9px 20px;
    background: #1a2441;
}

.track:nth-child(even) {
    background: #202b4e;
}

.track.playing {
    background: #2d2638;
}

.track img {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    object-fit: cover;
}

.track div {
    min-width: 0;
}

.track strong,
.track span {
    display: block;
}

.track strong {
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track span {
    color: #a9b6d1;
    font-size: 14px;
}

.track > i {
    margin-left: auto;
    color: var(--blue);
}

.schedule-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #56617e #111833;
}

.schedule-list::-webkit-scrollbar {
    width: 7px;
}

.schedule-list::-webkit-scrollbar-track {
    background: transparent;
}

.schedule-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #56617e;
}

.schedule-item {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 62px;
    padding: 12px 20px 12px 30px;
    background: #111833;
}

.schedule-item:nth-child(even) {
    background: #141d38;
}

.schedule-item::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 18px;
    width: 3px;
    border-radius: 999px;
    background: rgba(15, 191, 115, .85);
}

.schedule-item.accent::before {
    background: rgba(37, 27, 215, .9);
}

.schedule-item strong {
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
}

.schedule-item strong span {
    margin-left: 6px;
    color: #9daccc;
    font-weight: 500;
}

.schedule-item small {
    color: #b7c3dd;
    font-size: 14px;
    line-height: 1.25;
}

.manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: calc(100% - 26px);
    height: 42px;
    margin: 14px 13px 16px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: #0d0e1b;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 1180px) {
    .top-strip,
    .content-board {
        grid-template-columns: 1fr;
    }

    .promo-card {
        min-height: 118px;
    }

    .program-card {
        max-width: none;
    }
}

@media (max-width: 1100px) {
    body.menu-open {
        overflow: hidden;
    }

    .manager-shell {
        height: 100dvh;
    }

    .mobile-menu-toggle {
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 45;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 8px;
        color: #fff;
        background: var(--sidebar);
        font-size: 22px;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 48;
        display: block;
        border: 0;
        opacity: 0;
        visibility: hidden;
        background: rgba(0, 0, 0, .58);
        transition: opacity .2s ease, visibility .2s ease;
    }

    body.menu-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .panel-frame {
        grid-template-columns: 1fr;
        height: 100dvh;
        padding: 0 16px 18px;
        overflow: hidden;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 50;
        width: 320px;
        max-width: calc(100vw - 42px);
        height: 100dvh;
        border-radius: 0;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 20px 0 44px rgba(0, 0, 0, .35);
    }

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

    .sidebar-close {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 8px;
        color: #fff;
        background: var(--sidebar-card);
        font-size: 18px;
    }

    .storage-mobile {
        position: relative;
        display: block;
        margin: 3px 0 14px;
        padding: 9px;
        border-radius: 7px;
        background: rgba(255, 255, 255, .04);
    }

    .storage-mobile::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -8px;
        left: 0;
        height: 1px;
        background: rgba(255, 255, 255, .12);
    }

    .storage-mobile + a {
        margin-top: 3px;
    }

    .sidebar-bottom > .storage {
        display: none;
    }

    .sidebar-bottom {
        margin-top: 28px;
    }

    .workspace {
        height: calc(100dvh - 142px);
        margin-top: 124px;
        padding-left: 0;
        padding-right: 0;
        overflow-y: auto;
    }

    .page-title {
        position: fixed;
        top: 74px;
        right: 16px;
        left: 16px;
        z-index: 35;
        margin: 0;
        padding: 0 0 12px;
    }

    .page-title::before {
        inset: -74px -16px 0;
    }
}

@media (max-width: 720px) {
    .panel-frame {
        padding: 0 12px 14px;
    }

    .page-title {
        top: 70px;
        right: 12px;
        left: 12px;
        margin-bottom: 0;
    }

    .page-title::before {
        inset: -70px -12px 0;
    }

    .workspace {
        height: calc(100dvh - 136px);
        margin-top: 122px;
    }

    .top-strip {
        gap: 12px;
        margin-bottom: 16px;
    }

    .content-board {
        gap: 12px;
    }

    .manager-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 16px;
    }

    .manager-footer small {
        text-align: left;
    }

    .now-card {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: flex-start;
        min-height: 0;
        gap: 16px;
        padding: 18px;
    }

    .now-card > img {
        width: 64px;
        height: 64px;
    }

    .now-info h2 {
        white-space: normal;
    }

    .now-info {
        width: 100%;
    }

    .now-info > div {
        flex-wrap: wrap;
    }

    .now-metrics {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: start;
        width: 100%;
        gap: 14px;
        text-align: left;
    }

    .now-metrics small {
        margin-top: 0;
    }

    .promo-card {
        min-height: 0;
        padding: 18px;
    }

    .quick-stats {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .card-head {
        align-items: flex-start;
        flex-wrap: wrap;
        min-height: 0;
    }

    .chart-area {
        height: 230px;
        padding-inline: 14px;
    }

    .frequency-chart-area {
        height: 220px;
    }

    .tracks {
        max-height: 360px;
    }

    .schedule-list {
        max-height: 360px;
    }
}

/* Direct */
.direct-workspace {
    padding-bottom: 24px;
}

.direct-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.direct-help-btn,
.direct-secondary-action,
.direct-primary-btn,
.direct-danger-btn,
.direct-ghost-btn,
.direct-credential-value button {
    border: 0;
    font: inherit;
}

.direct-help-btn {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8ea2ff;
    background: rgba(49, 42, 238, .18);
    margin-left: auto;
}

.direct-workspace > .direct-status-card,
.direct-workspace > .direct-actions-card,
.direct-workspace > .direct-grid {
    margin-top: 18px;
}

.direct-workspace > .site-footer {
    margin-top: 28px;
}

.direct-status-card,
.direct-actions-card,
.direct-board,
.direct-side-panel > section {
    background: #111936;
    border-radius: 8px;
    color: #fff;
}

.direct-status-card {
    min-height: 112px;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    box-shadow: inset 4px 0 0 rgba(49, 42, 238, .9);
}

.direct-status-card.is-online {
    box-shadow: inset 4px 0 0 #00d084;
}

.direct-status-card.is-offline {
    box-shadow: inset 4px 0 0 #ff4b78;
}

.direct-status-icon,
.direct-actions-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(49, 42, 238, .28);
    font-size: 24px;
}

.direct-status-card.is-online .direct-status-icon {
    color: #00d084;
    background: rgba(0, 208, 132, .12);
}

.direct-status-card.is-offline .direct-status-icon {
    color: #ff4b78;
    background: rgba(255, 75, 120, .14);
}

.direct-status-card strong,
.direct-actions-card strong,
.direct-board h2,
.direct-side-panel h2 {
    display: block;
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 800;
}

.direct-status-card p,
.direct-board p,
.direct-side-panel p,
.direct-actions-card span {
    margin: 6px 0 0;
    color: #b8c8f6;
    font-size: 14px;
    line-height: 1.45;
}

.direct-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    height: 30px;
    border-radius: 999px;
    color: #dce6ff;
    background: rgba(255, 255, 255, .08);
    font-size: 12px;
    font-weight: 800;
}

.direct-status-card.is-online .direct-status-badge {
    color: #06111c;
    background: #74e0aa;
}

.direct-status-card.is-offline .direct-status-badge {
    color: #fff;
    background: rgba(255, 75, 120, .22);
}

.direct-actions-card {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
}

.direct-secondary-action,
.direct-primary-btn,
.direct-danger-btn,
.direct-ghost-btn {
    min-height: 42px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

.direct-secondary-action {
    background: #312aee;
}

.direct-primary-btn {
    width: 100%;
    background: #312aee;
}

.direct-danger-btn {
    width: 100%;
    background: #312aee;
}

.direct-ghost-btn {
    width: 100%;
    background: rgba(255, 255, 255, .07);
}

.direct-secondary-action:hover,
.direct-primary-btn:hover,
.direct-danger-btn:hover,
.direct-ghost-btn:hover {
    opacity: .92;
    transform: translateY(-1px);
}

.direct-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 22px;
    align-items: start;
}

.direct-board,
.direct-side-panel > section {
    padding: 22px;
}

.direct-board-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.direct-board-head > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #a9c0ff;
    background: rgba(49, 42, 238, .16);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.direct-credentials {
    display: grid;
    gap: 8px;
}

.direct-credential-row {
    min-height: 54px;
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #0d1226;
}

.direct-credential-row > span {
    color: #aab9dc;
    font-size: 14px;
}

.direct-credential-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.direct-credential-value code {
    max-width: 100%;
    color: #9eb8ff;
    font-size: 14px;
    font-weight: 800;
    word-break: break-all;
    background: transparent;
}

.direct-credential-value button {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 8px;
    color: #9eb8ff;
    background: rgba(255, 255, 255, .06);
}

.direct-credential-value button:hover {
    color: #fff;
    background: rgba(49, 42, 238, .36);
}

.direct-side-panel {
    display: grid;
    gap: 22px;
}

.direct-password-form {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.direct-password-form label {
    display: grid;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.direct-password-form input {
    width: 100%;
    height: 44px;
    border: 1px solid rgba(169, 192, 255, .26);
    border-radius: 8px;
    padding: 0 14px;
    color: #fff;
    background: #0b0f20;
    outline: none;
}

.direct-password-form input:focus {
    border-color: rgba(91, 115, 255, .95);
    box-shadow: 0 0 0 3px rgba(49, 42, 238, .18);
}

.direct-password-input {
    display: grid;
    grid-template-columns: 1fr 44px;
}

.direct-password-input input {
    border-radius: 8px 0 0 8px;
}

.direct-password-input button {
    border: 1px solid rgba(49, 42, 238, .8);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    color: #fff;
    background: rgba(49, 42, 238, .25);
}

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

@media (max-width: 720px) {
    .direct-page-head {
        align-items: flex-start;
    }

    .direct-status-card,
    .direct-actions-card {
        grid-template-columns: 48px 1fr;
    }

    .direct-status-badge,
    .direct-secondary-action {
        grid-column: 1 / -1;
        width: 100%;
    }

    .direct-credential-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .direct-credential-value {
        justify-content: flex-start;
    }

    .direct-board-head {
        display: grid;
    }
}

@media (max-width: 480px) {
    .mobile-menu-toggle {
        top: 12px;
        left: 12px;
    }

    .panel-frame {
        padding: 0 10px 12px;
    }

    .page-title {
        top: 68px;
        right: 10px;
        left: 10px;
    }

    .page-title::before {
        inset: -68px -10px 0;
    }

    .workspace {
        height: calc(100dvh - 130px);
        margin-top: 118px;
    }

    .sidebar {
        max-width: calc(100vw - 28px);
    }

    .now-card,
    .promo-card,
    .stats-card,
    .frequency-card,
    .program-card {
        border-radius: 6px;
    }

    .promo-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .promo-icon {
        width: 42px;
        height: 42px;
    }

    .card-head,
    .quick-stats,
    .tabs,
    .playlist-title,
    .track,
    .schedule-item {
        padding-inline: 16px;
    }

    .schedule-item {
        padding-left: 28px;
    }

    .schedule-item::before {
        left: 14px;
    }

    .tabs,
    .playlist-title {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .track {
        gap: 12px;
        min-height: 58px;
    }

    .track img {
        width: 38px;
        height: 38px;
    }

    .chart-area {
        height: 210px;
    }

    .frequency-chart-area {
        height: 190px;
    }
}

.auth-body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    color: #fff;
    background:
        radial-gradient(circle at 12% 10%, rgba(37, 27, 215, .28), transparent 34%),
        radial-gradient(circle at 86% 6%, #0d41b624, transparent 30%),
        var(--frame);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.auth-login-body {
    overflow-y: auto;
}

.auth-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 22px 24px;
}

.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: min(920px, 100%);
    margin: 0 auto;
    text-align: center;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.auth-brand-logo {
    display: block;
    width: min(210px, 58vw);
    height: auto;
}

.auth-brand strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;
}

.auth-brand span {
    margin-top: 3px;
    color: #b9c5ea;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.6px;
}

.auth-field input,
.auth-field select {
    width: 100%;
    border: 1px solid rgba(158, 174, 212, .22);
    color: #fff;
    background: #0e1020;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.auth-field input:focus,
.auth-field select:focus {
    border-color: rgba(37, 27, 215, .82);
    box-shadow: 0 0 0 3px rgba(37, 27, 215, .22);
}

.auth-layout {
    flex: 1 1 auto;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.auth-layout-login {
    display: grid;
    grid-template-columns: minmax(0, 920px);
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 0;
    padding: 28px 0;
}

.auth-layout-register {
    display: block;
    padding: 22px 0 0;
}

.auth-preview,
.auth-card {
    border-radius: 10px;
    background: rgba(17, 23, 48, .92);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

.auth-preview {
    min-height: 510px;
    padding: 28px;
}

.auth-preview-card {
    display: grid;
    align-content: end;
    min-height: 454px;
    padding: 28px;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(23, 35, 56, .52), rgba(14, 14, 26, .96)),
        #172338;
}

.auth-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 32px;
    padding: 0 13px;
    border-radius: 999px;
    color: #12df89;
    background: rgba(15, 191, 115, .14);
    font-size: 13px;
    font-weight: 800;
}

.auth-live-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #12df89;
}

.auth-preview h1 {
    margin: 26px 0 10px;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
}

.auth-preview p {
    max-width: 520px;
    margin: 0;
    color: #c7d2ea;
    font-size: 14px;
    line-height: 1.6;
}

.auth-preview-player {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding: 14px;
    border-radius: 8px;
    background: #0e0e1a;
}

.auth-preview-player img {
    width: 54px;
    height: 54px;
    padding: 7px;
    border-radius: 9px;
    object-fit: contain;
    background: #d7d7d7;
}

.auth-preview-player strong,
.auth-preview-player span {
    display: block;
}

.auth-preview-player strong {
    color: #fff;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
}

.auth-preview-player span {
    margin-top: 3px;
    color: #9daccc;
    font-size: 13px;
}

.auth-preview-player > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: #fff;
    background: var(--blue);
    font-size: 22px;
}

.auth-card {
    padding: 26px;
}

.auth-login-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    max-width: 920px;
    min-height: 0;
    margin: 0 auto;
}

.auth-register-card {
    max-width: 920px;
    margin: 0 auto;
}

.auth-status-card {
    width: min(560px, 100%);
    margin: 0 auto;
}

.auth-status-content {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .035);
}

.auth-status-content p {
    margin: 0;
}

.auth-login-side {
    display: grid;
    align-content: center;
    min-height: 430px;
    padding: 30px;
    border-radius: 9px;
    background:
        linear-gradient(160deg, rgba(37, 27, 215, .20), #0d41b624),
        #0e1020;
}

.auth-side-kicker {
    width: fit-content;
    margin-bottom: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #cfd8ff;
    background: rgba(37, 27, 215, .24);
    font-size: 12px;
    font-weight: 800;
}

.auth-login-side h1 {
    max-width: 360px;
    margin: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1.08;
    font-weight: 800;
}

.auth-login-side p {
    max-width: 380px;
    margin: 13px 0 0;
    color: #c4cdec;
    font-size: 14px;
    line-height: 1.55;
}

.auth-side-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.auth-side-list span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 7px;
    color: #eaf0ff;
    background: rgba(255, 255, 255, .055);
    font-size: 12px;
    font-weight: 700;
}

.auth-side-list i {
    color: #8ea2ff;
    font-size: 15px;
}

.auth-login-panel {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 10px 0;
}

.auth-login-panel .auth-card-head {
    margin-bottom: 22px;
}

.auth-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.auth-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 9px;
    color: #fff;
    background: var(--blue);
    font-size: 24px;
}

.auth-card-icon-success {
    color: var(--green);
    background: rgba(15, 191, 115, .14);
}

.auth-card-icon-error {
    color: #ef4444;
    background: rgba(239, 68, 68, .16);
}

.auth-card h1,
.auth-card h2 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 800;
}

.auth-card p {
    margin: 5px 0 0;
    color: #aebade;
    font-size: 14px;
    line-height: 1.45;
}

.auth-form {
    display: grid;
    gap: 18px;
}

.auth-register-form {
    gap: 18px;
}

.auth-grid {
    display: grid;
    gap: 14px;
}

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

.auth-grid-location {
    align-items: start;
    grid-template-columns: 150px minmax(0, 1fr) 210px;
}

.auth-grid-location .auth-field {
    grid-template-rows: 18px 42px 16px;
}

.auth-grid-location .auth-field:not(:has(small))::after {
    content: "";
}

.auth-field {
    display: grid;
    gap: 8px;
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.auth-field > span,
.auth-check span {
    color: #eaf0ff;
}

.auth-field strong {
    color: #6d63ff;
    font-weight: 800;
}

.auth-field input,
.auth-field select {
    height: 42px;
    padding: 0 13px;
    border-radius: 7px;
    font-size: 14px;
}

.auth-field input::placeholder {
    color: #8793b7;
}

.auth-field small {
    margin-top: -3px;
    color: #9daccc;
    font-size: 12px;
    line-height: 1.3;
}

.auth-password-field {
    position: relative;
}

.auth-password-field input {
    padding-right: 48px;
}

.auth-password-field button {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 42px;
    border: 0cm solid rgba(37, 27, 215, .44);
    border-radius: 0 7px 7px 0;
    color: #fff;
    background: rgba(36, 27, 215, 0);
    font-size: 18px;
}

.auth-form-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-form-row-between {
    justify-content: space-between;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #eaf0ff;
    font-size: 14px;
    font-weight: 500;
}

.auth-check input[type="checkbox"] {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid rgba(158, 174, 212, .34);
    border-radius: 5px;
    appearance: none;
    background: #0e1020;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.auth-check input[type="checkbox"]::after {
    content: "";
    width: 9px;
    height: 5px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    opacity: 0;
    transform: rotate(-45deg) translateY(-1px) scale(.7);
    transition: opacity .16s ease, transform .16s ease;
}

.auth-check input[type="checkbox"]:checked {
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 27, 215, .20);
}

.auth-check input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: rotate(-45deg) translateY(-1px) scale(1);
}

.auth-check input[type="checkbox"]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37, 27, 215, .32);
}

.auth-check span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.auth-business-check {
    width: fit-content;
}

.auth-company-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 16px;
    padding: 18px;
    border: 1px dashed rgba(158, 174, 212, .32);
    border-radius: 9px;
    background: rgba(255, 255, 255, .035);
}

.auth-company-box[hidden] {
    display: none;
}

.auth-help {
    margin: -9px 0 0;
    color: #9daccc;
    font-size: 12px;
}

.auth-terms {
    align-items: flex-start;
}

.auth-form a,
.auth-switch a {
    color: #8ea2ff;
    text-decoration: none;
    font-weight: 700;
}

.auth-form a:hover,
.auth-switch a:hover {
    color: #fff;
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--blue);
    font-size: 14px;
    font-weight: 800;
    transition: transform .16s ease, background .16s ease;
}

.auth-submit:hover {
    background: #3429f1;
}

.auth-submit:disabled {
    opacity: .78;
    cursor: wait;
    transform: none;
}

.auth-submit:active {
    transform: scale(.985);
}

.auth-submit .ti-loader-2 {
    animation: auth-loader-spin .8s linear infinite;
}

@keyframes auth-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.auth-switch {
    margin: 22px 0 0;
    text-align: center;
}

.auth-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.auth-legal {
    min-width: 0;
}

.auth-legal nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.auth-legal a {
    color: #9daccc;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.auth-legal a:hover {
    color: #fff;
}

.auth-legal small {
    display: block;
    margin-top: 7px;
    color: #7582a4;
    font-size: 10px;
    line-height: 1.35;
}

.auth-lang {
    position: relative;
    justify-self: end;
}

.auth-lang-toggle,
.auth-lang-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    color: #fff;
    background: transparent;
    text-align: left;
}

.auth-lang-toggle {
    gap: 8px;
    min-width: 150px;
    height: 34px;
    padding: 0 9px;
    border-radius: 7px;
    background: #0e1020;
    box-shadow: inset 0 0 0 1px rgba(158, 174, 212, .22);
    font-size: 12px;
    font-weight: 800;
}

.auth-lang-toggle i {
    margin-left: auto;
    color: #9daccc;
    font-size: 13px;
    transition: transform .16s ease, color .16s ease;
}

.auth-lang.open .auth-lang-toggle i {
    color: #fff;
    transform: rotate(180deg);
}

.auth-flag {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.flag-fr {
    background: linear-gradient(90deg, #1d3f91 0 33%, #fff 33% 66%, #e51b31 66%);
}

.flag-gb {
    background:
        linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%),
        linear-gradient(0deg, transparent 42%, #fff 42% 58%, transparent 58%),
        linear-gradient(135deg, transparent 44%, #d21f3c 44% 56%, transparent 56%),
        linear-gradient(45deg, transparent 44%, #d21f3c 44% 56%, transparent 56%),
        #172b85;
}

.flag-es {
    background: linear-gradient(180deg, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75%);
}

.flag-de {
    background: linear-gradient(180deg, #111 0 33%, #dd0000 33% 66%, #ffce00 66%);
}

.flag-it {
    background: linear-gradient(90deg, #009246 0 33%, #fff 33% 66%, #ce2b37 66%);
}

.flag-pt {
    background: linear-gradient(90deg, #046a38 0 42%, #da291c 42%);
}

.flag-cn {
    background: #de2910;
}

.flag-cn::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffde00;
}

.auth-lang-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 20;
    display: grid;
    width: 190px;
    padding: 6px;
    border-radius: 9px;
    background: #0e1020;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(158, 174, 212, .16);
}

.auth-lang-menu[hidden] {
    display: none;
}

.auth-lang-menu button {
    gap: 9px;
    min-height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    color: #cbd5f0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.auth-lang-menu button:hover,
.auth-lang-menu button.active {
    color: #fff;
    background: rgba(37, 27, 215, .28);
}

.auth-lang-menu button > i {
    margin-left: auto;
    color: #8ea2ff;
    font-size: 14px;
}

@media (max-width: 980px) {
    .auth-layout-login {
        grid-template-columns: 1fr;
    }

    .auth-login-card {
        grid-template-columns: 1fr;
    }

    .auth-login-side {
        min-height: 0;
        padding: 22px;
    }

    .auth-login-side h1 {
        font-size: 24px;
    }

    .auth-preview {
        min-height: 0;
    }

    .auth-preview-card {
        min-height: 330px;
    }
}

@media (max-width: 760px) {
    .auth-shell {
        padding: 16px;
    }

    .auth-topbar {
        align-items: center;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 16px;
    }

    .auth-grid-2,
    .auth-grid-location,
    .auth-company-box {
        grid-template-columns: 1fr;
    }

    .auth-grid-location .auth-field {
        grid-template-rows: none;
    }

    .auth-grid-location .auth-field:not(:has(small))::after {
        display: none;
    }

    .auth-card,
    .auth-preview {
        padding: 18px;
        border-radius: 8px;
    }

    .auth-login-card {
        gap: 18px;
    }

    .auth-login-side {
        display: none;
    }

    .auth-login-panel {
        padding: 0;
    }

    .auth-preview-card {
        min-height: 290px;
        padding: 20px;
    }

    .auth-preview h1 {
        font-size: 28px;
    }

    .auth-card-head {
        align-items: flex-start;
    }

    .auth-form-row-between {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .auth-footer {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .auth-lang {
        justify-self: start;
    }
}

@media (max-width: 480px) {
    .auth-shell {
        padding: 12px;
    }

    .auth-card,
    .auth-preview {
        padding: 14px;
    }

    .auth-preview-card {
        padding: 16px;
    }

    .auth-card-head {
        gap: 11px;
    }

    .auth-card-icon {
        width: 42px;
        height: 42px;
        font-size: 21px;
    }

    .auth-preview-player {
        grid-template-columns: 46px minmax(0, 1fr) 36px;
    }

    .auth-preview-player img {
        width: 46px;
        height: 46px;
    }

    .auth-preview-player > i {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

.build-radio-body {
    overflow-y: auto;
}

.build-shell {
    width: min(1220px, 100%);
    margin: 0 auto;
}

.build-layout {
    display: grid;
    gap: 18px;
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 26px 0 12px;
}

.build-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    color: #fff;
}

.build-hero h1 {
    margin: 14px 0 8px;
    color: #fff;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 800;
}

.build-hero p {
    max-width: 760px;
    margin: 0;
    color: #c4cdec;
    font-size: 14px;
    line-height: 1.55;
}

.build-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.build-step-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    color: #9daccc;
    background: rgba(255, 255, 255, .05);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, opacity .16s ease;
}

.build-step-trigger.active {
    color: #fff;
    background: var(--blue);
}

.build-step-trigger.done {
    color: #0fbf73;
    background: rgba(15, 191, 115, .13);
}

.build-step-trigger[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .64;
}

.build-card {
    width: 100%;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.build-card.is-hidden {
    display: none;
}

.build-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: stretch;
    gap: 22px;
}

.build-fields {
    display: grid;
    align-content: center;
    gap: 18px;
}

.build-logo-picker {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    min-height: 270px;
    padding: 22px;
    border-radius: 10px;
    color: #fff;
    background: #0e1020;
    cursor: pointer;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(158, 174, 212, .16);
}

.build-logo-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.build-logo-preview {
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    border-radius: 16px;
    color: #8ea2ff;
    background: rgba(37, 27, 215, .16);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 40px;
}

.build-logo-picker strong {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.build-logo-picker small {
    max-width: 210px;
    color: #9daccc;
    font-size: 12px;
    line-height: 1.45;
}

.build-info,
.build-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    color: #b9c5dd;
    background: rgba(255, 255, 255, .04);
    font-size: 13px;
    line-height: 1.45;
}

.build-info i,
.build-tip i {
    flex: 0 0 auto;
    color: #8ea2ff;
    font-size: 18px;
}

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

.build-input-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
}

.build-input-unit input {
    border-radius: 7px 0 0 7px;
}

.build-input-unit em {
    display: grid;
    place-items: center;
    min-height: 42px;
    border: 1px solid rgba(158, 174, 212, .22);
    border-left: 0;
    border-radius: 0 7px 7px 0;
    color: #c4cdec;
    background: #111730;
    font-style: normal;
    font-size: 13px;
}

.build-section-title {
    padding-top: 4px;
}

.build-section-title h2 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 800;
}

.build-transition-table {
    display: grid;
    border-radius: 10px;
    overflow: hidden;
    background: #0e1020;
}

.build-transition-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(4, minmax(118px, 132px));
    align-items: center;
    gap: 14px;
    min-height: 62px;
    padding: 10px 14px;
    border-top: 1px solid rgba(158, 174, 212, .12);
}

.build-transition-row:first-child {
    border-top: 0;
}

.build-transition-head {
    min-height: 42px;
    color: #9daccc;
    background: rgba(255, 255, 255, .035);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
}

.build-transition-row strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.build-transition-row label {
    display: block;
    margin: 0;
}

.build-transition-row label span {
    display: none;
}

.build-transition-row input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 7px;
    color: #fff;
    background: #111730;
    outline: 0;
}

.build-transition-row input:focus {
    border-color: rgba(37, 27, 215, .82);
    box-shadow: 0 0 0 3px rgba(37, 27, 215, .18);
}

.build-tip code {
    padding: 2px 5px;
    border-radius: 5px;
    color: #fff;
    background: rgba(37, 27, 215, .22);
    font-size: 12px;
}

.build-back-link {
    margin-top: 0;
}

.build-footer {
    margin-top: 0;
    padding-bottom: 0;
}

.build-provision {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(7, 8, 18, .82);
    backdrop-filter: blur(10px);
}

.build-provision[hidden] {
    display: none;
}

.build-provision-card {
    display: grid;
    justify-items: center;
    gap: 14px;
    width: min(460px, 100%);
    padding: 28px;
    border-radius: 12px;
    color: #fff;
    background: #111730;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
    text-align: center;
}

.build-provision-card .auth-card-icon i {
    animation: auth-loader-spin .8s linear infinite;
}

.build-provision-card h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.build-provision-card p {
    margin: -6px 0 4px;
    color: #aebade;
    font-size: 14px;
}

.build-provision-list {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
    text-align: left;
}

.build-provision-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    color: #9daccc;
    background: #0e1020;
    font-size: 13px;
    font-weight: 700;
}

.build-provision-list span.active {
    color: #fff;
}

.build-provision-list span.active i {
    color: #8ea2ff;
    animation: auth-loader-spin .8s linear infinite;
}

.build-provision-list span.done {
    color: #0fbf73;
}

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

    .media-transition-test-card {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 900px) {
    .build-hero,
    .build-grid,
    .build-repeat-grid {
        grid-template-columns: 1fr;
    }

    .build-steps {
        justify-content: flex-start;
    }

    .build-transition-head {
        display: none;
    }

    .build-transition-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px;
    }

    .build-transition-row strong {
        grid-column: 1 / -1;
    }

    .build-transition-row label span {
        display: block;
        margin-bottom: 5px;
        color: #9daccc;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }
}

@media (max-width: 560px) {
    .build-layout {
        padding-top: 12px;
    }

    .build-hero h1 {
        font-size: 24px;
    }

    .build-logo-picker {
        min-height: 230px;
    }

    .build-transition-row {
        grid-template-columns: 1fr;
    }
}

.media-board-card {
    background: #111730;
    padding: 5px;
    border-radius: 5px;
}

/* ---------- Modales mediatheque ---------- */
body.media-modal-open {
    overflow: hidden;
}

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

.media-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
    overflow: hidden;
}

.media-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 6, 16, .72);
    backdrop-filter: blur(3px);
}

.media-modal-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    border: 1px solid rgba(158, 174, 212, .16);
    border-radius: 12px;
    background: #111833;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    animation: mediaModalIn .18s ease;
}

.media-delete-dialog {
    max-width: 440px;
}

.media-trim-dialog {
    max-width: 1120px;
}

@keyframes mediaModalIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.media-modal-head {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(158, 174, 212, .14);
}

.media-modal-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.media-modal-head p {
    margin: 4px 0 0;
    color: #aebade;
    font-size: 13px;
    line-height: 1.45;
}

.media-modal-head p strong {
    color: #fff;
    word-break: break-all;
}

.media-modal-head > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 7px;
    color: #aebade;
    background: transparent;
    cursor: pointer;
}

.media-modal-head > button:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.media-modal-body {
    display: grid;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 14px;
    padding: 18px 20px;
}

.media-modal-body::-webkit-scrollbar {
    width: 8px;
}

.media-modal-body::-webkit-scrollbar-track {
    background: rgba(14, 16, 32, .45);
}

.media-modal-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(142, 162, 255, .42);
}

.media-warning-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    color: #cbd5ff;
    background: rgba(37, 27, 215, .16);
    font-size: 13px;
    line-height: 1.45;
}

.media-warning-box i {
    flex-shrink: 0;
    margin-top: 1px;
    color: #8ea2ff;
    font-size: 18px;
}

.media-modal-field {
    display: grid;
    gap: 7px;
    margin: 0;
}

.media-modal-field span {
    color: #9daccc;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.media-modal-field input:not([type="hidden"]),
.media-modal-field textarea,
.media-modal-field select {
    min-height: 42px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 7px;
    color: #fff;
    background: #0e1020;
    outline: 0;
}

.media-modal-field textarea {
    min-height: 96px;
    padding: 12px;
    resize: vertical;
}

.media-modal-field input:not([type="hidden"]):focus,
.media-modal-field textarea:focus,
.media-modal-field select:focus {
    border-color: #8ea2ff;
    box-shadow: 0 0 0 3px rgba(49, 35, 231, .16);
}

.media-edit-layout {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
}

.media-cover-picker {
    position: relative;
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    border: 1px dashed rgba(158, 174, 212, .3);
    border-radius: 10px;
    overflow: hidden;
    background: #0e1020;
    cursor: pointer;
}

.media-cover-picker img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-cover-picker span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 7px;
    color: #fff;
    background: rgba(5, 6, 16, .72);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.media-cover-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.media-edit-fields {
    display: grid;
    align-content: start;
    gap: 12px;
}

.media-edit-fields label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.media-edit-fields label span {
    color: #9daccc;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.media-edit-fields input,
.media-edit-fields select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 7px;
    color: #fff;
    background: #0e1020;
    outline: 0;
}

.media-edit-fields input:focus,
.media-edit-fields select:focus {
    border-color: #8ea2ff;
}

.media-trim-body {
    gap: 16px;
}

.media-trim-wave-shell {
    position: relative;
    min-height: 140px;
    padding: 10px;
    border: 1px solid rgba(158, 174, 212, .18);
    border-radius: 10px;
    background: #eef6ff;
    overflow: hidden;
    cursor: crosshair;
    user-select: none;
}

.media-trim-wave-shell.is-panning {
    cursor: grabbing;
}

.media-trim-wave {
    display: block;
    width: 100%;
    height: 120px;
    border-radius: 7px;
    background: #dbeafe;
}

.media-trim-handle {
    position: absolute;
    top: 10px;
    bottom: 10px;
    z-index: 3;
    width: 2px;
    border: 0;
    padding: 0;
    background: #ef4444;
    cursor: ew-resize;
}

.media-trim-handle-start {
    background: #059669;
}

.media-trim-handle-excerpt-start,
.media-trim-handle-excerpt-end {
    z-index: 4;
    width: 3px;
    background: #facc15;
}

.media-trim-handle::before {
    content: "";
    position: absolute;
    inset: 0 -8px;
}

.media-trim-handle span {
    position: absolute;
    top: 8px;
    left: 0;
    transform: translateX(-50%);
    min-width: 58px;
    padding: 3px 8px;
    border-radius: 6px;
    color: #fff;
    background: #111827;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.media-trim-handle-start span {
    background: #047857;
}

.media-trim-handle-end span {
    background: #111827;
}

.media-trim-handle-excerpt-start span,
.media-trim-handle-excerpt-end span {
    color: #111827;
    background: #facc15;
}

.media-trim-playhead {
    position: absolute;
    top: 10px;
    bottom: 10px;
    z-index: 5;
    width: 2px;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: rgba(37, 99, 235, .9);
    cursor: ew-resize;
    opacity: 0;
}

.media-trim-playhead::before {
    content: "";
    position: absolute;
    top: 0;
    left: -9px;
    width: 20px;
    height: 100%;
}

.media-trim-playhead::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
    transform: translateX(-50%);
}

.media-trim-preview-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.media-trim-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 40px;
    border: 1px solid rgba(255, 87, 87, .28);
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 87, 87, .08);
    cursor: pointer;
}

.media-trim-icon-btn:hover {
    background: rgba(255, 87, 87, .18);
}

.media-trim-time {
    min-width: 90px;
    color: #cbd5ff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.media-trim-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #aebade;
    font-size: 12px;
    font-weight: 800;
}

.media-trim-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.media-trim-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.media-trim-dot-green {
    background: #10b981;
}

.media-trim-dot-red {
    background: #ef4444;
}

.media-trim-dot-yellow {
    background: #facc15;
}

.media-trim-dot-blue {
    background: #2563eb;
}

.media-trim-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.media-trim-controls label {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 14px;
    margin: 0;
}

.media-trim-controls span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cbd5ff;
    font-size: 13px;
    font-weight: 800;
}

.media-trim-controls strong {
    color: #cbd5ff;
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.media-trim-controls input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    accent-color: var(--blue);
}

.media-trim-actions {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
}

.media-trim-reset {
    justify-self: start;
}

.media-modal-actions {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 20px;
    border-top: 1px solid rgba(158, 174, 212, .12);
    background: #111833;
}

.media-modal-actions.media-trim-actions {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
}

.media-modal-actions.media-trim-actions .media-trim-reset {
    justify-self: start;
}

.media-delete-dialog .media-modal-actions {
    padding-top: 18px;
}

.media-btn-muted,
.media-btn-primary,
.media-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.media-btn-muted {
    color: #c4cdec;
    background: rgba(255, 255, 255, .06);
}

.media-btn-muted:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.media-btn-primary {
    color: #fff;
    background: var(--blue);
}

.media-btn-primary:hover {
    filter: brightness(1.08);
}

.media-btn-danger {
    color: #fff;
    background: #e23b5a;
}

.media-btn-danger:hover {
    background: #ff4d6d;
}

@media (max-width: 560px) {
    .media-edit-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

/* ---------- Pagination mediatheque ---------- */
.media-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px 6px;
}

.media-pagination[hidden] {
    display: none;
}

.media-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid rgba(158, 174, 212, .2);
    border-radius: 7px;
    color: #c4cdec;
    background: rgba(255, 255, 255, .03);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.media-page-btn:hover:not(:disabled):not(.active) {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.media-page-btn.active {
    color: #fff;
    border-color: transparent;
    background: var(--blue);
    cursor: default;
}

.media-page-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ---------- Playlists ---------- */
.playlist-workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 16px;
}

.playlist-workspace .manager-footer {
    margin-top: auto;
}

.playlist-page-head,
.playlist-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.playlist-page-head h1,
.playlist-editor-head h1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.playlist-editor-head > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.playlist-editor-head > div:first-child button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(142, 162, 255, .24);
    border-radius: 8px;
    color: #8ea2ff;
    background: rgba(255, 255, 255, .03);
    cursor: pointer;
}

.playlist-main-btn,
.playlist-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.playlist-main-btn {
    border: 0;
    color: #fff;
    background: var(--blue);
}

.playlist-outline-btn {
    border: 1px solid rgba(142, 162, 255, .3);
    color: #fff;
    background: rgba(255, 255, 255, .03);
}

.playlist-board-card,
.playlist-table-card,
.playlist-library-card,
.playlist-rotation-card,
.playlist-broadcast-card {
    border-radius: 8px;
    background: #111730;
}

.playlist-board-card {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.playlist-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.playlist-toolbar label,
.playlist-library-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 7px;
    color: #9daccc;
    background: #0e1020;
}

.playlist-toolbar input,
.playlist-library-search input {
    width: 100%;
    border: 0;
    color: #fff;
    background: transparent;
    outline: 0;
}

.playlist-toolbar span {
    color: #9daccc;
    font-size: 13px;
    font-weight: 700;
}

.playlist-table-card {
    overflow: hidden;
}

.playlist-table {
    width: 100%;
    border-collapse: collapse;
}

.playlist-table th,
.playlist-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(158, 174, 212, .1);
    color: #c4cdec;
    font-size: 14px;
    vertical-align: middle;
}

.playlist-table th {
    color: #9daccc;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(255, 255, 255, .02);
}

.playlist-table tbody tr:last-child td {
    border-bottom: 0;
}

.playlist-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
}

.playlist-name-cell img {
    width: 44px;
    height: 44px;
    border-radius: 7px;
    object-fit: cover;
    background: #0e1020;
}

.playlist-name-cell div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.playlist-name-cell strong {
    color: #fff;
    font-size: 15px;
}

.playlist-name-cell small {
    flex-basis: 100%;
    color: #9daccc;
    font-size: 12px;
    line-height: 1.35;
}

.playlist-name-cell em,
.playlist-pill,
.playlist-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    color: #cbd5ff;
    background: rgba(142, 162, 255, .14);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.playlist-name-cell em {
    color: #ffd66b;
    background: rgba(255, 214, 107, .14);
}

.playlist-toggle {
    position: relative;
    width: 42px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: rgba(158, 174, 212, .25);
    cursor: pointer;
}

.playlist-toggle span {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease;
}

.playlist-toggle.active {
    background: var(--blue);
}

.playlist-toggle.active span {
    transform: translateX(18px);
}

.playlist-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.playlist-actions a,
.playlist-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(142, 162, 255, .25);
    border-radius: 7px;
    color: #fff;
    background: rgba(255, 255, 255, .03);
    text-decoration: none;
    cursor: pointer;
}

.playlist-actions button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.playlist-editor-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.playlist-editor {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 18px;
}

.playlist-library-card {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    height: clamp(560px, calc(100vh - 170px), 820px);
    min-height: 0;
    overflow: hidden;
    padding: 10px;
}

.playlist-source-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.playlist-source-tabs button {
    min-height: 46px;
    border: 0;
    border-radius: 7px;
    color: #c4cdec;
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
    font-weight: 800;
}

.playlist-source-tabs button.active {
    color: #fff;
    background: var(--blue);
}

.playlist-source-tabs button:disabled {
    opacity: .55;
}

.playlist-library-card select {
    min-height: 42px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 7px;
    color: #fff;
    background: #0e1020;
}

.playlist-add-category {
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--blue);
    font-weight: 800;
    cursor: pointer;
}

.playlist-library-list {
    display: grid;
    align-content: start;
    gap: 5px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.playlist-library-list::-webkit-scrollbar,
.playlist-rotation-list::-webkit-scrollbar {
    width: 7px;
}

.playlist-library-list::-webkit-scrollbar-track,
.playlist-rotation-list::-webkit-scrollbar-track {
    background: transparent;
}

.playlist-library-list::-webkit-scrollbar-thumb,
.playlist-rotation-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #2f3548;
}

.playlist-library-track {
    display: grid;
    grid-template-columns: 38px 30px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 7px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .035);
}

.playlist-library-track img {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    object-fit: cover;
}

.playlist-library-track strong,
.playlist-line strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-library-track small,
.playlist-line small {
    color: #9daccc;
    font-size: 12px;
}

.playlist-library-track span {
    color: #9daccc;
    font-size: 12px;
    font-weight: 700;
}

.playlist-library-track button,
.playlist-track-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
    cursor: pointer;
}

.playlist-track-preview {
    border: 1px solid rgba(142, 162, 255, .24) !important;
    border-radius: 7px !important;
    color: #dbe4ff !important;
    background: rgba(255, 255, 255, .04) !important;
}

.playlist-rotation-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: start;
    height: clamp(560px, calc(100vh - 170px), 820px);
    min-height: 0;
    overflow: hidden;
}

.playlist-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(158, 174, 212, .12);
}

.playlist-card-head h2,
.playlist-broadcast-card h2 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.playlist-rotation-list {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

.playlist-line {
    display: grid;
    grid-template-columns: 22px 28px 32px 42px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.playlist-line.is-dragging {
    opacity: .45;
}

.playlist-drag,
.playlist-line-play,
.playlist-line-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #c4cdec;
    background: transparent;
    cursor: pointer;
}

.playlist-line-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
    font-size: 12px;
    font-weight: 900;
}

.playlist-line-play,
.playlist-line-remove {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(142, 162, 255, .22);
    border-radius: 7px;
}

.playlist-line-play.is-playing,
.playlist-track-preview.is-playing {
    color: #fff !important;
    border-color: rgba(49, 35, 231, .55);
    background: var(--blue) !important;
}

.playlist-line img {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
}

.playlist-empty-lines {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 220px;
    color: #9daccc;
    text-align: center;
}

.playlist-empty-lines[hidden] {
    display: none;
}

.playlist-empty-lines i {
    color: #8ea2ff;
    font-size: 34px;
}

.playlist-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: auto;
    border-top: 1px solid rgba(158, 174, 212, .12);
    background: rgba(255, 255, 255, .02);
}

.playlist-summary div {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 16px;
}

.playlist-summary strong {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.playlist-summary span {
    color: #9daccc;
    font-size: 12px;
}

.playlist-broadcast-card {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
}

.playlist-broadcast-card p {
    margin: 5px 0 0;
    color: #9daccc;
}

.playlist-broadcast-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.playlist-broadcast-actions label {
    display: flex;
    align-items: center;
    min-height: 38px;
    border: 1px solid rgba(142, 162, 255, .24);
    border-radius: 7px;
    overflow: hidden;
    color: #c4cdec;
    background: #0e1020;
}

.playlist-broadcast-actions label i,
.playlist-broadcast-actions label span {
    padding: 0 10px;
}

.playlist-broadcast-actions input {
    width: 64px;
    min-height: 38px;
    border: 0;
    color: #fff;
    background: transparent;
    outline: 0;
}

.playlist-modal-form textarea {
    width: 100%;
    min-height: 86px;
    padding: 12px;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 7px;
    color: #fff;
    background: #0e1020;
    outline: 0;
    resize: vertical;
}

.playlist-cover-drop {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 120px;
    border: 1px dashed rgba(158, 174, 212, .36);
    border-radius: 10px;
    overflow: hidden;
    color: #9daccc;
    background: #0e1020;
    cursor: pointer;
}

.playlist-cover-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.playlist-cover-drop img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-cover-drop span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 7px;
    background: rgba(5, 6, 16, .72);
}

.playlist-cover-help {
    color: #9daccc;
}

@media (max-width: 1180px) {
    .playlist-editor {
        grid-template-columns: 1fr;
    }

    .playlist-broadcast-card {
        grid-column: 1;
    }
}

@media (max-width: 760px) {
    .playlist-page-head,
    .playlist-editor-head,
    .playlist-broadcast-card,
    .playlist-broadcast-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .playlist-toolbar {
        grid-template-columns: 1fr;
    }

    .playlist-table-card {
        overflow-x: auto;
    }

    .playlist-table {
        min-width: 860px;
    }

    .playlist-line {
        grid-template-columns: 22px 28px 32px minmax(0, 1fr) 34px;
    }

    .playlist-line img {
        display: none;
    }

    .playlist-summary {
        grid-template-columns: 1fr;
    }
}

.media-page-ellipsis {
    display: inline-flex;
    align-items: flex-end;
    padding: 0 4px;
    color: #7f8ca8;
    font-weight: 800;
}

.media-workspace {
    gap: 18px;
}

.media-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: end;
    gap: 20px;
}

.media-header h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #fff;
    font-size: 25px;
    line-height: 1.08;
    font-weight: 800;
}

.media-header p {
    margin: 4px 0 0;
    color: #aebade;
    font-size: 14px;
}

.media-storage-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    background: var(--panel);
}

.media-storage-card > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.media-storage-card small {
    color: #9daccc;
    font-size: 11px;
}

.media-grid {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.media-left,
.media-main {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
}

.media-upload-card,
.media-categories,
.media-table-card,
.media-toolbar {
    border-radius: 8px;
    background: var(--panel);
}

.media-upload-card {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.media-upload-card h2,
.media-panel-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.media-dropzone {
    position: relative;
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 128px;
    padding: 18px;
    border: 2px dashed rgba(158, 174, 212, .36);
    border-radius: 8px;
    color: #c4cdec;
    background: rgba(255, 255, 255, .045);
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.media-dropzone.is-dragover {
    border-color: #8ea2ff;
    background: rgba(37, 27, 215, .22);
}

.media-dropzone input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.media-dropzone i {
    color: #9daccc;
    font-size: 34px;
}

.media-dropzone strong {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.media-dropzone span,
.media-upload-card small {
    color: #aebade;
    font-size: 12px;
}

.media-upload-queue {
    display: grid;
    overflow: hidden;
    border-radius: 7px;
    background: rgba(255, 255, 255, .04);
}

.media-upload-queue[hidden],
.media-upload-status[hidden] {
    display: none;
}

.media-upload-item {
    display: grid;
    gap: 0;
    min-height: 30px;
    color: #e8ecff;
    background: rgba(255, 255, 255, .055);
}

.media-upload-item + .media-upload-item {
    border-top: 1px solid rgba(158, 174, 212, .12);
}

.media-upload-item-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 8px;
}

.media-upload-item-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-upload-item-name i {
    color: #8ea2ff;
    font-size: 14px;
}

.media-upload-item-size {
    color: #aebade;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.media-upload-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: #aebade;
    background: transparent;
}

.media-upload-remove:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.media-upload-item-progress,
.media-upload-total-progress {
    overflow: hidden;
    height: 3px;
    background: rgba(255, 255, 255, .08);
}

.media-upload-item-progress span,
.media-upload-total-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: #8ea2ff;
    transition: width .18s ease;
}

.media-upload-item[data-upload-status="success"] .media-upload-item-progress span {
    background: #00c977;
}

.media-upload-item[data-upload-status="error"] .media-upload-item-progress span {
    background: #ff4d6d;
}

.media-upload-item[data-upload-status="error"] .media-upload-item-size {
    color: #ff8aa0;
}

.media-upload-status {
    display: grid;
    gap: 6px;
}

.media-upload-status-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #aebade;
    font-size: 12px;
    font-weight: 800;
}

.media-upload-card select,
.media-upload-card button:not(.media-upload-remove),
.media-toolbar input,
.media-toolbar select,
.media-toolbar button {
    min-height: 42px;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 7px;
    color: #fff;
    background: #0e1020;
    outline: 0;
}

.media-upload-card select,
.media-toolbar input,
.media-toolbar select {
    padding: 0 12px;
}

.media-upload-card button:not(.media-upload-remove),
.media-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: var(--blue);
    font-weight: 800;
}

.media-categories {
    overflow: hidden;
}

.media-panel-head {
    padding: 12px 14px;
}

.media-category-form {
    display: grid;
    gap: 8px;
    padding: 0 14px 12px;
}

.media-category-form label {
    display: grid;
    gap: 5px;
    margin: 0;
}

.media-category-form label span {
    color: #9daccc;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.media-category-form > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 8px;
}

.media-category-form input,
.media-category-form select,
.media-category-form button {
    min-height: 40px;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 7px;
    color: #fff;
    background: #0e1020;
    outline: 0;
}

.media-category-form input,
.media-category-form select {
    width: 100%;
    padding: 0 12px;
}

.media-category-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--blue);
}

.media-categories a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    padding: 0 14px;
    color: #d8def4;
    text-decoration: none;
    border-top: 1px solid rgba(158, 174, 212, .11);
    font-size: 13px;
}

.media-categories a.active,
.media-categories a:hover {
    color: #fff;
    background: rgba(37, 27, 215, .2);
}

.media-categories span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.media-categories .media-category-name {
    display: grid;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.media-categories .media-category-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-categories .media-category-name small {
    color: #8ea2ff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.media-categories em {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    font-style: normal;
    font-size: 12px;
}

.media-category-list {
    display: grid;
    gap: 6px;
    padding: 0 10px 12px;
}

.media-category-all,
.media-category-item {
    min-height: 42px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.media-category-all,
.media-category-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    border: 0;
    color: #d8def4;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.media-category-all {
    padding: 0 10px;
}

.media-category-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px 34px;
    align-items: stretch;
    overflow: hidden;
}

.media-category-filter {
    padding: 7px 8px 7px 10px;
}

.media-category-all:hover,
.media-category-all.active,
.media-category-filter:hover,
.media-category-filter.active {
    color: #fff;
    background: rgba(37, 27, 215, .24);
}

.media-category-all > span,
.media-category-filter > span {
    min-width: 0;
}

.media-category-edit,
.media-category-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    border: 0;
    color: #7f8db4;
    background: transparent;
    cursor: pointer;
}

.media-category-edit:hover,
.media-category-delete:hover {
    color: #fff;
    background: rgba(37, 27, 215, .35);
}

.media-category-edit {
    color: #9fb2f2;
}

.media-transition-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.media-transition-grid label {
    display: grid;
    gap: 6px;
}

.media-transition-grid span {
    color: #9daccc;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.media-transition-grid small {
    min-height: 34px;
    color: #8190b8;
    font-size: 11px;
    line-height: 1.35;
}

.media-transition-grid input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 7px;
    color: #fff;
    background: #0e1020;
    outline: 0;
}

.media-transition-grid input:focus {
    border-color: rgba(55, 42, 238, .85);
    box-shadow: 0 0 0 3px rgba(55, 42, 238, .18);
}

.media-transition-test-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 8px;
    background: rgba(37, 27, 215, .13);
}

.media-transition-test-card strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.media-transition-test-card p {
    margin: 5px 0 0;
    color: #aebce1;
    font-size: 12px;
    line-height: 1.45;
}

.media-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(142, 162, 255, .28);
    border-radius: 8px;
    color: #fff;
    background: rgba(37, 27, 215, .52);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.media-btn-secondary:hover {
    background: rgba(55, 42, 238, .72);
}

.media-btn-secondary:disabled {
    opacity: .65;
    cursor: wait;
}

.media-transition-preview {
    display: grid;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(142, 162, 255, .18);
    border-radius: 8px;
    background: rgba(14, 16, 32, .76);
}

.media-transition-preview[hidden] {
    display: none;
}

.media-transition-preview-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.media-transition-preview strong,
.media-transition-preview span {
    display: block;
}

.media-transition-preview strong {
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-transition-preview span {
    margin-top: 4px;
    color: #aebce1;
    font-size: 12px;
}

.media-transition-preview button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(142, 162, 255, .22);
    border-radius: 7px;
    color: #fff;
    background: rgba(255, 255, 255, .055);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.media-transition-preview button:hover {
    background: rgba(55, 42, 238, .35);
}

.media-transition-visual {
    position: relative;
    min-height: 150px;
    padding: 34px 12px 12px;
    overflow: hidden;
    border: 1px solid rgba(142, 162, 255, .18);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(142, 162, 255, .08) 1px, transparent 1px) 0 0 / 10% 100%,
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(37, 27, 215, .06));
}

.media-transition-time {
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 10px;
    border-radius: 999px;
    color: #fff;
    background: #0b0d19;
    font-size: 12px;
    font-weight: 800;
}

.media-transition-scale {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 170px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    color: #8ea2ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.media-transition-lane {
    position: relative;
    height: 44px;
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid rgba(142, 162, 255, .14);
    border-radius: 7px;
    background:
        repeating-linear-gradient(90deg, rgba(142, 162, 255, .16) 0 2px, transparent 2px 9px),
        linear-gradient(180deg, rgba(142, 162, 255, .10), rgba(142, 162, 255, .04));
}

.media-transition-lane:first-of-type {
    margin-top: 0;
}

.media-transition-lane::after {
    content: "";
    position: absolute;
    inset: 9px 0;
    opacity: .65;
    background:
        linear-gradient(90deg, transparent, rgba(142, 205, 255, .35), transparent),
        repeating-linear-gradient(90deg, rgba(142, 205, 255, .35) 0 3px, transparent 3px 11px);
    clip-path: polygon(0 50%, 4% 25%, 8% 64%, 12% 34%, 16% 58%, 20% 18%, 24% 72%, 28% 38%, 32% 62%, 36% 26%, 40% 70%, 44% 44%, 48% 55%, 52% 24%, 56% 76%, 60% 32%, 64% 61%, 68% 28%, 72% 73%, 76% 42%, 80% 60%, 84% 22%, 88% 69%, 92% 35%, 96% 57%, 100% 50%);
}

.media-transition-lane em {
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 4;
    transform: translateY(-50%);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.media-transition-lane i {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    width: 0;
    border-radius: inherit;
    background: rgba(126, 154, 255, .36);
    transition: left .12s linear, width .12s linear;
}

.media-transition-lane-jingle i {
    background: rgba(0, 207, 135, .25);
}

.media-transition-playhead {
    position: absolute;
    top: 34px;
    bottom: 12px;
    left: 0;
    z-index: 7;
    width: 2px;
    background: #ff335f;
    box-shadow: 0 0 0 1px rgba(255, 51, 95, .28), 0 0 18px rgba(255, 51, 95, .46);
    transition: left .08s linear;
}

.media-transition-playhead::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #ff335f;
    transform: translateX(-50%);
}

.media-transition-marker {
    position: absolute;
    top: 34px;
    bottom: 12px;
    left: 0;
    z-index: 6;
    border-left: 1px dashed rgba(255, 211, 102, .95);
    transition: left .12s linear;
}

.media-transition-marker span {
    position: absolute;
    top: 47px;
    left: 7px;
    width: max-content;
    max-width: 160px;
    padding: 3px 6px;
    border-radius: 999px;
    color: #0b0d19;
    background: #ffd366;
    font-size: 10px;
    font-weight: 900;
}

.media-transition-handle {
    position: absolute;
    top: 34px;
    bottom: 12px;
    left: 0;
    z-index: 9;
    display: block;
    width: 14px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: ew-resize;
    transform: translateX(-50%);
    touch-action: none;
}

.media-transition-handle[hidden] {
    display: none;
}

.media-transition-preview .media-transition-handle:hover {
    background: transparent;
}

.media-transition-handle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    border-radius: 999px;
    background: #ff335f;
    box-shadow: 0 0 16px rgba(255, 51, 95, .45);
    transform: translateX(-50%);
}

.media-transition-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid #0b0d19;
    border-radius: 999px;
    background: #ff335f;
    transform: translate(-50%, -50%);
}

.media-transition-handle span {
    position: absolute;
    top: -26px;
    left: 50%;
    display: block;
    width: max-content;
    max-width: 130px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #0b0d19;
    background: #ff335f;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    transform: translateX(-50%);
    white-space: nowrap;
}

.media-transition-handle:hover::before,
.media-transition-handle.dragging::before {
    width: 4px;
}

.media-transition-handle:hover span,
.media-transition-handle.dragging span {
    filter: brightness(1.12);
}

.media-transition-handle-cross::before,
.media-transition-handle-cross::after {
    background: #ffd366;
}

.media-transition-handle-cross span {
    background: #ffd366;
}

.media-transition-handle-fade-in::before,
.media-transition-handle-fade-in::after {
    background: #00cf87;
}

.media-transition-handle-fade-in span {
    background: #00cf87;
}

.media-transition-handle-fade-out::before,
.media-transition-handle-fade-out::after {
    background: #8ea2ff;
}

.media-transition-handle-fade-out span {
    color: #fff;
    background: #372aee;
}

.media-transition-crosszone {
    position: absolute;
    top: 78px;
    height: 48px;
    z-index: 3;
    border: 1px solid rgba(255, 211, 102, .35);
    border-radius: 6px;
    background: rgba(255, 211, 102, .14);
    transition: left .12s linear, width .12s linear;
}

.media-transition-crosszone[hidden] {
    display: none;
}

.media-transition-crosszone span {
    position: absolute;
    right: 5px;
    bottom: 4px;
    color: #ffd366;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.media-transition-help {
    margin: 0;
    color: #aebce1;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 680px) {
    .media-transition-test-card,
    .media-transition-preview-head {
        grid-template-columns: 1fr;
    }

    .media-transition-scale {
        right: 12px;
    }

    .media-transition-time {
        position: static;
        width: fit-content;
        margin: -24px 0 8px auto;
    }
}

.media-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.media-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    color: #c4cdec;
    background: transparent;
    font-size: 14px;
    font-weight: 800;
}

.media-tabs button.active {
    color: #fff;
    background: #0b0d19;
}

.media-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 220px auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.media-toolbar label {
    position: relative;
    margin: 0;
}

.media-toolbar label i {
    position: absolute;
    left: 12px;
    top: 50%;
    color: #9daccc;
    transform: translateY(-50%);
}

.media-toolbar input {
    width: 100%;
    padding-left: 38px;
}

.media-toolbar > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 7px;
    color: #c4cdec;
    background: rgba(255, 255, 255, .045);
    font-size: 13px;
}

.media-table-card {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.media-table {
    width: 100%;
    min-width: 980px;
    color: #d8def4;
    border-collapse: collapse;
}

.media-table th {
    height: 42px;
    padding: 0 10px;
    color: #9daccc;
    background: rgba(255, 255, 255, .045);
    font-size: 11px;
    text-transform: uppercase;
}

.media-table td {
    padding: 9px 10px;
    border-top: 1px solid rgba(158, 174, 212, .1);
    font-size: 13px;
    vertical-align: middle;
}

.media-table th:first-child,
.media-table td:first-child {
    width: 46px;
    text-align: center;
}

.media-table th:nth-child(2),
.media-table td:nth-child(2) {
    width: 64px;
}

.media-table th:last-child,
.media-table td:last-child {
    width: 110px;
    text-align: right;
}

.media-id {
    color: #8ea2ff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

.media-play-btn,
.media-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 6px;
    color: #fff;
    background: #0e1020;
}

.media-play-btn.is-playing,
.media-play-btn:hover,
.media-actions button:hover {
    background: var(--blue);
}

.media-track {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.media-track img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    background: #fff;
}

.media-track span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.media-track strong,
.media-track small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-track strong {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.media-track small {
    color: #aebade;
    font-size: 12px;
}

.media-category-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
}

.media-actions {
    display: inline-flex;
    gap: 6px;
}

.media-empty {
    height: 120px;
    color: #9daccc;
    text-align: center;
}

@media (max-width: 1500px) and (min-width: 1181px) {
    .media-workspace {
        min-width: 0;
    }

    .media-board-card {
        padding: 8px;
    }

    .media-grid {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
        gap: 14px;
    }

    .media-toolbar {
        grid-template-columns: minmax(240px, 1fr) minmax(180px, 220px) auto;
    }

    .media-table {
        min-width: 820px;
    }

    .media-table th,
    .media-table td {
        padding-right: 8px;
        padding-left: 8px;
    }

    .media-table th:first-child,
    .media-table td:first-child {
        width: 42px;
    }

    .media-table th:nth-child(2),
    .media-table td:nth-child(2) {
        width: 54px;
    }

    .media-table th:nth-child(4),
    .media-table td:nth-child(4) {
        width: 96px;
    }

    .media-table th:nth-child(5),
    .media-table td:nth-child(5) {
        width: 62px;
    }

    .media-table th:nth-child(6),
    .media-table td:nth-child(6) {
        width: 118px;
    }

    .media-table th:nth-child(7),
    .media-table td:nth-child(7) {
        width: 78px;
    }

    .media-table th:last-child,
    .media-table td:last-child {
        width: 104px;
    }

    .media-track {
        min-width: 180px;
        gap: 8px;
    }

    .media-track img {
        width: 34px;
        height: 34px;
    }

    .media-actions {
        gap: 5px;
    }
}

@media (max-width: 1180px) {
    .media-grid,
    .media-header {
        grid-template-columns: 1fr;
    }
}

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

    .media-table-card {
        overflow-x: auto;
    }

    .media-table {
        min-width: 760px;
    }

    .media-trim-dialog {
        max-height: calc(100dvh - 20px);
    }

    .media-trim-controls {
        grid-template-columns: 1fr;
    }

    .media-trim-actions {
        grid-template-columns: 1fr;
    }
}

.toast-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9999;
    display: grid;
    gap: 12px;
    width: min(380px, calc(100vw - 28px));
    pointer-events: none;
}

.sd-toast {
    --toast-accent: var(--blue);
    --toast-icon-bg: rgba(37, 27, 215, 0.22);
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    gap: 12px;
    align-items: center;
    min-height: 66px;
    padding: 12px 10px 14px 12px;
    overflow: hidden;
    color: var(--white);
    background: #111730;
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
    pointer-events: auto;
    animation: sd-toast-in 180ms ease-out both;
}

.sd-toast-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--toast-accent);
    background: var(--toast-icon-bg);
    border-radius: 9px;
    font-size: 20px;
}

.sd-toast-content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.sd-toast-content strong {
    overflow: hidden;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-toast-content small {
    color: var(--muted-dark);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.sd-toast-close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--muted-dark);
    background: transparent;
    border: 0;
    border-radius: 7px;
}

.sd-toast-close:hover,
.sd-toast-close:focus-visible {
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    outline: 0;
}

.sd-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--toast-accent);
    transform-origin: left center;
    animation: sd-toast-progress var(--toast-duration) linear forwards;
}

.sd-toast:hover .sd-toast-progress,
.sd-toast:focus-within .sd-toast-progress {
    animation-play-state: paused;
}

.sd-toast-success {
    --toast-accent: #0fbf73;
    --toast-icon-bg: rgba(15, 191, 115, 0.14);
}

.sd-toast-error {
    --toast-accent: #ef4444;
    --toast-icon-bg: rgba(239, 68, 68, 0.16);
}

.sd-toast-warning {
    --toast-accent: #7c6dff;
    --toast-icon-bg: rgba(124, 109, 255, 0.16);
}

.sd-toast-info {
    --toast-accent: var(--blue);
    --toast-icon-bg: rgba(37, 27, 215, 0.22);
}

.sd-toast.is-removing {
    animation: sd-toast-out 160ms ease-in forwards;
}

@keyframes sd-toast-in {
    from {
        opacity: 0;
        transform: translate3d(14px, -8px, 0) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes sd-toast-out {
    to {
        opacity: 0;
        transform: translate3d(14px, -8px, 0) scale(0.98);
    }
}

@keyframes sd-toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (max-width: 480px) {
    .toast-stack {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    .sd-toast {
        grid-template-columns: 38px minmax(0, 1fr) 28px;
        gap: 10px;
    }
}

/* ---------- Programmation ---------- */
.program-workspace {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 16px;
    overflow: hidden;
}

.program-workspace .manager-footer {
    margin-top: auto;
    flex: 0 0 auto;
}

.program-page-head,
.program-radio-line,
.program-board-footer,
.program-head-actions,
.program-tabs {
    display: flex;
    align-items: center;
}

.program-page-head {
    justify-content: space-between;
    gap: 18px;
}

.program-page-head h1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.program-head-actions {
    justify-content: flex-end;
    gap: 8px;
}

.program-danger-btn,
.program-dark-btn,
.program-help-btn,
.program-quick-btn,
.program-outline-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 7px;
    border: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.program-danger-btn {
    background: #da304a;
}

.program-dark-btn {
    background: #0e1020;
}

.program-help-btn,
.program-quick-btn {
    width: 36px;
    padding: 0;
    color: #8ea2ff;
    border: 1px solid rgba(142, 162, 255, .24);
    background: rgba(255, 255, 255, .03);
}

.program-radio-line {
    justify-content: space-between;
    gap: 16px;
    color: #c4cdec;
}

.program-radio-line div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.program-radio-line strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}

.program-radio-line span {
    color: #9daccc;
    font-size: 12px;
}

.program-board-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 8px;
    background: #111730;
    overflow: hidden;
}

.program-tabs {
    gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(158, 174, 212, .14);
}

.program-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    color: #aebade;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
}

.program-tabs button.active {
    color: #fff;
    background: var(--blue);
}

.program-tabs button span {
    width: 14px;
    height: 8px;
    border-radius: 999px;
    background: #da6074;
}

.program-grid-wrap {
    height: clamp(420px, calc(100dvh - 260px), 620px);
    min-height: 0;
    overflow-x: auto;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-color: #2f3548 transparent;
    scrollbar-width: thin;
}

.program-grid-wrap::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.program-grid-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.program-grid-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #2f3548;
}

.program-grid {
    position: relative;
    display: grid;
    min-width: 1280px;
    grid-template-columns: 58px repeat(7, minmax(150px, 1fr));
    grid-template-rows: 36px repeat(24, var(--program-row-height));
    background:
        linear-gradient(rgba(158, 174, 212, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(158, 174, 212, .12) 1px, transparent 1px);
    background-size: 100% var(--program-row-height), calc((100% - 58px) / 7) 100%;
    background-position: 0 36px, 58px 0;
}

.program-corner,
.program-day-head,
.program-hour-label {
    position: sticky;
    z-index: 6;
    display: flex;
    align-items: center;
    background: #151c36;
}

.program-corner {
    left: 0;
    grid-column: 1;
    grid-row: 1;
    z-index: 8;
}

.program-day-head {
    top: 0;
    justify-content: center;
    color: #aebade;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.program-hour-label {
    left: 0;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.program-cell {
    display: grid;
    place-items: center;
    min-width: 0;
    border: 0;
    color: rgba(174, 186, 222, .36);
    background: transparent;
    font-size: 13px;
}

.program-cell:hover {
    color: #fff;
    background: rgba(37, 27, 215, .18);
}

.program-slot {
    z-index: 5;
    min-width: 0;
    padding: 3px;
    overflow: hidden;
}

.program-slot button {
    display: grid;
    align-content: center;
    justify-items: start;
    width: 100%;
    height: 100%;
    min-height: 30px;
    padding: 6px 9px;
    border: 0;
    border-radius: 6px;
    color: #071126;
    background: var(--slot-color);
    text-align: left;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.program-slot button:hover {
    filter: brightness(1.05);
}

.program-slot strong,
.program-slot span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.program-slot strong {
    font-size: 12px;
    font-weight: 900;
}

.program-slot span {
    font-size: 11px;
    font-weight: 700;
    opacity: .78;
}

.program-board-footer {
    justify-content: flex-end;
    min-height: 56px;
    padding: 10px 14px;
    border-top: 1px solid rgba(158, 174, 212, .14);
}

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

.program-panel.active {
    display: block;
    min-height: 0;
}

.program-panel[data-program-panel="grid"].active {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.program-panel[data-program-panel="live"].active {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
}

[data-program-live-content] {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.program-tabs button span {
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 27, 215, .18);
}

.program-placeholder-panel,
.program-live-empty {
    display: grid;
    place-items: center;
    min-height: 420px;
    padding: 38px;
    text-align: center;
    color: #aebade;
}

.program-placeholder-panel i,
.program-live-empty i {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 12px;
    color: #fff;
    background: var(--blue);
    font-size: 26px;
}

.program-placeholder-panel h2,
.program-live-empty h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 20px;
}

.program-placeholder-panel p,
.program-live-empty p {
    margin: 0;
    color: #9daccc;
}

.program-live-empty button,
.program-live-head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--blue);
    font-weight: 900;
}

.program-live-empty button {
    margin-top: 18px;
}

.program-live-panel {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    gap: 14px;
    padding: 18px;
    overflow: hidden;
}

.program-live-head,
.program-live-list-head,
.program-live-track-main,
.program-live-refresh-note {
    display: flex;
    align-items: center;
}

.program-live-head {
    justify-content: space-between;
    gap: 16px;
}

.program-live-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: #fff;
    font-size: 20px;
}

.program-live-head p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #9daccc;
    font-size: 13px;
    font-weight: 700;
}

.program-live-head p span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    color: #aebcff;
    background: rgba(142, 162, 255, .12);
    font-size: 12px;
    font-weight: 900;
}

.program-live-head button {
    width: 38px;
    padding: 0;
    background: #0e1020;
    border: 1px solid rgba(142, 162, 255, .22);
}

.program-live-now {
    position: relative;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 168px;
    gap: 16px;
    align-items: center;
    min-height: 104px;
    padding: 16px 16px 24px;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, #17264a, #285583);
}

.program-live-now > img {
    width: 64px;
    height: 64px;
    border-radius: 7px;
    object-fit: cover;
    background: #0e1020;
}

.program-live-now span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #c4cdec;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.program-live-now h3,
.program-live-now p {
    margin: 0;
}

.program-live-now h3 {
    color: #fff;
    font-size: 20px;
}

.program-live-now p {
    margin-top: 4px;
    color: #d7def7;
    font-size: 14px;
}

.program-live-now-time {
    display: grid;
    justify-items: end;
    gap: 4px;
    align-self: center;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 8px;
    color: #d7def7;
    background: rgba(5, 8, 20, .24);
    font-weight: 800;
}

.program-live-now-time strong {
    color: #fff;
    font-size: 16px;
    line-height: 1.1;
    white-space: nowrap;
}

.program-live-now-time small {
    color: #c4cdec;
    font-size: 12px;
    text-transform: uppercase;
}

.program-live-now-time em {
    color: #aebade;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.program-live-progress {
    position: absolute;
    right: 16px;
    bottom: 10px;
    left: 16px;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}

.program-live-progress span {
    display: block;
    height: 100%;
    background: #7ea6ff;
    border-radius: inherit;
}

.program-live-list-head {
    justify-content: space-between;
    gap: 14px;
    color: #aebade;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.program-live-list-head span {
    min-height: 26px;
    padding: 4px 11px;
    border-radius: 999px;
    color: #cdd6ff;
    background: rgba(255, 255, 255, .06);
    letter-spacing: 0;
    text-transform: none;
}

.program-live-list {
    height: 100%;
    max-height: none;
    min-height: 0;
    padding-bottom: 12px;
    overflow: auto;
    border-radius: 8px;
    background: #10162d;
    scroll-padding-bottom: 18px;
    scrollbar-color: #4c587a transparent;
    scrollbar-width: thin;
}

.program-live-list::-webkit-scrollbar {
    width: 7px;
}

.program-live-list::-webkit-scrollbar-track {
    background: transparent;
}

.program-live-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #4c587a;
}

.program-live-section {
    position: static;
    padding: 8px 16px;
    color: #9daccc;
    background: #171d34;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.program-live-section.is-current-label {
    color: #ffd36d;
    background: rgba(255, 211, 109, .14);
}

.program-live-section.is-next-label {
    color: #77d09b;
    background: rgba(119, 208, 155, .13);
}

.program-live-track {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 66px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(158, 174, 212, .08);
    color: #d7def7;
}

.program-live-track.is-played {
    opacity: .62;
}

.program-live-track.is-current {
    background: rgba(255, 211, 109, .09);
    box-shadow: inset 3px 0 0 #ffd36d;
}

.program-live-track.is-next {
    box-shadow: inset 3px 0 0 #30c77d;
}

.program-live-track-main {
    min-width: 0;
    gap: 11px;
}

.program-live-track-main img {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 7px;
    object-fit: cover;
    background: #0e1020;
}

.program-live-track-main div {
    min-width: 0;
}

.program-live-track-main strong,
.program-live-track-main small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.program-live-track-main strong {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.program-live-track-main strong span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 21px;
    margin-right: 8px;
    padding: 0 9px;
    border-radius: 999px;
    color: #fff;
    background: var(--blue);
    font-size: 11px;
    vertical-align: 1px;
}

.program-live-track-main small {
    margin-top: 3px;
    color: #9daccc;
    font-size: 13px;
    font-weight: 700;
}

.program-live-offset {
    display: inline-flex;
    justify-content: center;
    min-width: 76px;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 6px;
    color: #afc1ff;
    background: rgba(142, 162, 255, .13);
    font-size: 12px;
    font-weight: 900;
}

.program-live-duration {
    color: #aebade;
    font-size: 13px;
    font-weight: 800;
}

.program-live-refresh-note {
    justify-content: center;
    gap: 7px;
    color: #8ea2ff;
    font-size: 13px;
    font-weight: 700;
}

[data-program-live-content].is-loading {
    opacity: .72;
    pointer-events: none;
}

.program-outline-danger {
    color: #ff8fa2;
    border: 1px solid rgba(255, 91, 118, .36);
    background: rgba(255, 91, 118, .08);
}

.program-modal-dialog {
    width: min(800px, calc(100vw - 28px));
}

.program-modal-body {
    gap: 16px;
}

.program-days-picker,
.program-color-picker {
    display: grid;
    gap: 8px;
}

.program-days-picker > span,
.program-color-picker > span {
    color: #9daccc;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.program-days-picker div,
.program-color-picker div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.program-days-picker button {
    min-height: 30px;
    padding: 0 11px;
    border: 0;
    border-radius: 6px;
    color: #aebade;
    background: rgba(255, 255, 255, .08);
    font-size: 12px;
    font-weight: 800;
}

.program-days-picker button.active {
    color: #fff;
    background: var(--blue);
}

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

.program-time-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) 54px;
    overflow: hidden;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 7px;
    background: #0e1020;
}

.program-time-inputs input {
    min-height: 42px;
    width: 100%;
    border: 0;
    color: #fff;
    background: transparent;
    padding: 0 12px;
    outline: 0;
}

.program-time-inputs em {
    display: grid;
    place-items: center;
    color: #c4cdec;
    background: rgba(255, 255, 255, .04);
    font-style: normal;
    font-weight: 800;
}

.program-duration-preview {
    margin: -6px 0 0;
    color: #9daccc;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
}

.program-duration-preview.is-invalid {
    color: #ff8fa2;
}

.program-color-picker button {
    width: 32px;
    height: 32px;
    border: 3px solid transparent;
    border-radius: 50%;
    background: var(--swatch);
}

.program-color-picker button.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(142, 162, 255, .45);
}

.program-takeover-field {
    padding: 14px;
    border-radius: 8px;
    background: #0e1020;
}

.program-modal-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

@media (max-width: 860px) {
    .program-workspace {
        height: auto;
        overflow-y: auto;
    }

    .program-page-head,
    .program-radio-line,
    .program-head-actions,
    .program-tabs,
    .program-board-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .program-time-grid,
    .program-modal-actions {
        grid-template-columns: 1fr;
    }

    .program-modal-actions span {
        display: none;
    }

    .program-live-panel {
        height: auto;
        padding: 12px;
        overflow: visible;
    }

    .program-live-now {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .program-live-now > img {
        width: 54px;
        height: 54px;
    }

    .program-live-now-time {
        justify-items: start;
        grid-column: 1 / -1;
        width: 100%;
    }

    .program-live-list {
        max-height: 60vh;
        min-height: 280px;
    }

    .program-live-track {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .program-live-duration {
        padding-left: 53px;
    }
}

/* Settings */
.settings-workspace {
    padding-bottom: 24px;
}

.settings-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.settings-add-radio,
.settings-primary-btn,
.settings-secondary-btn,
.settings-danger-btn,
.settings-danger-zone button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

.settings-add-radio,
.settings-primary-btn {
    padding: 0 18px;
    background: #312aee;
}

.settings-secondary-btn {
    padding: 0 18px;
    background: rgba(255, 255, 255, .08);
}

.settings-danger-btn,
.settings-danger-zone button {
    padding: 0 18px;
    background: #e83f67;
}

.settings-add-radio:hover,
.settings-primary-btn:hover,
.settings-secondary-btn:hover,
.settings-danger-btn:hover,
.settings-danger-zone button:hover {
    opacity: .92;
    transform: translateY(-1px);
}

.settings-add-radio.is-loading,
.settings-primary-btn.is-loading,
.settings-secondary-btn.is-loading,
.settings-danger-btn.is-loading,
.settings-danger-zone button.is-loading,
.settings-radio-form button:disabled,
.settings-audio-form button:disabled,
.settings-modal-actions button:disabled {
    cursor: wait;
    opacity: .65;
    transform: none;
}

.settings-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    margin-top: 18px;
}

.settings-nav-card,
.settings-panel,
.settings-radio-card {
    border-radius: 8px;
    background: #111936;
}

.settings-nav-card {
    align-self: start;
    display: grid;
    gap: 4px;
    padding: 12px;
}

.settings-nav-card button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    width: 100%;
    border: 0;
    border-radius: 7px;
    padding: 0 14px;
    color: #c4d1f2;
    background: transparent;
    text-align: left;
    font-weight: 800;
}

.settings-nav-card button.active,
.settings-nav-card button:hover {
    color: #fff;
    background: rgba(49, 42, 238, .22);
}

.settings-panel {
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.settings-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-bottom: 1px solid rgba(158, 174, 212, .14);
}

.settings-panel-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 900;
}

.settings-panel-head p {
    margin: 6px 0 0;
    color: #b8c8f6;
    font-size: 14px;
    line-height: 1.45;
}

.settings-panel-head > span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border-radius: 999px;
    padding: 0 12px;
    color: #aebdff;
    background: rgba(49, 42, 238, .22);
    font-weight: 900;
    white-space: nowrap;
}

.settings-radio-list {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.settings-radio-card {
    padding: 18px;
    background: #121c3b;
}

.settings-radio-card-head,
.settings-radio-identity,
.settings-tabs-inline,
.settings-danger-zone {
    display: flex;
    align-items: center;
}

.settings-radio-card-head {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.settings-radio-identity {
    min-width: 0;
    gap: 12px;
}

.settings-radio-identity img {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    object-fit: cover;
    background: #0e1020;
}

.settings-radio-identity div {
    min-width: 0;
}

.settings-radio-identity strong {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.settings-radio-identity span {
    display: block;
    overflow: hidden;
    color: #9eb4e8;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-radio-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 10px;
    color: #aebade;
    background: rgba(255, 255, 255, .08);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.settings-radio-status.is-active {
    color: #071323;
    background: #74e0aa;
}

.settings-tabs-inline {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.settings-tabs-inline button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    padding: 0 12px;
    color: #aebade;
    background: rgba(255, 255, 255, .06);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.settings-tabs-inline button.active {
    color: #fff;
    background: #312aee;
}

.settings-tab-panel[hidden] {
    display: none;
}

.settings-radio-form,
.settings-audio-form {
    display: grid;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    border-radius: 8px;
    background: #0e1020;
}

.settings-radio-form {
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: start;
}

.settings-logo-picker {
    position: relative;
    display: grid;
    gap: 10px;
    justify-items: center;
    border: 1px dashed rgba(158, 174, 212, .28);
    border-radius: 8px;
    padding: 16px;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.settings-logo-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.settings-logo-picker span {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    /* background: #171254; */
}

.settings-logo-picker img {
    width: 82px;
    height: 82px;
    border-radius: 10px;
    object-fit: cover;
}

.settings-logo-picker strong {
    font-size: 14px;
    font-weight: 900;
}

.settings-logo-picker small,
.settings-form-grid small {
    color: #9eb4e8;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    align-content: start;
    gap: 16px;
}

.settings-radio-form .settings-form-grid {
    align-self: start;
}

.settings-radio-form .settings-primary-btn {
    grid-column: 1 / -1;
}

.settings-form-grid label {
    display: grid;
    align-content: start;
    gap: 8px;
}

.settings-form-grid label > span {
    color: #fff;
    font-weight: 900;
}

.settings-form-grid input,
.settings-form-grid select {
    width: 100%;
    height: 44px;
    min-height: 0;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 7px;
    padding: 0 12px;
    color: #fff;
    background: #0b0c19;
    outline: 0;
    font-weight: 700;
}

.settings-form-grid input:focus,
.settings-form-grid select:focus {
    border-color: #8ea2ff;
    box-shadow: 0 0 0 3px rgba(49, 42, 238, .18);
}

.settings-input-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    align-items: stretch;
    max-width: 320px;
}

.settings-input-unit input {
    border-radius: 7px 0 0 7px;
}

.settings-input-unit em {
    display: grid;
    place-items: center;
    border: 1px solid rgba(158, 174, 212, .22);
    border-left: 0;
    border-radius: 0 7px 7px 0;
    color: #c7d3f2;
    background: rgba(255, 255, 255, .04);
    font-style: normal;
    font-weight: 900;
}

.settings-audio-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 8px;
    padding: 12px;
    color: #c4d1f2;
    background: rgba(49, 42, 238, .18);
    font-weight: 700;
}

.settings-audio-form .settings-primary-btn {
    justify-self: end;
}

.settings-danger-zone {
    justify-content: space-between;
    gap: 18px;
    margin-top: 16px;
    border-radius: 8px;
    padding: 16px;
    background: rgba(232, 63, 103, .09);
}

.settings-danger-zone strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 900;
}

.settings-danger-zone p {
    margin: 5px 0 0;
    color: #c4d1f2;
    line-height: 1.45;
}

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

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

.settings-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 22px;
}

.settings-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(4, 6, 18, .72);
    backdrop-filter: blur(8px);
}

.settings-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100vw - 28px));
    max-height: calc(100dvh - 44px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(158, 174, 212, .22);
    border-radius: 10px;
    color: #fff;
    background: #111936;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .42);
}

.settings-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid rgba(158, 174, 212, .16);
}

.settings-modal-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
    font-weight: 900;
}

.settings-modal-head p {
    margin: 5px 0 0;
    color: #aebade;
    line-height: 1.4;
}

.settings-modal-head > button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 7px;
    color: #aebade;
    background: transparent;
}

.settings-modal-head > button:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.settings-modal-body {
    display: grid;
    gap: 18px;
    padding: 20px;
    overflow-y: auto;
}

.settings-delete-warning {
    margin: 0;
    border-radius: 8px;
    padding: 14px;
    color: #f4d3db;
    background: rgba(232, 63, 103, .12);
    line-height: 1.5;
}

.settings-delete-warning strong {
    color: #fff;
}

.settings-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

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

    .settings-nav-card {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .settings-nav-card button {
        justify-content: center;
        min-height: 42px;
        padding: 0 10px;
    }
}

@media (max-width: 760px) {
    .settings-page-head,
    .settings-panel-head,
    .settings-radio-card-head,
    .settings-danger-zone {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-add-radio,
    .settings-danger-zone button,
    .settings-primary-btn {
        width: 100%;
    }

    .settings-nav-card {
        grid-template-columns: 1fr;
    }

    .settings-radio-form,
    .settings-form-grid {
        grid-template-columns: 1fr;
    }

    .settings-audio-form .settings-primary-btn {
        justify-self: stretch;
    }

    .settings-modal-actions {
        flex-direction: column-reverse;
    }

    .settings-modal-actions button {
        width: 100%;
    }
}

.emissions-workspace {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    gap: 18px;
}

.emissions-workspace .manager-footer {
    margin-top: auto;
}

.emissions-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.emission-main-btn,
.emission-card-actions button,
.emission-replay-item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}

.emission-main-btn {
    min-height: 42px;
    padding: 0 18px;
    background: var(--blue);
}

.emission-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.emission-stats article {
    display: grid;
    gap: 5px;
    padding: 18px;
    border-radius: 7px;
    background: #111936;
}

.emission-stats span,
.emission-card-meta,
.emission-replay-head p,
.emission-form-help,
.emission-replay-item span,
.emission-empty span,
.emission-replay-empty span {
    color: #9fb2e6;
}

.emission-stats strong {
    color: #fff;
    font-size: 22px;
    font-weight: 900;
}

.emission-stats small {
    color: #7f8fbf;
    font-weight: 700;
}

.emission-board-card {
    display: grid;
    gap: 18px;
    padding: 18px;
    border-radius: 7px;
    background: #111936;
}

.emission-board-head,
.emission-replay-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.emission-board-head h2,
.emission-replay-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.emission-board-head p,
.emission-replay-head p {
    margin: 5px 0 0;
    color: #9fb2e6;
}

.emission-board-head > span,
.emission-replay-head > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #cbd6ff;
    background: #171254;
    font-weight: 900;
}

.emission-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, .75fr);
    gap: 16px;
    min-height: 0;
}

.emission-list,
.emission-replay-list {
    display: grid;
    gap: 10px;
    min-height: 0;
}

.emission-list {
    align-content: start;
}

.emission-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    align-self: start;
    gap: 14px;
    min-height: 94px;
    padding: 14px;
    border-radius: 7px;
    background: #171f3c;
}

.emission-card.is-selected {
    background: #1d2450;
    box-shadow: inset 3px 0 0 var(--blue);
}

.emission-card > img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    background: #0e1020;
}

.emission-card-body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.emission-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.emission-card-title strong,
.emission-replay-item strong,
.emission-empty strong,
.emission-replay-empty strong {
    color: #fff;
    font-weight: 900;
}

.emission-card-title span {
    flex-shrink: 0;
    padding: 5px 9px;
    border-radius: 999px;
    color: #cbd6ff;
    background: rgba(142, 162, 255, .12);
    font-size: 12px;
    font-weight: 900;
}

.emission-card p {
    margin: 0;
    color: #c4cdec;
}

.emission-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12px;
    font-weight: 800;
}

.emission-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.emission-card-actions button,
.emission-replay-item a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(142, 162, 255, .24);
    background: #0e1020;
}

.emission-card-actions button:hover,
.emission-replay-item a:hover {
    border-color: rgba(142, 162, 255, .55);
    background: var(--blue);
}

.emission-replay-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    min-height: 420px;
    padding: 16px;
    border-radius: 7px;
    background: #0f142b;
}

.emission-replay-list {
    max-height: 560px;
    overflow: auto;
    padding-right: 4px;
}

.emission-replay-list::-webkit-scrollbar {
    width: 8px;
}

.emission-replay-list::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: #546084;
}

.emission-replay-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 7px;
    background: #171f3c;
}

.emission-replay-item audio {
    width: 100%;
    height: 36px;
}

.emission-empty,
.emission-replay-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 260px;
    padding: 24px;
    border-radius: 7px;
    text-align: center;
    background: #0f142b;
}

.emission-empty i,
.emission-replay-empty i {
    color: #8ea2ff;
    font-size: 34px;
}

.emission-modal-dialog {
    width: min(860px, calc(100vw - 28px));
}

.emission-modal-body {
    max-height: min(680px, calc(100vh - 190px));
}

.emission-form-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.emission-icon-drop {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 16px;
    border: 1px dashed rgba(158, 174, 212, .34);
    border-radius: 10px;
    overflow: hidden;
    color: #cbd6ff;
    text-align: center;
    background: #0e1020;
    cursor: pointer;
}

.emission-icon-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.emission-icon-drop img {
    width: 104px;
    height: 104px;
    margin-bottom: 14px;
    border-radius: 12px;
    object-fit: cover;
}

.emission-icon-drop span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 900;
}

.emission-icon-drop small {
    display: block;
    margin-top: 8px;
    color: #9fb2e6;
    font-weight: 700;
}

.emission-form-fields {
    display: grid;
    gap: 14px;
}

.emission-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.emission-form-help {
    margin: -4px 0 0;
    line-height: 1.5;
}

.emission-form-help code {
    color: #cbd6ff;
}

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

    .emission-replay-panel {
        min-height: 320px;
    }
}

@media (max-width: 760px) {
    .emissions-page-head,
    .emission-board-head,
    .emission-replay-head,
    .emission-card-title {
        flex-direction: column;
        align-items: stretch;
    }

    .emission-stats,
    .emission-form-grid,
    .emission-time-grid,
    .emission-replay-item {
        grid-template-columns: 1fr;
    }

    .emission-card {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 0;
    }

    .emission-card > img {
        width: 54px;
        height: 54px;
    }

    .emission-card-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* ===== Replays — cartes propres ===== */
.emission-replay-list { display: grid; gap: 12px; align-content: start; }
.emission-replay-item {
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px; border-radius: 14px;
    background: linear-gradient(160deg, #151d3a, #10152b);
    border: 1px solid rgba(142, 162, 255, .14);
    transition: border-color .16s ease, transform .16s ease;
}
.emission-replay-item:hover { border-color: rgba(142, 162, 255, .34); transform: translateY(-1px); }
.emission-replay-item .replay-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 42px;
    align-items: center; gap: 12px;
}
.emission-replay-item .replay-ico {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    color: #fff; font-size: 21px;
    background: linear-gradient(160deg, #5b63f5, #3b41e0);
    box-shadow: 0 6px 16px rgba(79, 70, 229, .4);
}
.emission-replay-item .replay-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.emission-replay-item .replay-info strong {
    color: #fff; font-weight: 800; font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emission-replay-item .replay-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.emission-replay-item .replay-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 700; color: #aab4dc;
    background: rgba(142, 162, 255, .1); border: 1px solid rgba(142, 162, 255, .16);
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.emission-replay-item .replay-tag i { font-size: 13px; color: #8f96ff; }
.emission-replay-item .replay-dl {
    width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
    color: #fff; text-decoration: none; font-size: 18px;
    background: #0e1020; border: 1px solid rgba(142, 162, 255, .24);
    transition: background .16s ease, border-color .16s ease;
}
.emission-replay-item .replay-dl:hover { background: var(--blue); border-color: var(--blue); }
.emission-replay-item .replay-audio {
    width: 100%; height: 40px; border-radius: 10px;
    background: #0e1020;
}

/* ===== Regie Pub ===== */
.ads-workspace {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
}

.ads-workspace .manager-footer {
    margin-top: auto;
}

.ads-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.ads-main-btn,
.ads-icon-btn,
.ads-campaign-actions button,
.ads-file-cell button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #fff;
    font-weight: 800;
}

.ads-main-btn {
    min-height: 44px;
    gap: 9px;
    padding: 0 18px;
    border-radius: 7px;
    background: var(--blue);
    box-shadow: 0 12px 28px rgba(37, 27, 215, .22);
}

.ads-main-btn:hover,
.ads-campaign-actions button:hover,
.ads-icon-btn:hover,
.ads-file-cell button:hover {
    filter: brightness(1.08);
}

.ads-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.ads-stats article,
.ads-board-card,
.ads-campaign-card,
.ads-break-card,
.ads-upload-file {
    background: #111832;
}

.ads-stats article {
    padding: 18px;
    border-radius: 7px;
}

.ads-stats span,
.ads-stats small,
.ads-board-head p,
.ads-files-toolbar span,
.ads-campaign-main p,
.ads-campaign-meta,
.ads-campaign-progress small,
.ads-upload-zone span {
    color: #9fb2e6;
}

.ads-stats span,
.ads-campaign-progress span,
.ads-table th,
.ads-modal-body .media-modal-field > span {
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 12px;
    font-weight: 800;
}

.ads-stats strong {
    display: block;
    margin: 8px 0 4px;
    color: #fff;
    font-size: 26px;
    line-height: 1;
}

.ads-board-card {
    min-height: 0;
    padding: 18px;
    border-radius: 7px;
}

.ads-board-head,
.ads-files-toolbar,
.ads-campaign-card,
.ads-campaign-actions,
.ads-file-cell,
.ads-break-card > div {
    display: flex;
    align-items: center;
}

.ads-board-head,
.ads-files-toolbar {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.ads-board-head h2 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.ads-board-head p,
.ads-files-toolbar span {
    margin: 0;
    line-height: 1.45;
}

.ads-board-head > span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #b9c7ff;
    background: #171254;
    font-weight: 800;
}

.ads-tabs {
    display: flex;
    gap: 9px;
    margin-bottom: 16px;
    overflow-x: auto;
}

.ads-tabs button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    color: #aeb9dc;
    background: #1a213d;
    font-weight: 800;
}

.ads-tabs button.active {
    color: #fff;
    background: var(--blue);
}

.ads-panel {
    display: none;
}

.ads-panel.active {
    display: block;
}

.ads-campaign-list,
.ads-break-list {
    display: grid;
    gap: 12px;
}

.ads-campaign-card {
    justify-content: space-between;
    gap: 18px;
    padding: 15px;
    border-radius: 7px;
}

.ads-campaign-main {
    min-width: 0;
    flex: 1 1 auto;
}

.ads-campaign-main h3 {
    margin: 8px 0 3px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.ads-campaign-main p {
    margin: 0 0 12px;
    font-weight: 700;
}

.ads-campaign-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
}

.ads-campaign-progress {
    flex: 0 0 245px;
}

.ads-campaign-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #fff;
}

.ads-campaign-progress strong {
    color: #fff;
}

.ads-progress {
    height: 8px;
    margin: 9px 0 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #0e1020;
}

.ads-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2d24f0, #78e6c2);
}

.ads-campaign-actions {
    flex: 0 0 auto;
    gap: 7px;
}

.ads-campaign-actions button,
.ads-icon-btn,
.ads-file-cell button {
    width: 38px;
    height: 38px;
    border-radius: 7px;
    border: 1px solid rgba(142, 162, 255, .24);
    background: #0e1020;
}

.ads-campaign-actions button:last-child,
.ads-icon-btn {
    color: #ff7f9f;
}

.ads-status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    color: #cbd6ff;
    background: #232b4a;
    font-size: 12px;
    font-weight: 900;
}

.ads-status-pill.is-active,
.ads-status-pill.is-played {
    color: #061126;
    background: #75e4a8;
}

.ads-status-pill.is-paused,
.ads-status-pill.is-skipped {
    color: #10152b;
    background: #ffd56d;
}

.ads-status-pill.is-finished,
.ads-status-pill.is-failed {
    color: #fff;
    background: #e83f6f;
}

.ads-table-wrap {
    overflow: auto;
    border-radius: 7px;
    background: #0e1020;
}

.ads-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    color: #dbe5ff;
}

.ads-table th,
.ads-table td {
    padding: 14px 13px;
    border-bottom: 1px solid rgba(142, 162, 255, .12);
    text-align: left;
    vertical-align: middle;
}

.ads-table th {
    color: #9fb6ff;
    background: #171d37;
}

.ads-table tr:last-child td {
    border-bottom: 0;
}

.ads-table-empty,
.ads-empty {
    color: #9fb2e6;
    text-align: center;
}

.ads-file-cell {
    gap: 12px;
    min-width: 0;
}

.ads-file-cell button {
    flex: 0 0 auto;
    color: #fff;
}

.ads-file-cell div {
    min-width: 0;
}

.ads-file-cell strong,
.ads-file-cell span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ads-file-cell strong {
    color: #fff;
}

.ads-file-cell span {
    margin-top: 3px;
    color: #9fb2e6;
    font-size: 12px;
}

.ads-break-card {
    padding: 14px;
    border-radius: 7px;
}

.ads-break-card > div {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: #fff;
}

.ads-break-card ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ads-break-card li {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 60px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    color: #dbe5ff;
    background: #0e1020;
}

.ads-break-card li span,
.ads-break-card li small {
    color: #9fb6ff;
    font-size: 12px;
    font-weight: 900;
}

.ads-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 220px;
    padding: 28px;
    border-radius: 7px;
    background: #0e1020;
}

.ads-empty i {
    color: #6d7cff;
    font-size: 38px;
}

.ads-empty strong {
    color: #fff;
    font-size: 18px;
}

.ads-modal-dialog {
    max-width: 660px;
}

.ads-modal-body {
    max-height: min(68vh, 680px);
}

.ads-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ads-form-grid .media-modal-field:last-child {
    grid-column: span 2;
}

.ads-upload-zone {
    position: relative;
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 150px;
    padding: 22px;
    border: 1px dashed rgba(159, 178, 230, .55);
    border-radius: 8px;
    color: #dbe5ff;
    text-align: center;
    background: #0e1020;
}

.ads-upload-zone input {
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
}

.ads-upload-zone i {
    color: #94a6ff;
    font-size: 38px;
}

.ads-upload-files {
    display: grid;
    gap: 7px;
}

.ads-upload-file {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border-radius: 6px;
    color: #dbe5ff;
}

.ads-upload-file span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ads-upload-file strong {
    flex: 0 0 auto;
    color: #9fb6ff;
}

@media (max-width: 1180px) {
    .ads-stats,
    .ads-campaign-card {
        grid-template-columns: 1fr;
    }

    .ads-campaign-card {
        display: grid;
    }

    .ads-campaign-progress,
    .ads-campaign-actions {
        width: 100%;
        flex-basis: auto;
    }

    .ads-campaign-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 760px) {
    .ads-page-head,
    .ads-board-head,
    .ads-files-toolbar,
    .ads-break-card > div {
        align-items: stretch;
        flex-direction: column;
    }

    .ads-main-btn {
        width: 100%;
    }

    .ads-stats,
    .ads-form-grid {
        grid-template-columns: 1fr;
    }

    .ads-form-grid .media-modal-field:last-child {
        grid-column: auto;
    }

    .ads-board-card {
        padding: 14px;
    }
}

/* ===== Regie Pub V2 ===== */
.ads-workspace {
    padding-bottom: 18px;
}

.ads-workspace .manager-footer {
    position: static;
    z-index: 1;
    flex: 0 0 auto;
    margin-top: 24px;
}

.ads-dressing-card {
    padding: 18px;
    border-radius: 8px;
    background: #111832;
}

.ads-jingle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ads-jingle-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 14px;
    border-radius: 8px;
    background: #0e1020;
}

.ads-jingle-card > div {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.ads-jingle-card > .ads-jingle-actions {
    display: grid;
    align-items: stretch;
    gap: 8px;
}

.ads-jingle-card > div > i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: #fff;
    background: var(--blue);
}

.ads-jingle-card strong,
.ads-jingle-card span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ads-jingle-card strong {
    color: #fff;
    font-weight: 900;
}

.ads-jingle-card span {
    margin-top: 3px;
    color: #9fb2e6;
    font-size: 12px;
    font-weight: 700;
}

.ads-jingle-actions {
    display: grid;
    gap: 8px;
    width: min(100%, 430px);
    min-width: 320px;
}

.ads-jingle-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(142, 162, 255, .24);
    border-radius: 7px;
    color: #fff;
    background: #171254;
    cursor: pointer;
    font-weight: 900;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.ads-jingle-picker-btn:hover {
    border-color: rgba(142, 162, 255, .48);
    background: #211a78;
    transform: translateY(-1px);
}

.ads-jingle-current-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.ads-jingle-current-actions button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 7px;
    color: #ff7f9f;
    background: #171d37;
    cursor: pointer;
}

.ads-jingle-actions [data-ads-audio-play] {
    color: #fff;
}

.ads-jingle-actions button.is-playing,
.ads-preview-break-btn.is-playing,
.ads-plan-actions button.is-playing {
    color: #fff;
    background: var(--blue);
}

.ads-jingle-library-dialog {
    width: min(520px, calc(100vw - 28px));
}

.ads-jingle-library-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(109, 124, 255, .78);
    border-radius: 7px;
    color: #9fb6ff;
    background: #0e1020;
}

.ads-jingle-library-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font: inherit;
    font-weight: 700;
}

.ads-jingle-library-search input::placeholder {
    color: rgba(185, 199, 255, .64);
}

.ads-jingle-library-list {
    display: grid;
    gap: 6px;
    max-height: min(56vh, 520px);
    margin-top: 12px;
    padding-right: 4px;
    overflow: auto;
}

.ads-jingle-library-list::-webkit-scrollbar {
    width: 7px;
}

.ads-jingle-library-list::-webkit-scrollbar-track {
    background: transparent;
}

.ads-jingle-library-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(142, 162, 255, .36);
}

.ads-jingle-library-option {
    display: block;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid rgba(142, 162, 255, .14);
    border-radius: 8px;
    color: #fff;
    background: #121936;
    cursor: pointer;
    text-align: left;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.ads-jingle-library-option:hover {
    border-color: rgba(109, 124, 255, .58);
    background: #1a2350;
    transform: translateY(-1px);
}

.ads-jingle-library-option strong,
.ads-jingle-library-option span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ads-jingle-library-option strong {
    font-weight: 900;
}

.ads-jingle-library-option span {
    margin-top: 4px;
    color: #9fb6ff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.ads-jingle-library-option[hidden] {
    display: none;
}

.ads-jingle-library-option.is-loading {
    opacity: .65;
    pointer-events: none;
}

.ads-board-card {
    overflow: visible;
}

.ads-planning-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.ads-planning-head h2 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.ads-planning-head p {
    margin: 0;
    color: #9fb2e6;
    font-weight: 600;
    line-height: 1.45;
}

.ads-planning-grid-wrap {
    max-height: min(72vh, 760px);
    overflow: auto;
    border-radius: 8px;
    background: #0c1024;
    scrollbar-color: #445071 transparent;
    scrollbar-width: thin;
}

.ads-planning-grid {
    display: grid;
    grid-template-columns: 78px repeat(var(--ads-days), minmax(190px, 1fr));
    min-width: 1380px;
    color: #dbe5ff;
}

.ads-plan-corner,
.ads-plan-day,
.ads-plan-hour,
.ads-plan-slot {
    border-right: 1px solid rgba(142, 162, 255, .12);
    border-bottom: 1px solid rgba(142, 162, 255, .12);
}

.ads-plan-corner,
.ads-plan-day {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 58px;
    background: #171d37;
}

.ads-plan-corner {
    left: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    color: #9fb6ff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.ads-plan-day {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
}

.ads-plan-day strong {
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.ads-plan-day span {
    color: #9fb6ff;
    font-size: 12px;
    font-weight: 800;
}

.ads-plan-hour {
    position: sticky;
    left: 0;
    z-index: 1;
    display: grid;
    place-items: start center;
    padding-top: 13px;
    height: 128px;
    min-height: 96px;
    color: #fff;
    background: #111832;
    font-size: 13px;
    font-weight: 900;
}

.ads-plan-slot {
    position: relative;
    display: grid;
    align-content: start;
    gap: 7px;
    height: 128px;
    min-height: 96px;
    max-height: 128px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 9px;
    background: #111832;
    scrollbar-color: #445071 transparent;
    scrollbar-width: thin;
}

.ads-plan-slot::-webkit-scrollbar {
    width: 6px;
}

.ads-plan-slot::-webkit-scrollbar-track {
    background: transparent;
}

.ads-plan-slot::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(142, 162, 255, .36);
}

.ads-slot-add {
    display: inline-grid;
    place-items: center;
    width: 100%;
    min-height: 26px;
    border: 1px dashed rgba(159, 178, 230, .25);
    border-radius: 7px;
    color: #8194cc;
    background: rgba(255, 255, 255, .02);
}

.ads-slot-add:hover {
    color: #fff;
    border-color: rgba(109, 124, 255, .55);
    background: rgba(37, 27, 215, .18);
}

.ads-plan-break {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 58px;
    padding: 8px 62px 8px 10px;
    border-left: 3px solid #75e4a8;
    border-radius: 7px;
    background: #1b2444;
    box-shadow: inset 0 0 0 1px rgba(142, 162, 255, .08);
}

.ads-plan-break.is-skipped {
    border-left-color: #ffd56d;
    background: #2c2940;
}

.ads-plan-break.is-played {
    opacity: .72;
}

.ads-plan-break > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ads-plan-break strong {
    color: #fff;
    font-size: 12px;
}

.ads-plan-break span,
.ads-plan-break small {
    color: #b8c7ff;
    font-size: 11px;
    font-weight: 800;
}

.ads-plan-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ads-plan-actions button {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    color: #dbe5ff;
    background: rgba(14, 16, 32, .86);
}

.ads-plan-actions button:hover {
    color: #fff;
    background: rgba(45, 36, 240, .85);
}

.ads-break-dialog {
    max-width: 760px;
}

.ads-switch-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: #fff;
    font-weight: 900;
}

.ads-switch-line input {
    position: absolute;
    opacity: 0;
}

.ads-switch-line span {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #2a304a;
    box-shadow: inset 0 0 0 1px rgba(142, 162, 255, .22);
}

.ads-switch-line span::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #9fb2e6;
    transition: transform .18s ease, background .18s ease;
}

.ads-switch-line input:checked + span {
    background: var(--blue);
}

.ads-switch-line input:checked + span::before {
    transform: translateX(20px);
    background: #fff;
}

.ads-break-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 8px;
    color: #cbd6ff;
    background: #171254;
    font-weight: 900;
}

.ads-break-chain span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.ads-preview-break-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 42px;
    margin: -2px 0 14px;
    border: 1px solid rgba(142, 162, 255, .22);
    border-radius: 8px;
    color: #fff;
    background: #171254;
    font-weight: 900;
}

.ads-preview-break-btn:hover {
    background: #211a78;
}

.ads-spot-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 310px;
    overflow: auto;
    padding-right: 4px;
}

.ads-spot-picker.is-disabled {
    opacity: .48;
}

.ads-spot-choice {
    display: grid;
    grid-template-columns: auto 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    background: #0e1020;
    cursor: pointer;
}

.ads-spot-choice input {
    width: 18px;
    height: 18px;
    accent-color: #2d24f0;
}

.ads-spot-choice > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    color: #fff;
    background: #1b2350;
}

.ads-spot-choice strong,
.ads-spot-choice em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ads-spot-choice strong {
    color: #fff;
    font-style: normal;
    font-weight: 900;
}

.ads-spot-choice em {
    margin-top: 3px;
    color: #9fb2e6;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.ads-info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    border-radius: 8px;
    color: #cbd6ff;
    background: #171254;
    line-height: 1.45;
}

.ads-empty.compact {
    grid-column: 1 / -1;
    min-height: 130px;
}

@media (max-width: 1100px) {
    .ads-jingle-grid,
    .ads-spot-picker {
        grid-template-columns: 1fr;
    }

    .ads-jingle-card {
        grid-template-columns: 1fr;
    }

    .ads-jingle-actions {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .ads-planning-head,
    .ads-jingle-card {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .ads-planning-grid-wrap {
        max-height: 620px;
    }

    .ads-jingle-actions form {
        grid-template-columns: 1fr repeat(2, 38px);
    }
}