:root {
    --dj-bg: #0d0d12;
    --dj-surface: #16161f;
    --dj-surface-2: #1e1e2a;
    --dj-border: #2a2a3a;
    --dj-text: #f0f0f5;
    --dj-muted: #8888a0;
    --dj-logo-brand: #7b7563;
    --dj-accent: #ff6b9d;
    --dj-accent-2: #c44dff;
    --dj-success: #4ade80;
    --dj-danger: #f87171;
    --dj-radius: 12px;
    --dj-font: 'Segoe UI', system-ui, sans-serif;
}

body {
    margin: 0;
    background: var(--dj-bg);
    color: var(--dj-text);
    font-family: var(--dj-font);
    min-height: 100vh;
}

.dj-app {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
}

.dj-hidden {
    display: none !important;
}

.dj-topbar {
    margin-bottom: 1.25rem;
}

.dj-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--dj-surface) 0%, var(--dj-surface-2) 100%);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.dj-header {
    margin-bottom: 1.5rem;
}

.dj-search-bar {
    flex: 1 1 16rem;
    min-width: min(100%, 14rem);
    max-width: 26rem;
}

.dj-search {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 93%;
    padding: 0.5rem 1rem 0.5rem 0.85rem;
    background: var(--dj-bg);
    border: 1px solid var(--dj-border);
    border-radius: 999px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.dj-search:focus-within {
    border-color: rgba(255, 107, 157, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.12);
}

.dj-search__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    opacity: 0.55;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E")
        center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E")
        center / contain no-repeat;
    color: var(--dj-muted);
}

.dj-search:focus-within .dj-search__icon {
    opacity: 0.85;
    color: var(--dj-accent);
}

@media (max-width: 640px) {
    .dj-topbar__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .dj-search-bar {
        max-width: none;
    }
}

body.dj-search-modal-open {
    overflow: hidden;
}

.dj-search-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.dj-search-modal.dj-hidden {
    display: none;
}

.dj-search-modal__backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.72);
    cursor: pointer;
}

.dj-search-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: min(85vh, 720px);
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
    overflow: hidden;
}

.dj-search-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--dj-border);
    background: var(--dj-surface-2);
}

.dj-search-modal__header .dj-search {
    flex: 0 1 93%;
    min-width: 0;
}

.dj-search--modal {
    padding: 0.6rem 1.1rem 0.6rem 0.9rem;
    font-size: 1rem;
}

.dj-search--modal .dj-search__input {
    font-size: 1rem;
}

.dj-search-modal__close {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    background: transparent;
    color: var(--dj-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.dj-search-modal__close:hover {
    border-color: var(--dj-accent);
    color: var(--dj-accent);
}

.dj-search-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.dj-search-modal__body .dj-search__hit {
    padding: 0.85rem 1.15rem;
    font-size: 0.95rem;
}

.dj-search-modal__body .dj-search__hit-title {
    font-size: 1rem;
}

.dj-search-modal__body .dj-search__hit-row {
    padding: 0.35rem 0.75rem;
}

.dj-search-dropdown__intro,
.dj-search-dropdown__warn {
    margin: 0;
    padding: 0.6rem 0.85rem;
    font-size: 0.72rem;
    color: var(--dj-muted);
    border-bottom: 1px solid var(--dj-border);
}

.dj-search-dropdown__warn {
    color: #ffd9a0;
    background: rgba(255, 180, 80, 0.12);
}

.dj-search__form {
    margin: 0;
}

.dj-search__row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.dj-search__submit {
    flex-shrink: 0;
    white-space: nowrap;
}

.dj-search__status {
    flex-shrink: 0;
    align-self: center;
    font-size: 0.72rem;
    color: var(--dj-accent);
    padding: 0 0.35rem;
    white-space: nowrap;
}

.dj-search__status:not([hidden]) {
    animation: dj-pulse 1s ease-in-out infinite;
}

@keyframes dj-pulse {
    50% {
        opacity: 0.55;
    }
}

.dj-download-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}

.dj-download-overlay__card {
    width: min(360px, calc(100vw - 2rem));
    padding: 1.25rem 1.5rem;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.dj-download-overlay__label {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.dj-download-overlay__status {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--dj-muted);
    min-height: 1.1rem;
}

.dj-download-overlay__elapsed {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dj-accent-2);
}

.dj-download-overlay__cancel {
    margin-top: 1rem;
    width: 100%;
}

.dj-download-overlay__track {
    height: 8px;
    background: var(--dj-surface-2);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.dj-download-overlay__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--dj-accent), var(--dj-accent-2));
    border-radius: 999px;
    transition: width 0.25s ease-out;
}

.dj-download-overlay__bar--done {
    background: linear-gradient(90deg, var(--dj-success), #86efac);
}

.dj-download-overlay__bar--slow {
    animation: dj-download-pulse 1.2s ease-in-out infinite;
}

@keyframes dj-download-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.55;
    }
}

.dj-download-overlay__percent {
    font-size: 0.75rem;
    color: var(--dj-muted);
}

.dj-search--open .dj-search__results,
.dj-search__results {
    display: block;
}

.dj-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dj-search__input {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 0.15rem 0;
    border: none;
    background: transparent;
    color: var(--dj-text);
    font-size: 0.92rem;
    line-height: 1.4;
}

.dj-search__input::placeholder {
    color: var(--dj-muted);
}

.dj-search__input:focus {
    outline: none;
}

.dj-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.dj-search__results {
    margin-top: 0.5rem;
    min-height: 2.5rem;
    max-height: 280px;
    overflow-y: auto;
    background: var(--dj-surface-2);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    padding: 0.25rem 0;
}

.dj-search--open .dj-search__results {
    border-color: var(--dj-accent);
}

.dj-search__banner {
    padding: 0.65rem 0.85rem;
    font-size: 0.72rem;
    line-height: 1.45;
    background: rgba(255, 107, 157, 0.12);
    border-bottom: 1px solid var(--dj-border);
    color: #ffc8dd;
}

.dj-search__banner a {
    color: var(--dj-accent);
}

.dj-search__banner code {
    font-size: 0.68rem;
}

.dj-search__banner--warn {
    background: rgba(255, 180, 80, 0.15);
    color: #ffd9a0;
}

.dj-search__hit--catalog {
    opacity: 0.85;
}

.dj-search__hit {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.85rem;
    border: none;
    background: transparent;
    color: var(--dj-text);
    cursor: pointer;
    border-bottom: 1px solid var(--dj-border);
}

.dj-search__hit:hover {
    background: var(--dj-surface-2);
}

.dj-search__hit-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.dj-search__hit-title {
    font-weight: 600;
    font-size: 0.85rem;
}

.dj-search__badge {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    color: var(--dj-accent-2);
    flex-shrink: 0;
}

.dj-search__badge--jamendo {
    color: var(--dj-success);
    border-color: rgba(74, 222, 128, 0.35);
}

.dj-search__badge--spotify {
    color: #1ed760;
    border-color: rgba(30, 215, 96, 0.45);
}

.dj-search__badge--itunes {
    color: #fa5c5c;
    border-color: rgba(250, 92, 92, 0.4);
}

.dj-search__badge--ytm {
    color: #ff4e45;
    border-color: rgba(255, 78, 69, 0.45);
}

.dj-search__hit--ytm:hover {
    background: rgba(255, 78, 69, 0.08);
}

.dj-search__hit--spotify:hover {
    background: rgba(30, 215, 96, 0.12);
}

.dj-search-dropdown__intro {
    margin: 0;
    padding: 0.5rem 0.85rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dj-muted);
}

.dj-search__badge[data-category='arabisch'] {
    color: #7dd3fc;
    border-color: rgba(125, 211, 252, 0.35);
}

.dj-search__badge[data-category='amazigh'] {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.35);
}

.dj-search__badge[data-category='khaleeji'] {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.35);
}

.dj-search__badge[data-category='chaabi'] {
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.35);
}

.dj-search__badge[data-category='anasheed'] {
    color: #86efac;
    border-color: rgba(134, 239, 172, 0.35);
}

.dj-search__badge[data-category='mix'] {
    color: var(--dj-accent);
    border-color: rgba(255, 107, 157, 0.35);
}

.dj-search__badge[data-category='rai'] {
    color: #f472b6;
    border-color: rgba(244, 114, 182, 0.35);
}

.dj-search__hit-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--dj-muted);
    margin-top: 0.15rem;
}

.dj-search__empty {
    margin: 0;
    padding: 0.75rem;
    font-size: 0.75rem;
    color: var(--dj-muted);
}

.dj-search-panel {
    width: 100%;
    margin-top: 0.5rem;
    background: var(--dj-surface-2);
    border: 2px solid var(--dj-accent);
    border-radius: var(--dj-radius);
    max-height: min(55vh, 420px);
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.dj-search__hit-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--dj-border);
    padding-right: 0.5rem;
}

.dj-search__hit-row .dj-search__hit--static {
    flex: 1;
    min-width: 0;
    border-bottom: none;
}

.dj-search__hit-row .dj-btn--download,
.dj-search__hit-row .dj-search__download-btn,
.dj-search__hit-row .dj-search__play-btn,
.dj-search__hit-row .dj-search__hit-actions {
    flex-shrink: 0;
    white-space: nowrap;
}

.dj-search__hit-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.dj-search__status {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
    flex-shrink: 0;
}

.dj-search__status--ok {
    color: var(--dj-success);
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.35);
}

.dj-search__status--missing {
    color: var(--dj-muted);
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
}

.dj-search-panel__header {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--dj-border);
}

.dj-search-panel__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.dj-search-panel__note,
.dj-search-panel__intro {
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: var(--dj-muted);
}

.dj-search-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dj-search-panel__list li {
    margin: 0;
}

.dj-search__hit--static {
    cursor: default;
}

.dj-search__hit--playable {
    cursor: pointer;
}

.dj-search__hit--playable:hover {
    background: var(--dj-surface);
}

.dj-search__hit--catalog {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.dj-search__hit--catalog:hover {
    background: var(--dj-surface);
}

.dj-search__hit--static:hover {
    background: transparent;
}

a.dj-search__hit {
    text-decoration: none;
    display: block;
}

.dj-search-panel-hint {
    margin-bottom: 1rem;
}

.dj-flash {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--dj-radius);
    font-size: 0.85rem;
}

.dj-flash--success {
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid var(--dj-success);
    color: #bbf7d0;
}

.dj-flash--error {
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid var(--dj-danger);
    color: #fecaca;
}

.dj-app--narrow {
    max-width: 520px;
}

.dj-back-link {
    color: var(--dj-accent);
    text-decoration: none;
    font-size: 0.85rem;
}

.dj-back-link:hover {
    text-decoration: underline;
}

.dj-muted {
    color: var(--dj-muted);
    font-size: 0.85rem;
}

.dj-add-track {
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    padding: 1.25rem;
}

.dj-add-track__picked {
    margin: 0 0 1.25rem;
}

.dj-add-track__footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.dj-library__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dj-library__hint {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--dj-muted);
}

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

.dj-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1300;
}

.dj-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 2rem));
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    z-index: 1301;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.dj-modal-backdrop--blocking {
    z-index: 1400;
}

.dj-modal-backdrop--blocking + .dj-modal {
    z-index: 1401;
}

.dj-force-password-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dj-force-password-form .dj-modal__footer {
    margin-top: 0.5rem;
    padding: 0;
    border: none;
}

.dj-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem 0.5rem;
}

.dj-modal__title {
    margin: 0;
    font-size: 1.05rem;
}

.dj-modal__close {
    border: none;
    background: transparent;
    color: var(--dj-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.dj-modal__body {
    padding: 0 1.1rem 1rem;
}

.dj-modal__hint {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--dj-muted);
}

.dj-modal__hint--sm {
    font-size: 0.72rem;
}

.dj-modal__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dj-modal__choice {
    flex: 1 1 calc(33.333% - 0.35rem);
    min-width: 6.5rem;
    padding: 0.65rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--dj-border);
    background: var(--dj-surface-2);
    color: var(--dj-text);
    cursor: pointer;
    font-size: 0.8rem;
    text-align: center;
}

.dj-modal__choice:hover {
    border-color: var(--dj-accent);
    color: var(--dj-accent);
}

.dj-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dj-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
    color: var(--dj-muted);
}

.dj-field input,
.dj-field select {
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--dj-border);
    background: var(--dj-surface-2);
    color: var(--dj-text);
    font-size: 0.85rem;
}

.dj-link {
    border: none;
    background: none;
    color: var(--dj-accent);
    cursor: pointer;
    text-decoration: underline;
    font-size: inherit;
    padding: 0;
}

.dj-brand {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-shrink: 0;
}

.dj-brand > div {
    padding-bottom: 0.8rem;
}

.dj-brand h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--dj-accent), var(--dj-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dj-topbar:not(.dj-topbar--admin) .dj-brand h1 {
    color: #f0f0f5;
    background: none;
    -webkit-text-fill-color: currentColor;
    background-clip: unset;
    -webkit-background-clip: unset;
}

.dj-logo-img {
    display: block;
    width: auto;
    height: 6rem;
    flex-shrink: 0;
}

.dj-logo-img--auth {
    height: 11rem;
    margin: 0 auto;
}

.dj-auth__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.dj-topbar--admin .dj-logo-img {
    height: 4rem;
}

@media (max-width: 640px) {
    .dj-logo-img {
        height: 4.5rem;
    }
}

.dj-header h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--dj-accent), var(--dj-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dj-tagline {
    margin: 0.25rem 0 0;
    color: var(--dj-muted);
    font-size: 0.9rem;
}

.dj-info {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--dj-radius);
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.35);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--dj-text);
}

.dj-info strong {
    color: #ffc107;
}

.dj-hidden-input {
    position: fixed;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.dj-btn--download {
    background: rgba(74, 222, 128, 0.15);
    border-color: var(--dj-success);
    color: var(--dj-success);
    cursor: pointer;
    font: inherit;
}

.dj-btn--download:hover {
    background: rgba(74, 222, 128, 0.28);
}

button.dj-btn--download {
    appearance: none;
}

.dj-track-item[data-needs-download='0'] .dj-btn--download {
    display: none !important;
}

.dj-btn--accent {
    background: rgba(255, 107, 157, 0.25);
    border-color: var(--dj-accent);
    color: var(--dj-accent);
}

.dj-btn--sm.dj-btn--accent {
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    min-width: auto;
    background: linear-gradient(135deg, var(--dj-accent), var(--dj-accent-2));
    border: none;
    color: #fff;
}

.dj-btn--sm.dj-btn--accent:hover {
    opacity: 0.9;
    background: linear-gradient(135deg, var(--dj-accent), var(--dj-accent-2));
    border: none;
    color: #fff;
}

.dj-btn--purple {
    background: rgba(196, 77, 255, 0.2);
    border-color: var(--dj-accent-2);
    color: var(--dj-accent-2);
}

.dj-btn--purple:not(.dj-btn--sm) {
    padding: 0.65rem 1.15rem;
    background: linear-gradient(135deg, #9d4edd, var(--dj-accent-2));
    border: none;
    color: #fff;
}

.dj-btn--purple:not(.dj-btn--sm):hover {
    opacity: 0.92;
    background: linear-gradient(135deg, #7b2cbf, #d07aff);
    border: none;
    color: #fff;
}

.dj-btn--sm.dj-btn--purple {
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    min-width: auto;
    background: linear-gradient(135deg, #9d4edd, var(--dj-accent-2));
    border: none;
    color: #fff;
}

.dj-btn--sm.dj-btn--purple:hover {
    opacity: 0.92;
    background: linear-gradient(135deg, #7b2cbf, #d07aff);
    border: none;
    color: #fff;
}

.dj-btn--green:not(.dj-btn--sm) {
    padding: 0.65rem 1.15rem;
    background: linear-gradient(135deg, #16a34a, var(--dj-success));
    border: none;
    color: #fff;
}

.dj-btn--green:not(.dj-btn--sm):hover {
    opacity: 0.92;
    background: linear-gradient(135deg, #15803d, #86efac);
    border: none;
    color: #fff;
}

.dj-track-item--no-audio {
    opacity: 0.75;
    border-left: 2px dashed var(--dj-border);
}

.dj-track-item__meta--ok {
    color: var(--dj-success);
}

.dj-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
}

.dj-category-btn {
    padding: 0.45rem 1rem;
    border: 1px solid var(--dj-border);
    border-radius: 999px;
    background: var(--dj-surface-2);
    color: var(--dj-text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    white-space: nowrap;
}

.dj-category-btn:hover {
    border-color: var(--dj-accent);
    color: var(--dj-accent);
}

.dj-category-btn--active {
    background: linear-gradient(135deg, var(--dj-accent), var(--dj-accent-2));
    border-color: transparent;
    color: #fff;
}

.dj-category-btn--active:hover {
    color: #fff;
    opacity: 0.92;
}

.dj-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--dj-surface-2);
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    color: var(--dj-text);
    font-size: 0.875rem;
}

.dj-track-item__badge {
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    margin-bottom: 0.2rem;
    border-radius: 4px;
    background: rgba(196, 77, 255, 0.2);
    color: var(--dj-accent-2);
}

.dj-flash {
    padding: 0.75rem 1rem;
    border-radius: var(--dj-radius);
    margin-bottom: 1rem;
}

.dj-flash--success {
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid var(--dj-success);
}

.dj-flash--error {
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid var(--dj-danger);
}

.dj-main {
    display: grid;
    grid-template-columns: minmax(340px, 400px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

.dj-stage {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.dj-now-playing {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.12), rgba(196, 77, 255, 0.12));
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    padding: 1.25rem;
}

.dj-now-playing__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.dj-now-playing__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dj-muted);
}

.dj-now-playing__category {
    margin: 0.15rem 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--dj-accent), var(--dj-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dj-now-playing__deck-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--dj-surface-2);
    border: 1px solid var(--dj-border);
    color: var(--dj-accent);
}

.dj-now-playing__current,
.dj-now-playing__next {
    padding: 0.75rem 0;
    border-top: 1px solid var(--dj-border);
}

.dj-now-playing__section-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dj-muted);
}

.dj-now-playing__track {
    margin: 0.25rem 0 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.dj-now-playing__meta {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--dj-muted);
}

.dj-decks-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}

@media (max-width: 960px) {
    .dj-decks-row {
        grid-template-columns: 1fr;
    }
}

.dj-mixer-bar {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0;
}

.dj-mixer-bar .dj-mixer {
    width: 100%;
    max-width: 36rem;
}

.dj-deck--active {
    border-color: var(--dj-accent);
    box-shadow: 0 0 0 1px rgba(255, 107, 157, 0.35);
}

.dj-deck__active-tag {
    margin: -0.35rem 0 0.4rem;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dj-accent);
}

.dj-deck-now {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.65rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border: 1px solid var(--dj-border);
}

.dj-deck-now__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.dj-deck-now__label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dj-muted);
}

.dj-btn--skip-next {
    flex-shrink: 0;
    padding: 0.15rem 0.45rem;
    font-size: 0.62rem;
    line-height: 1.2;
    border-radius: 6px;
}

.dj-btn--skip-next:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.dj-deck-now__track {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.dj-deck-now__meta {
    margin: 0.15rem 0 0;
    font-size: 0.7rem;
    color: var(--dj-muted);
}

.dj-mixer__active {
    font-size: 0.8rem;
    color: var(--dj-muted);
    margin: 0 0 0.5rem;
}

.dj-mixer__pick {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.dj-btn--deck-pick--active {
    border-color: var(--dj-accent);
    color: var(--dj-accent);
}

.dj-btn--queue {
    font-weight: 700;
    min-width: 2.25rem;
}

.dj-dock-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--dj-border);
}

@media (max-width: 768px) {
    .dj-dock-bar {
        grid-template-columns: 1fr;
    }
}

.dj-dock {
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    padding: 0.85rem;
    min-height: 140px;
}

.dj-dock--a {
    border-top: 3px solid var(--dj-accent);
}

.dj-dock--b {
    border-top: 3px solid var(--dj-accent-2);
}

.dj-dock--drop-target {
    box-shadow: 0 0 0 2px var(--dj-accent-2);
    background: rgba(96, 165, 250, 0.06);
}

.dj-dock__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.dj-dock__title {
    margin: 0;
    font-size: 0.95rem;
}

.dj-dock__count {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--dj-surface-2);
    color: var(--dj-muted);
}

.dj-dock__hint {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    color: var(--dj-muted);
}

.dj-dock-queue {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.dj-dock-queue__total {
    margin: 0.65rem 0 0;
    padding-top: 0.55rem;
    border-top: 1px solid var(--dj-border);
    font-size: 0.8rem;
    color: var(--dj-muted);
    text-align: right;
    line-height: 1.45;
}

.dj-dock-queue__total strong {
    color: var(--dj-text);
    font-weight: 600;
}

.dj-dock-item__duration {
    color: var(--dj-muted);
    font-variant-numeric: tabular-nums;
}

.dj-dock-queue__empty {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--dj-muted);
    text-align: center;
}

.dj-dock-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    padding: 0.35rem;
    background: var(--dj-surface-2);
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    cursor: grab;
}

.dj-dock-item--active {
    border-color: var(--dj-accent);
    background: rgba(255, 107, 157, 0.08);
}

.dj-dock-item--dragging {
    opacity: 0.5;
}

.dj-dock-item--drag-over {
    border-color: var(--dj-accent-2);
    box-shadow: 0 0 0 1px var(--dj-accent-2);
}

.dj-dock-item__drag {
    color: var(--dj-muted);
    font-size: 0.85rem;
    cursor: grab;
    user-select: none;
}

.dj-dock-item__body {
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.dj-dock-item__title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dj-dock-item__meta {
    display: block;
    font-size: 0.7rem;
    color: var(--dj-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dj-dock-item__move {
    flex-shrink: 0;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--dj-border);
    border-radius: 6px;
    background: var(--dj-surface);
    color: var(--dj-accent-2);
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.dj-dock-item__move:hover {
    background: rgba(96, 165, 250, 0.15);
    border-color: var(--dj-accent-2);
}

.dj-dock--a .dj-dock-item__move {
    color: var(--dj-accent-2);
}

.dj-dock--b .dj-dock-item__move {
    color: var(--dj-accent);
}

.dj-dock-item__remove {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 6px;
    background: rgba(248, 113, 113, 0.15);
    color: var(--dj-danger);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}

.dj-dock-item__remove:hover {
    background: rgba(248, 113, 113, 0.35);
}

.dj-decks {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 960px) {
    .dj-main {
        grid-template-columns: 1fr;
    }
}

.dj-library {
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    padding: 1rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

.dj-library__tree-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0.35rem 0 0.25rem;
}

.dj-btn--tree-toggle {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    color: var(--dj-muted);
    border-color: var(--dj-border);
    background: transparent;
}

.dj-btn--tree-toggle:hover {
    color: var(--dj-text);
    border-color: var(--dj-muted);
    background: rgba(255, 255, 255, 0.04);
}

.dj-playlist {
    margin-top: 0.25rem;
}

.dj-artist {
    margin-bottom: 0.35rem;
    border-radius: 8px;
    background: var(--dj-surface-2);
    border: 1px solid var(--dj-border);
}

.dj-artist[hidden] {
    display: none !important;
}

.dj-artist__summary,
.dj-album__summary {
    cursor: pointer;
    list-style: none;
    padding: 0.55rem 0.75rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
    transition: background 0.12s ease;
}

.dj-artist__summary:hover,
.dj-album__summary:hover {
    background: rgba(255, 255, 255, 0.05);
}

.dj-artist__summary::-webkit-details-marker,
.dj-album__summary::-webkit-details-marker {
    display: none;
}

.dj-artist__summary::before,
.dj-album__summary::before {
    content: '▸';
    flex-shrink: 0;
    width: 1rem;
    color: var(--dj-muted);
    font-size: 0.85rem;
    line-height: 1;
    transition: transform 0.15s ease, color 0.12s ease;
}

.dj-artist[open] > .dj-artist__summary::before,
.dj-album[open] > .dj-album__summary::before {
    transform: rotate(90deg);
    color: var(--dj-accent);
}

.dj-artist__summary {
    justify-content: flex-start;
    text-align: left;
}

.dj-artist__name {
    font-size: 0.95rem;
    color: var(--dj-accent);
    text-align: left;
    flex: 1;
    min-width: 0;
}

.dj-artist__count {
    font-size: 0.7rem;
    color: var(--dj-muted);
    font-weight: 500;
    margin-left: auto;
    flex-shrink: 0;
}

.dj-artist__albums {
    padding: 0 0.5rem 0.5rem;
}

.dj-album {
    margin: 0.25rem 0 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
}

.dj-album__summary {
    justify-content: flex-start;
    text-align: left;
    padding-left: 0.6rem;
    font-size: 0.85rem;
    color: var(--dj-text);
    font-weight: 600;
}

.dj-album__title {
    text-align: left;
    min-width: 0;
}

.dj-album__year {
    font-size: 0.7rem;
    color: var(--dj-muted);
    font-weight: 400;
    flex-shrink: 0;
}

.dj-album-tracks {
    list-style: none;
    margin: 0;
    padding: 0 0.5rem 0.5rem;
}

.dj-track-item {
    cursor: pointer;
}

.dj-track-item:hover {
    background: rgba(255, 107, 157, 0.08);
}

.dj-track-item--active {
    background: rgba(196, 77, 255, 0.15);
    border-left: 3px solid var(--dj-accent);
    padding-left: calc(0.5rem - 3px);
}

.dj-track-item--preview {
    opacity: 0.85;
}

.dj-track-item--preview .dj-track-item__info strong {
    font-weight: 500;
}

.dj-track-item__hint {
    display: block;
    font-size: 0.65rem;
    color: var(--dj-muted);
    font-style: italic;
}

.dj-track-item__hint--stream {
    color: #9ad4ff;
}

.dj-track-item__hint--demo {
    color: #ffc86d;
}

.dj-track-item--stream {
    border-left: 2px solid #4a9eff;
}

.dj-library__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.dj-library__header h2 {
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dj-muted);
}

.dj-library__count {
    background: var(--dj-surface-2);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
}

.dj-notice {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: rgba(255, 180, 80, 0.12);
    border: 1px solid rgba(255, 180, 80, 0.35);
    font-size: 0.78rem;
    line-height: 1.5;
    color: #ffd9a0;
}

.dj-notice code {
    font-size: 0.72rem;
}

.dj-import {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--dj-border);
}

.dj-import__lead {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--dj-muted);
}

.dj-import__lead strong {
    color: var(--dj-text);
}

.dj-import__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.dj-import__label {
    cursor: pointer;
    margin: 0;
}

.dj-import__hint {
    font-size: 0.68rem;
    color: var(--dj-muted);
}

.dj-import__hint code {
    font-size: 0.65rem;
}

.dj-import__status {
    margin: 0.5rem 0 0;
    font-size: 0.72rem;
    color: #7dffb0;
}

.dj-import__status--error {
    color: #ff8a8a;
}

.dj-upload {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--dj-border);
}

.dj-upload__fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dj-input,
.dj-file {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--dj-surface-2);
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    color: var(--dj-text);
    font-size: 0.875rem;
    box-sizing: border-box;
}

.dj-track-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dj-track-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s;
}

.dj-track-item:hover {
    background: var(--dj-surface-2);
}

.dj-track-item__info {
    flex: 1;
    min-width: 0;
}

.dj-track-item__info strong {
    display: block;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dj-track-item__meta {
    font-size: 0.75rem;
    color: var(--dj-muted);
}

.dj-track-item__actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.dj-track-empty {
    color: var(--dj-muted);
    font-size: 0.875rem;
    padding: 1rem 0;
}

.dj-track-empty--album {
    list-style: none;
    padding: 0.5rem 0.75rem 0.75rem;
    font-size: 0.8125rem;
}

.dj-track-item--highlight {
    outline: 2px solid var(--dj-accent, #c9a227);
    outline-offset: 2px;
    border-radius: 6px;
    animation: dj-track-highlight 0.6s ease-out;
}

@keyframes dj-track-highlight {
    from {
        background: color-mix(in srgb, var(--dj-accent, #c9a227) 35%, transparent);
    }
    to {
        background: transparent;
    }
}

.dj-deck {
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    padding: 1.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dj-deck--loaded {
    border-color: rgba(255, 107, 157, 0.4);
}

.dj-deck--playing {
    box-shadow: 0 0 24px rgba(196, 77, 255, 0.15);
}

.dj-deck__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

.dj-deck__header--pick {
    cursor: pointer;
    border-radius: 8px;
    margin: -0.35rem -0.35rem 0.4rem;
    padding: 0.35rem;
    transition: background 0.15s ease;
}

.dj-deck__header--pick:hover {
    background: rgba(255, 255, 255, 0.04);
}

.dj-deck__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dj-accent);
    font-weight: 700;
}

.dj-deck__title {
    font-size: 0.9rem;
    color: var(--dj-muted);
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dj-player-hint {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    color: var(--dj-muted);
}

.dj-player-stack {
    position: relative;
    width: 100%;
    min-height: 80px;
    margin-bottom: 0.5rem;
}

.dj-player {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--dj-surface-2);
    min-height: 80px;
}

.dj-player--slot {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.dj-player--slot.dj-player--active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

.dj-player :host {
    display: block;
    width: 100%;
}

.dj-deck__time {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--dj-muted);
    margin-bottom: 0.25rem;
}

.dj-deck__controls {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.dj-knob-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 4.5rem;
}

.dj-knob-wrap__label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dj-muted);
}

.dj-knob-wrap__value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dj-accent);
    font-variant-numeric: tabular-nums;
}

.dj-knob-wrap--transition .dj-knob-wrap__label {
    max-width: 6.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--dj-text);
    line-height: 1.25;
    text-align: center;
}

.dj-knob-wrap--transition .dj-knob-wrap__value {
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--dj-muted);
}

.dj-knob__readout {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    line-height: 1.1;
    pointer-events: none;
    padding: 0.2rem;
}

.dj-deck__sliders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    width: 100%;
    margin-bottom: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--dj-border);
}

.dj-deck__sliders .dj-control--half {
    margin-bottom: 0;
    min-width: 0;
    width: 100%;
}

.dj-knob {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a3a52 0%, #1a1a28 70%);
    border: 2px solid var(--dj-border);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.35);
    position: relative;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.dj-knob:active {
    cursor: grabbing;
}

.dj-knob--effect-crossfade .dj-knob__dial {
    border-color: rgba(255, 107, 157, 0.5);
}

.dj-knob--effect-fade .dj-knob__dial {
    border-color: rgba(147, 197, 253, 0.55);
}

.dj-knob--effect-filter .dj-knob__dial {
    border-color: rgba(196, 77, 255, 0.55);
}

.dj-knob--effect-cut .dj-knob__dial,
.dj-knob--overlap-cut .dj-knob__dial {
    border-color: rgba(248, 113, 113, 0.55);
}

.dj-knob--overlap-cut .dj-knob__dial {
    opacity: 0.65;
}

.dj-knob--overlap-cut .dj-knob__pointer {
    background: linear-gradient(180deg, #f87171, #ef4444);
}

.dj-knob__dial {
    position: absolute;
    inset: 0.35rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 107, 157, 0.35);
    transform: rotate(-135deg);
    transition: transform 0.05s linear;
}

.dj-knob__pointer {
    position: absolute;
    top: 0.15rem;
    left: 50%;
    width: 3px;
    height: 0.55rem;
    margin-left: -1.5px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ff6b9d, #c44dff);
    box-shadow: 0 0 6px rgba(255, 107, 157, 0.6);
}

.dj-knob--transport {
    cursor: pointer;
}

.dj-knob--transport:active {
    cursor: pointer;
}

.dj-knob--transport .dj-knob__pointer {
    display: none;
}

.dj-knob--transport .dj-knob__readout {
    font-size: 0.72rem;
    letter-spacing: -0.02em;
}

.dj-knob--transport.dj-knob--playing .dj-knob__dial {
    border-color: rgba(74, 222, 128, 0.65);
    box-shadow: inset 0 0 12px rgba(74, 222, 128, 0.15);
}

.dj-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    background: var(--dj-surface-2);
    color: var(--dj-text);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
}

a.dj-btn,
a.dj-btn:hover,
a.dj-btn:focus,
a.dj-btn:focus-visible {
    text-decoration: none;
}

.dj-btn:hover {
    background: var(--dj-border);
}

.dj-btn--primary {
    background: linear-gradient(135deg, var(--dj-accent), var(--dj-accent-2));
    border: none;
    color: #fff;
}

.dj-btn--primary:hover {
    opacity: 0.9;
}

.dj-btn--play {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.1rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dj-btn--sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    min-width: 1.75rem;
}

.dj-btn--danger {
    color: var(--dj-danger);
    border-color: rgba(248, 113, 113, 0.3);
}

.dj-control {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: var(--dj-muted);
}

.dj-control input[type='range'] {
    width: 100%;
    accent-color: var(--dj-accent-2);
}

.dj-control em {
    font-style: normal;
    color: var(--dj-accent);
}

.dj-control input[type='range'][data-dj-target='bass'] {
    accent-color: #f59e0b;
}

.dj-audio-alt {
    display: none;
}

.dj-control--transition {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--dj-border);
    border-bottom: 1px solid var(--dj-border);
    margin: 0.25rem 0;
}

.dj-control__row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
}

.dj-control__row select {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--dj-border);
    background: var(--dj-surface-2);
    color: inherit;
    font: inherit;
}

.dj-control__row input[type='range']:disabled {
    opacity: 0.35;
}

.dj-mixer {
    background: linear-gradient(180deg, var(--dj-surface) 0%, #12121a 100%);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    padding: 1.25rem;
    text-align: center;
}

.dj-mixer__title {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dj-muted);
}

.dj-crossfader {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.dj-crossfader input {
    flex: 1;
    max-width: 400px;
    accent-color: var(--dj-accent);
}

.dj-crossfader span {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--dj-muted);
}

.dj-mixer__hint {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--dj-muted);
}

.dj-topbar__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-width: 0;
}

.dj-user-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.dj-user-nav__name {
    font-size: 0.875rem;
    color: var(--dj-muted);
    margin-right: 0.25rem;
}

.dj-user-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.dj-user-menu__wrap {
    position: relative;
}

.dj-user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    background: var(--dj-surface-2);
    color: var(--dj-text);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
}

.dj-user-menu__trigger:hover {
    border-color: var(--dj-accent-2);
    color: #f0f0f5;
}

.dj-user-menu__name {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dj-user-menu__chevron {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--dj-muted);
}

.dj-user-menu__dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 1200;
    min-width: 11rem;
    padding: 0.35rem;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    background: var(--dj-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.dj-user-menu__item {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--dj-text);
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.dj-user-menu__item:hover {
    background: rgba(124, 58, 237, 0.15);
    color: #f0f0f5;
}

.dj-user-menu__item--link {
    color: var(--dj-text);
}

.dj-brand__link {
    color: var(--dj-accent);
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.25rem;
}

.dj-brand__link:hover {
    text-decoration: underline;
}

.dj-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.dj-auth__card--wide {
    max-width: 480px;
}

.dj-auth__card--application {
    max-width: 380px;
}

.dj-auth__hint {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--dj-muted);
}

.dj-booking-genres-select {
    min-height: 8.5rem;
    padding: 0.5rem 0.65rem;
}

.dj-booking-genres-select option {
    padding: 0.35rem 0.25rem;
}

.dj-auth__card {
    width: 100%;
    max-width: 720px;
    padding: 2rem;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.dj-auth__forms {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 560px) {
    .dj-auth__forms {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
}

.dj-auth__section-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #c4b5fd;
}

.dj-auth__section-title--booking {
    color: #f9a8d4;
}

.dj-auth__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dj-auth__booking-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dj-auth__booking-form .dj-auth__input {
    width: 100%;
    box-sizing: border-box;
}

.dj-auth__field ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--dj-danger);
}

.dj-auth__book-btn {
    margin-top: 0.5rem;
    width: 100%;
}

.dj-auth__success {
    margin: 0 0 1rem;
    padding: 0.75rem;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid var(--dj-success);
    border-radius: 8px;
    color: var(--dj-success);
    font-size: 0.875rem;
}

.dj-auth__title {
    margin: 0.5rem 0 0.25rem;
    font-size: 1.75rem;
    color: #f0f0f5;
}

.dj-auth__subtitle {
    margin: 0 0 1rem;
    color: var(--dj-muted);
}

.dj-auth__banners {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 560px) {
    .dj-auth__banners {
        grid-template-columns: 1fr 1fr;
    }
}

.dj-auth__demo,
.dj-auth__urgency {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
}

.dj-auth__demo {
    border: 1px solid rgba(124, 58, 237, 0.35);
    background: rgba(124, 58, 237, 0.1);
}

.dj-auth__urgency {
    border: 1px solid rgba(244, 114, 182, 0.35);
    background: rgba(219, 39, 119, 0.08);
}

.dj-auth__urgency-title {
    margin: 0 0 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f9a8d4;
}

.dj-auth__urgency-text {
    margin: 0 0 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dj-text);
}

.dj-auth__urgency-stat {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dj-muted);
    line-height: 1.4;
}

.dj-auth__urgency-stat strong {
    color: #f472b6;
    font-weight: 700;
}

.dj-auth__demo-title {
    margin: 0 0 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c4b5fd;
}

.dj-auth__demo-hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--dj-text);
    line-height: 1.45;
}

.dj-auth__demo-hint + .dj-auth__demo-hint {
    margin-top: 0.25rem;
}

.dj-auth__demo-hint strong {
    color: #f472b6;
    font-weight: 600;
}

.dj-auth__error {
    margin: 0 0 1rem;
    padding: 0.75rem;
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid var(--dj-danger);
    border-radius: 8px;
    color: var(--dj-danger);
    font-size: 0.875rem;
}

.dj-auth__form,
.dj-auth__booking {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-sizing: border-box;
}

.dj-auth__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid rgba(124, 58, 237, 0.35);
    background: rgba(124, 58, 237, 0.1);
}

.dj-auth__booking {
    border: 1px solid rgba(244, 114, 182, 0.35);
    background: rgba(219, 39, 119, 0.08);
}

.dj-auth__label {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dj-muted);
}

.dj-auth__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.85rem;
    background: #ffffff;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    color: #1a1a24;
    font-size: 1rem;
}

.dj-auth__input:focus {
    outline: none;
    border-color: var(--dj-accent);
}

.dj-auth__submit {
    margin-top: 0.5rem;
    width: 100%;
}

.dj-auth__applicant {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--dj-border);
    background: rgba(255, 255, 255, 0.04);
}

.dj-auth__applicant-line {
    margin: 0;
    font-size: 0.875rem;
    color: var(--dj-text);
    line-height: 1.5;
}

.dj-auth__applicant-line + .dj-auth__applicant-line {
    margin-top: 0.25rem;
}

.dj-auth__applicant-line span {
    display: inline-block;
    min-width: 3.5rem;
    color: var(--dj-muted);
    font-size: 0.8125rem;
}

.dj-auth__field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.dj-auth__checkbox-label {
    margin: 0;
    font-size: 0.875rem;
    color: var(--dj-text);
    cursor: pointer;
}

.dj-auth__thanks-text {
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--dj-muted);
    text-align: center;
}

.dj-auth__success--block {
    text-align: center;
}

.dj-auth__back {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 0.875rem;
}

.dj-auth__back a {
    color: var(--dj-muted);
}

.dj-auth__back a:hover {
    color: #f472b6;
}

.dj-admin-applications {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dj-admin-application {
    padding: 1rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--dj-border);
    background: var(--dj-surface-2);
}

.dj-admin-application__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.dj-admin-application__status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.dj-admin-application__status--pending {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.dj-admin-application__status--approved {
    background: rgba(74, 222, 128, 0.15);
    color: var(--dj-success);
}

.dj-admin-application__status--rejected {
    background: rgba(248, 113, 113, 0.15);
    color: var(--dj-danger);
}

.dj-admin-application__meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dj-muted);
    line-height: 1.45;
}

.dj-admin-application__actions {
    margin-top: 0.65rem;
}

.dj-admin-application__note {
    font-size: 0.8125rem;
    color: var(--dj-success);
}

.dj-btn--danger {
    border-color: var(--dj-danger);
    color: var(--dj-danger);
}

.dj-btn--ghost-danger {
    background: transparent;
    border-color: transparent;
    color: var(--dj-muted);
}

.dj-btn--ghost-danger:hover {
    color: var(--dj-danger);
    background: rgba(248, 113, 113, 0.1);
}

.dj-form-field .invalid-feedback,
.dj-form-field ul,
.dj-admin-form .invalid-feedback,
.dj-admin-form ul {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--dj-danger);
}

/* —— Admin: gebruikersbeheer —— */
.dj-app--admin {
    min-height: 100vh;
}

.dj-topbar--admin .dj-brand {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.dj-brand__back {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0.1rem 0 0;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: 8px;
    border: 1px solid var(--dj-border);
    text-decoration: none;
}

.dj-brand__back:hover {
    text-decoration: none;
    border-color: var(--dj-accent);
    background: rgba(124, 58, 237, 0.12);
}

.dj-topbar--admin .dj-brand h1 {
    margin: 0;
    font-size: 1.5rem;
}

.dj-topbar--admin .dj-tagline {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
}

.dj-admin-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 2.5rem;
}

.dj-admin-flash {
    margin-bottom: 1rem;
}

.dj-admin-page--users-full {
    max-width: 1200px;
}

.dj-admin-page--contract {
    max-width: 1200px;
}

.dj-admin-main--full {
    width: 100%;
    max-width: none;
}

.dj-admin-main__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dj-admin-main__head-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.dj-modal--wide {
    width: min(480px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

.dj-modal--wide .dj-modal__body {
    overflow-y: auto;
    max-height: calc(100vh - 8rem);
}

.dj-admin-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 920px) {
    .dj-admin-layout {
        grid-template-columns: 1fr;
    }
}

.dj-admin-card {
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    padding: 1.35rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.dj-admin-card--create {
    position: sticky;
    top: 1rem;
}

.dj-admin-card__head {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--dj-border);
}

.dj-admin-card__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--dj-accent), #a855f7);
    color: #0a0a0f;
}

.dj-admin-card__head h2 {
    margin: 0;
    font-size: 1.125rem;
}

.dj-admin-card__head p {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--dj-muted);
    line-height: 1.4;
}

.dj-admin-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dj-admin-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dj-admin-form .dj-auth__input,
.dj-admin-form select.dj-auth__input {
    width: 100%;
    box-sizing: border-box;
}

.dj-admin-form__field--actions {
    margin-top: -0.35rem;
}

.dj-admin-page--edit {
    max-width: 36rem;
    margin: 0 auto;
}

.dj-admin-card--edit {
    padding: 1.25rem 1.35rem;
}

.dj-admin-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.dj-admin-form__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dj-muted);
}

.dj-admin-form__hint {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    color: var(--dj-muted);
}

.dj-admin-form__row--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 400px) {
    .dj-admin-form__row--2 {
        grid-template-columns: 1fr;
    }
}

.dj-admin-form__submit {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.75rem 1rem;
}

.dj-admin-main__head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.dj-admin-main__head h2 {
    margin: 0;
    font-size: 1.25rem;
}

.dj-admin-main__count {
    font-size: 0.8125rem;
    color: var(--dj-muted);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
}

.dj-admin-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--dj-muted);
    background: var(--dj-surface);
    border: 1px dashed var(--dj-border);
    border-radius: var(--dj-radius);
}

.dj-admin-users {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dj-admin-user {
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dj-admin-user:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.dj-admin-user__row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1rem 1.15rem;
    align-items: start;
}

.dj-admin-user__aside {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    z-index: 2;
    max-width: calc(100% - 4.5rem);
}

.dj-admin-user__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.dj-admin-user__actions a.dj-btn,
.dj-admin-user__actions a.dj-btn:hover,
.dj-admin-user__actions a.dj-btn:focus,
.dj-admin-user__actions a.dj-btn:focus-visible {
    text-decoration: none;
}

.dj-admin-user__body {
    padding-right: min(11rem, 38vw);
    min-width: 0;
}

@media (max-width: 640px) {
    .dj-admin-user__aside {
        top: 0.65rem;
        right: 0.65rem;
        max-width: calc(100% - 3.5rem);
    }

    .dj-admin-user__body {
        padding-right: 0;
        padding-top: 2.75rem;
    }
}

.dj-admin-user__avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.35), rgba(34, 211, 238, 0.2));
    border: 1px solid rgba(124, 58, 237, 0.4);
    color: var(--dj-text);
}

.dj-admin-user__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dj-admin-user__title h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.dj-admin-user__role {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--dj-muted);
}

.dj-admin-user__role--admin {
    background: rgba(124, 58, 237, 0.25);
    color: #c4b5fd;
}

.dj-admin-user__meta {
    margin: 0.2rem 0 0.65rem;
    font-size: 0.75rem;
    color: var(--dj-muted);
}

.dj-admin-user__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.dj-admin-user__no-cats {
    font-size: 0.8125rem;
    color: var(--dj-muted);
    font-style: italic;
}

.dj-cat-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.25);
    color: #a5f3fc;
}

.dj-cat-tag--all {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.35);
    color: #ddd6fe;
}

.dj-admin-user__deck-stats {
    display: flex;
    gap: 0.35rem;
    text-decoration: none;
    width: max-content;
}

.dj-admin-user__deck-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 4.75rem;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    border: 1px solid var(--dj-border);
    background: rgba(0, 0, 0, 0.2);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.dj-admin-user__deck-stats:hover .dj-admin-user__deck-pill {
    transform: translateY(-1px);
}

.dj-admin-user__deck-pill--a {
    border-color: rgba(255, 107, 157, 0.35);
    background: rgba(255, 107, 157, 0.08);
}

.dj-admin-user__deck-pill--b {
    border-color: rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.08);
}

.dj-admin-user__deck-stats:hover .dj-admin-user__deck-pill--a {
    border-color: rgba(255, 107, 157, 0.55);
    background: rgba(255, 107, 157, 0.14);
}

.dj-admin-user__deck-stats:hover .dj-admin-user__deck-pill--b {
    border-color: rgba(34, 211, 238, 0.55);
    background: rgba(34, 211, 238, 0.14);
}

.dj-admin-user__deck-pill-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dj-muted);
    white-space: nowrap;
}

.dj-admin-user__deck-pill--a .dj-admin-user__deck-pill-label {
    color: #fda4c8;
}

.dj-admin-user__deck-pill--b .dj-admin-user__deck-pill-label {
    color: #a5f3fc;
}

.dj-admin-user__deck-pill-count {
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dj-text);
    line-height: 1;
}

.dj-admin-user__delete {
    margin: 0;
}

.dj-btn--icon-danger {
    min-width: 2rem;
    padding-inline: 0.45rem;
    font-size: 1.15rem;
    line-height: 1;
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.35);
}

.dj-btn--icon-danger:hover {
    color: #fff;
    background: rgba(248, 113, 113, 0.2);
    border-color: rgba(248, 113, 113, 0.55);
}

.dj-admin-user__edit {
    border-top: 1px solid var(--dj-border);
}

.dj-admin-user__edit-trigger {
    list-style: none;
    cursor: pointer;
    padding: 0.65rem 1.15rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dj-accent);
    user-select: none;
}

.dj-admin-user__edit-trigger::-webkit-details-marker {
    display: none;
}

.dj-admin-user__edit-trigger::after {
    content: ' ▾';
    opacity: 0.7;
}

.dj-admin-user__edit[open] .dj-admin-user__edit-trigger::after {
    content: ' ▴';
}

.dj-admin-user__edit-panel {
    padding: 0 1.15rem 1.15rem;
    background: rgba(0, 0, 0, 0.15);
}

.dj-admin-user__edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dj-admin-user__edit-form .dj-auth__input,
.dj-admin-user__edit-form select.dj-auth__input {
    width: 100%;
    box-sizing: border-box;
}

.dj-admin-user__edit-actions {
    display: flex;
    justify-content: flex-end;
}

.dj-category-select {
    width: 100%;
    min-height: 11rem;
    padding: 0.5rem 0.65rem;
    margin-top: 0.15rem;
}

.dj-category-select option {
    padding: 0.35rem 0.5rem;
}

.dj-category-select--edit {
    min-height: 10rem;
}

/* Category chip picker (edit forms) */
.dj-cat-picks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr));
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    border: none;
}

.dj-cat-picks--compact {
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.35rem;
}

.dj-cat-picks .form-check,
.dj-cat-picks > div {
    margin: 0;
    padding: 0;
    min-height: 0;
}

.dj-cat-picks .form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dj-cat-picks .form-check-label {
    display: block;
    margin: 0;
    padding: 0.45rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    background: var(--dj-bg);
    color: var(--dj-muted);
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        transform 0.1s ease;
    user-select: none;
}

.dj-cat-picks .form-check-label:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--dj-text);
}

.dj-cat-picks .form-check-input:checked + .form-check-label,
.dj-cat-picks .form-check-input:checked + label {
    border-color: var(--dj-accent);
    background: rgba(124, 58, 237, 0.2);
    color: #e9d5ff;
    font-weight: 500;
}

.dj-cat-picks .form-check-input:focus-visible + .form-check-label,
.dj-cat-picks .form-check-input:focus-visible + label {
    outline: 2px solid var(--dj-accent);
    outline-offset: 2px;
}

.dj-modal__hint--warn {
    color: var(--dj-danger);
    font-size: 0.875rem;
}

.dj-modal__hint--info {
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.25);
    color: #ddd6fe;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.dj-pending-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dj-pending-card {
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    padding: 1.15rem 1.25rem;
}

.dj-pending-card__main {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 320px);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 720px) {
    .dj-pending-card__main {
        grid-template-columns: 1fr;
    }
}

.dj-pending-card__user {
    display: inline-block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dj-accent);
    margin-bottom: 0.35rem;
}

.dj-pending-card__info h3 {
    margin: 0 0 0.2rem;
    font-size: 1.125rem;
}

.dj-pending-card__artist {
    margin: 0 0 0.5rem;
    color: var(--dj-muted);
    font-size: 0.875rem;
}

.dj-pending-card__meta {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--dj-muted);
}

.dj-pending-card__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dj-pending-card__form .dj-btn {
    align-self: flex-start;
    margin-top: 0.25rem;
}

.dj-pending-card__player {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--dj-border);
}

.dj-pending-card__player-label {
    margin: 0;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dj-muted);
}

.dj-pending-card__audio {
    width: 100%;
    height: 2.25rem;
}

.dj-pending-card__no-audio {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dj-muted);
}

.dj-pending-card__save {
    margin: 0;
}

.dj-pending-card__player > .dj-btn {
    align-self: flex-start;
    width: auto;
}

.dj-queue-page__hint {
    margin: 0 0 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.dj-queue-page__hint.dj-flash--success {
    color: var(--dj-success);
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.35);
}

.dj-queue-page__hint.dj-flash--error {
    color: var(--dj-danger);
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.dj-queue-status {
    display: inline-block;
    margin-bottom: 0.45rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
}

.dj-queue-status--pending {
    color: #fde68a;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.dj-queue-status--processing {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.dj-queue-status--completed {
    color: var(--dj-success);
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.35);
}

.dj-queue-status--failed {
    color: var(--dj-danger);
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.dj-queue-item__error {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--dj-danger);
    line-height: 1.4;
}

.dj-queue-item__deck-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.dj-admin-empty__sub {
    margin: 0.35rem 0 1rem;
    color: var(--dj-muted);
    font-size: 0.875rem;
}

.dj-app--queue-page .dj-queue-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.dj-queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.dj-queue-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
}

.dj-queue-row__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 220px;
}

.dj-queue-row__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.dj-queue-row__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dj-text);
}

.dj-queue-row__meta {
    font-size: 0.8125rem;
    color: var(--dj-muted);
}

.dj-queue-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.dj-queue-row__wait {
    font-size: 0.8125rem;
    color: var(--dj-muted);
}

.dj-queue-row__wait--ok {
    color: var(--dj-success);
}

.dj-queue-stats {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.dj-queue-stats__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    font-size: 0.875rem;
}

.dj-queue-stats__item strong {
    font-size: 1.1rem;
    color: var(--dj-text);
}

.dj-queue-row__meta--sub {
    display: block;
    margin-top: 0.2rem;
}

.dj-queue-list--admin .dj-queue-row--admin {
    align-items: flex-start;
}

.dj-admin-form__password-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dj-admin-form__password-row .dj-auth__input {
    width: 100%;
}

.dj-admin-form__password-row .dj-btn {
    align-self: flex-start;
}

.dj-admin-main__sort-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dj-muted);
    line-height: 1.4;
}

.dj-admin-user__event {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    width: max-content;
    max-width: 100%;
    margin: 0.35rem 0 0.5rem;
    padding: 0.5rem 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--dj-border);
    border-radius: 0.5rem;
}

.dj-admin-user__event-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.dj-admin-user__event-row--playlist {
    padding-top: 0.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
}

.dj-admin-user__event-date,
.dj-admin-user__event-place,
.dj-admin-user__event-genre,
.dj-admin-user__event-contract,
.dj-admin-user__event-tikkie,
.dj-admin-user__event-playlist {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dj-text);
}

.dj-admin-user__event-playlist .dj-admin-user__deck-stats {
    margin-top: 0.1rem;
}

.dj-admin-user__event-playlist .dj-admin-user__deck-pill {
    min-width: 3.5rem;
    padding: 0.25rem 0.45rem;
}

.dj-admin-user__event-genre--empty,
.dj-admin-user__event-contract--no span:last-child {
    color: #fff;
    font-weight: 500;
}

.dj-admin-user__event-contract--yes span:nth-child(2) {
    color: #c4b5fd;
}

.dj-admin-user__event-tikkie-status {
    font-size: 0.875rem;
    font-weight: 600;
}

.dj-admin-user__event-tikkie-status--open {
    color: #f472b6;
}

.dj-admin-user__event-tikkie-status--paid {
    color: #86efac;
}

.dj-admin-user__event-tikkie-status--none {
    color: var(--dj-muted);
    font-weight: 500;
}

.dj-admin-user__event-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dj-muted);
}

.dj-impersonation-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.25), rgba(236, 72, 153, 0.2));
    border-bottom: 1px solid rgba(168, 85, 247, 0.35);
}

.dj-impersonation-bar p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--dj-text);
}

.dj-deck-playlist {
    border-left: 3px solid var(--dj-accent-2);
}

.dj-playlisten-library {
    border-left: 3px solid rgba(96, 165, 250, 0.85);
}

.dj-playlisten-library__summary .dj-artist__name {
    color: #93c5fd;
}

.dj-playlisten-empty {
    margin: 0.5rem 0 1rem;
}

.dj-peer-user {
    margin: 0.35rem 0 0;
    border: 1px solid var(--dj-border);
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.04);
}

.dj-peer-user__summary {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.dj-peer-user__summary::-webkit-details-marker {
    display: none;
}

.dj-peer-user__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dj-text);
}

.dj-peer-user__decks {
    padding: 0 0.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dj-peer-deck__summary {
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
}

.dj-peer-deck__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-left: auto;
}

.dj-track-item--peer {
    border-left: 2px solid rgba(96, 165, 250, 0.45);
}

.dj-deck-playlist__summary .dj-artist__name {
    color: var(--dj-accent-2);
}

.dj-track-item--deck-playlist {
    border-left: 2px solid rgba(196, 77, 255, 0.35);
}


.dj-admin-playlist-user__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 0 0.5rem;
}

.dj-admin-playlists-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.dj-admin-playlists {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dj-admin-playlist-user {
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    overflow: hidden;
}

.dj-admin-playlist-user__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.dj-admin-playlist-user__summary::-webkit-details-marker {
    display: none;
}

.dj-admin-playlist-user__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1rem;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.35), rgba(196, 77, 255, 0.2));
    color: var(--dj-accent-2);
    flex-shrink: 0;
}

.dj-admin-playlist-user__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 8rem;
}

.dj-admin-playlist-user__name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dj-text);
}

.dj-admin-playlist-user__counts {
    font-size: 0.8125rem;
    color: var(--dj-muted);
}

.dj-admin-playlist-user__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
}

.dj-admin-playlist-user__chevron,
.dj-dock__chevron {
    margin-left: auto;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--dj-muted);
    border-bottom: 2px solid var(--dj-muted);
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.dj-admin-playlist-user[open] .dj-admin-playlist-user__chevron,
.dj-dock--admin[open] .dj-dock__chevron {
    transform: rotate(45deg);
}

.dj-admin-playlist-user__body {
    padding: 0 1.15rem 1.15rem;
    border-top: 1px solid var(--dj-border);
}

.dj-dock-bar--admin {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.dj-dock--admin {
    min-height: auto;
    padding: 0;
    overflow: hidden;
}

.dj-dock--admin .dj-dock__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    margin: 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.dj-dock--admin .dj-dock__summary::-webkit-details-marker {
    display: none;
}

.dj-dock--admin .dj-dock__title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.dj-dock--admin .dj-dock__body {
    padding: 0 0.85rem 0.85rem;
}

.dj-dock-queue--admin {
    max-height: 280px;
}

.dj-dock-item--readonly {
    cursor: default;
}

.dj-dock-item--readonly .dj-dock-item__body--static {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: default;
    text-align: left;
    min-width: 0;
}

.dj-dock-item__index {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--dj-muted);
    min-width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.dj-cat-tag--inline {
    font-size: 0.65rem;
    padding: 0.05rem 0.35rem;
    vertical-align: baseline;
}

/* Contract & betaling */
.dj-contract-layout {
    display: grid;
    gap: 1.5rem;
    width: 100%;
    max-width: none;
    margin: 0;
    grid-template-areas:
        "actions"
        "form"
        "summary"
        "acties";
}

.dj-contract-layout__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.dj-contract-layout__actions form {
    margin: 0;
}

.dj-contract-layout__actions .dj-btn {
    width: auto;
    white-space: nowrap;
}

.dj-contract-form-column {
    grid-area: form;
}

.dj-contract-acties {
    grid-area: acties;
}

@media (min-width: 900px) {
    .dj-contract-layout {
        grid-template-columns: 1fr 320px;
        grid-template-areas:
            "actions actions"
            "form summary"
            "acties acties";
        align-items: start;
    }
}

.dj-contract-form__actions {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dj-border);
}

.dj-contract-acties__title {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.dj-contract-acties__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dj-contract-acties__item {
    margin: 0;
    padding: 0.35rem 0;
    font-size: 0.8125rem;
    color: var(--dj-muted);
    line-height: 1.45;
}

.dj-contract-acties__item--paid {
    color: #86efac;
}

.dj-contract-acties__resend {
    display: inline;
    margin: 0 0 0 0.35rem;
}

.dj-contract-acties__resend-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: inherit;
    color: #f472b6;
    text-decoration: underline;
    cursor: pointer;
    vertical-align: baseline;
}

.dj-contract-acties__resend-link:hover {
    color: #fbcfe8;
}

.dj-contract-acties__item--empty {
    font-style: italic;
}

.dj-contract-acties__tikkie {
    margin: 0.85rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--dj-border);
}

/* Geen pijltjes in number inputs (contract aantal) */
.dj-input--no-spinner::-webkit-outer-spin-button,
.dj-input--no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dj-input--no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}

.dj-contract-travel-total {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--dj-muted);
}

.dj-contract-travel-total strong {
    color: #c4b5fd;
    font-weight: 600;
}

.dj-contract-summary {
    grid-area: summary;
    background: var(--dj-surface);
    border: 1px solid var(--dj-border);
    border-radius: var(--dj-radius);
    padding: 1.25rem 1.35rem;
}

.dj-contract-summary h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.dj-contract-summary__note {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--dj-muted);
}

.dj-contract-summary__btw-note {
    margin: -0.35rem 0 1rem;
    font-size: 0.75rem;
    color: var(--dj-muted);
    line-height: 1.4;
}

.dj-contract-summary__section {
    margin: 0.85rem 0 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dj-muted);
}

.dj-contract-summary__section:first-of-type {
    margin-top: 0;
}

.dj-contract-summary__list--total {
    margin-bottom: 0.25rem;
}

.dj-contract-summary__list {
    margin: 0;
}

.dj-contract-summary__list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    font-size: 0.9rem;
}

.dj-contract-summary__list dt {
    margin: 0;
    color: var(--dj-muted);
    font-weight: 500;
}

.dj-contract-summary__list dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.dj-contract-summary__divider {
    height: 1px;
    background: var(--dj-border);
    margin: 0.5rem 0;
}

.dj-contract-summary__highlight dd {
    color: var(--dj-accent);
    font-size: 1.05rem;
}

.dj-contract-summary__sent {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--dj-muted);
}

.dj-contract-summary__paid {
    color: #86efac;
}

.dj-contract-summary__tikkie {
    margin: 0.75rem 0 0;
}