.ob-guest-body,
.ob-guest-body *,
.ob-guest-body *::before,
.ob-guest-body *::after,
.artist-onboarding,
.artist-onboarding *,
.artist-onboarding *::before,
.artist-onboarding *::after,
.profile-onboarding,
.profile-onboarding *,
.profile-onboarding *::before,
.profile-onboarding *::after {
    box-sizing: border-box;
}

.artist-onboarding [hidden],
.profile-onboarding [hidden],
.ob-guest-body [hidden] {
    display: none !important;
}

.artist-onboarding,
.ob-guest-body {
    color: #f5f0e6;
}

.ob-guest-body {
    margin: 0;
    min-height: 100vh;
    background: #0a0704;
    font-family: "Open Sans", sans-serif;
}

.ob-guest-main {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 20px 64px;
}

.artist-onboarding {
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 8px 48px;
}

.profile-card h2,
.ob-card h2,
.ob-license h2 {
    color: #ffd700;
    font-weight: 700;
}

.ob-header h1 {
    font-size: 32px;
    margin: 6px 0 8px;
}

.ob-kicker,
.ob-lead,
.ob-hint,
.ob-card small,
.ob-license p {
    color: #b9b1a3;
    line-height: 1.5;
}

.ob-progress {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 22px 0;
    flex-wrap: wrap;
}

.ob-progress li {
    flex: 1 1 120px;
}

.ob-progress a,
.ob-progress span {
    display: block;
    text-align: center;
    padding: 10px 8px;
    border-radius: 999px;
    border: 1px solid #3a3326;
    color: #8d8678;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.ob-progress .is-current a,
.ob-progress .is-current span {
    background: linear-gradient(135deg, #d4af37, #ffd700);
    color: #1a1408;
    border-color: transparent;
}

.ob-progress .is-done a,
.ob-progress .is-done span {
    border-color: rgba(212, 175, 55, 0.7);
    color: #ffd700;
}

.ob-card,
.profile-onboarding .profile-card {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 24px;
    padding: 28px;
    container-type: inline-size;
}

.profile-onboarding .profile-card + .profile-card {
    margin-top: 24px;
}

.artist-onboarding form.ob-card,
.profile-onboarding form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.artist-onboarding form.ob-card > *,
.profile-onboarding form > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.profile-onboarding form > .ob-btn,
.artist-onboarding form.ob-card > .ob-btn {
    width: auto;
    align-self: flex-start;
}

.ob-block + .ob-block {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid #2a2a2a;
}

.ob-section-label {
    margin: 0 0 14px;
    color: #ffd700;
    font-size: 15px;
    font-weight: 700;
}

.ob-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    width: 100%;
    margin: 0 0 16px;
}

.ob-grid--media {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    align-items: start;
    margin-bottom: 0;
}

.ob-field,
.ob-kind,
.ob-photo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0 0 16px;
    min-width: 0;
    width: 100%;
}

.ob-grid > .ob-field,
.ob-grid > .ob-photo,
.ob-block > .ob-field:last-child,
.ob-block > .ob-grid:last-child {
    margin-bottom: 0;
}

.ob-label {
    color: #ffd700;
    font-size: 13px;
    font-weight: 700;
}

.ob-optional {
    color: #8d8678;
    font-weight: 500;
}

.profile-onboarding .profile-card h2,
.profile-onboarding .profile-card h3,
.ob-card h2 {
    font-family: "Open Sans", sans-serif;
    line-height: 1.25;
    margin: 0 0 18px;
}

.artist-onboarding .form-control,
.profile-onboarding .form-control,
.ob-guest-body .form-control {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 48px;
    margin: 0;
    background-color: #0c0c0c;
    border: 1px solid #3a3326;
    border-radius: 12px;
    color: #fff;
    padding: 0 14px;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color-scheme: dark;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.artist-onboarding .form-control::placeholder,
.profile-onboarding .form-control::placeholder,
.ob-guest-body .form-control::placeholder {
    color: #8d8678;
    opacity: 1;
}

.artist-onboarding .form-control:focus,
.profile-onboarding .form-control:focus,
.ob-guest-body .form-control:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.12);
}

.artist-onboarding .form-control:read-only,
.profile-onboarding .form-control:read-only,
.ob-guest-body .form-control:read-only {
    color: #c8c0b4;
    background-color: #14110d;
}

.artist-onboarding select.form-control,
.profile-onboarding select.form-control,
.ob-guest-body select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffd700' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.artist-onboarding select.form-control option,
.profile-onboarding select.form-control option,
.ob-guest-body select.form-control option {
    background: #14110d;
    color: #fff;
}

.artist-onboarding input[type="date"].form-control,
.profile-onboarding input[type="date"].form-control,
.ob-guest-body input[type="date"].form-control {
    color-scheme: dark;
}

.artist-onboarding input[type="date"].form-control::-webkit-calendar-picker-indicator,
.profile-onboarding input[type="date"].form-control::-webkit-calendar-picker-indicator,
.ob-guest-body input[type="date"].form-control::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.85;
}

.artist-onboarding textarea.form-control,
.profile-onboarding textarea.form-control,
.ob-guest-body textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

.artist-onboarding input[type="file"].form-control,
.profile-onboarding input[type="file"].form-control,
.ob-guest-body input[type="file"].form-control {
    height: auto;
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.4;
}

.artist-onboarding .ob-choice input,
.profile-onboarding .ob-choice input,
.ob-guest-body .ob-choice input,
.artist-onboarding .ob-license-item input,
.profile-onboarding .ob-license-item input,
.ob-guest-body .ob-license-item input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 18px;
    accent-color: #ffd700;
    cursor: pointer;
}

.ob-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #f5f0e6;
    width: auto;
}

.ob-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}

.ob-kind,
fieldset.ob-field {
    border: 0;
    padding: 0;
    min-inline-size: 0;
}

fieldset.ob-field > .form-control,
fieldset.ob-field > .ob-error,
fieldset.ob-field > .ob-zone {
    width: 100%;
}

.ob-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ob-zone {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
    gap: 12px 20px;
    align-items: end;
    margin: 0;
    width: 100%;
}

.ob-zone > .ob-field {
    margin: 0;
}

.ob-pill span,
.ob-choice span {
    cursor: pointer;
}

.ob-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #3a3326;
    border-radius: 999px;
    padding: 8px 12px;
}

.ob-pill:has(input:checked) {
    border-color: #ffd700;
    color: #ffd700;
}

.ob-photo {
    align-items: flex-start;
    margin: 0;
}

.ob-photo .avatar-preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.ob-photo .avatar-img,
.ob-photo .avatar-placeholder,
.ob-photo .change-avatar-btn {
    margin: 0;
}

.ob-field small,
.ob-photo .ob-hint,
.ob-block > .ob-hint {
    margin: 0;
    color: #8d8678;
    font-size: 12px;
    line-height: 1.45;
}

.profile-onboarding .form-actions,
.ob-actions {
    width: 100%;
}

.ob-pin-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ob-pin-wrap .form-control {
    flex: 1;
}

.ob-pin-mark {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #14301c;
    border: 1px solid rgba(125, 255, 168, 0.5);
    flex: none;
    position: relative;
}

.ob-pin-mark::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 6px;
    width: 6px;
    height: 11px;
    border: solid #7dffa8;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ob-pin-notice {
    margin: 4px 0 0;
}

.ob-pin-notice.is-pending {
    color: #e8c670;
}

.ob-error {
    color: #ff8d8d;
    font-size: 13px;
}

.ob-note,
.ob-banner,
.ob-flash {
    border-radius: 16px;
    padding: 14px 16px;
    margin: 12px 0;
}

.ob-note {
    background: #1a160f;
    color: #e8c670;
}

.ob-banner,
.ob-flash--bad {
    background: #2a160f;
    color: #ffd7a8;
    border: 1px solid rgba(255, 170, 80, 0.35);
}

.ob-flash--ok {
    background: #102216;
    color: #b6f0c8;
    border: 1px solid rgba(80, 200, 120, 0.35);
}

.ob-license {
    max-height: 420px;
    overflow: auto;
    border: 1px solid #3a3326;
    border-radius: 16px;
    padding: 18px;
    background: #0c0c0c;
}

.ob-license-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 14px 0;
    color: #f5f0e6;
}

.ob-license-item span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ob-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.ob-btn {
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 12px 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #d4af37, #ffd700);
    color: #1a1408;
    text-decoration: none;
}

.ob-btn--ghost {
    background: transparent;
    color: #ffd700;
    border: 1px solid rgba(212, 175, 55, 0.6);
}

.ob-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.ob-status a {
    text-decoration: none;
    border-radius: 999px;
    padding: 8px 12px;
    border: 1px solid #3a3326;
    color: #d9d0c1;
    font-size: 13px;
}

.ob-status a.is-done {
    color: #8ee0a8;
    border-color: rgba(80, 200, 120, 0.45);
}

.ob-danger {
    border-color: rgba(255, 100, 100, 0.35);
}

.change-avatar-btn {
    margin-top: 8px;
    background: transparent;
    color: #ffd700;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
}

.avatar-img,
.avatar-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a160f;
    color: #ffd700;
    font-size: 28px;
}

.ob-genre-select:not(.tomselected) {
    min-height: 46px;
}

.profile-onboarding .ts-wrapper,
.artist-onboarding .ts-wrapper,
.ob-guest-body .ts-wrapper {
    width: 100%;
}

.profile-onboarding .ts-control,
.artist-onboarding .ts-control,
.ob-guest-body .ts-control {
    min-height: 48px;
    padding: 8px 12px;
    background: #0c0c0c;
    border: 1px solid #3a3326;
    border-radius: 12px;
    box-shadow: none;
    color: #fff;
    font-size: 15px;
}

.profile-onboarding .ts-wrapper.focus .ts-control,
.profile-onboarding .ts-wrapper.dropdown-active .ts-control,
.artist-onboarding .ts-wrapper.focus .ts-control,
.artist-onboarding .ts-wrapper.dropdown-active .ts-control,
.ob-guest-body .ts-wrapper.focus .ts-control,
.ob-guest-body .ts-wrapper.dropdown-active .ts-control {
    border-color: #ffd700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.profile-onboarding .ts-control > input,
.artist-onboarding .ts-control > input,
.ob-guest-body .ts-control > input {
    width: auto;
    min-width: 8rem;
    flex: 1 1 8rem;
    min-height: 0;
    margin: 0;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    line-height: 1.4;
}

.profile-onboarding .ts-control > input::placeholder,
.artist-onboarding .ts-control > input::placeholder,
.ob-guest-body .ts-control > input::placeholder {
    color: #8d8678;
}

.profile-onboarding .ts-wrapper.multi .ts-control > div.item,
.artist-onboarding .ts-wrapper.multi .ts-control > div.item,
.ob-guest-body .ts-wrapper.multi .ts-control > div.item {
    margin: 2px 6px 2px 0;
    background: rgba(255, 215, 0, 0.16) !important;
    color: #ffd700 !important;
    border: 0 !important;
    border-radius: 999px !important;
    text-shadow: none;
}

.profile-onboarding .ts-wrapper.plugin-remove_button .item .remove,
.artist-onboarding .ts-wrapper.plugin-remove_button .item .remove,
.ob-guest-body .ts-wrapper.plugin-remove_button .item .remove {
    border-left: 1px solid rgba(255, 215, 0, 0.28) !important;
    color: #ffd700 !important;
}

.profile-onboarding .ts-dropdown,
.artist-onboarding .ts-dropdown,
.ob-guest-body .ts-dropdown {
    z-index: 280;
    background: #14110d;
    border: 1px solid #3a3326;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    color: #fff;
}

.profile-onboarding .ts-dropdown-content,
.artist-onboarding .ts-dropdown-content,
.ob-guest-body .ts-dropdown-content {
    max-height: 260px;
    overflow-y: auto;
}

.profile-onboarding .ts-dropdown-content,
.profile-onboarding .ts-dropdown .option,
.profile-onboarding .ts-dropdown .no-results,
.artist-onboarding .ts-dropdown-content,
.artist-onboarding .ts-dropdown .option,
.artist-onboarding .ts-dropdown .no-results,
.ob-guest-body .ts-dropdown-content,
.ob-guest-body .ts-dropdown .option,
.ob-guest-body .ts-dropdown .no-results {
    background: #14110d;
    color: #f5f0e6;
}

.profile-onboarding .ts-dropdown .option:hover,
.profile-onboarding .ts-dropdown .option.active,
.artist-onboarding .ts-dropdown .option:hover,
.artist-onboarding .ts-dropdown .option.active,
.ob-guest-body .ts-dropdown .option:hover,
.ob-guest-body .ts-dropdown .option.active {
    background: rgba(255, 215, 0, 0.12);
    color: #ffd700;
}

@container (max-width: 640px) {
    .ob-grid,
    .ob-grid--media,
    .ob-zone {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .ob-guest-main {
        padding: 20px 14px 48px;
    }

    .artist-onboarding {
        padding: 4px 0 32px;
    }

    .ob-grid,
    .ob-grid--media,
    .ob-zone {
        grid-template-columns: 1fr;
    }

    .ob-progress {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .ob-progress li {
        flex: 1 1 0;
        min-width: 0;
    }

    .ob-progress a,
    .ob-progress span {
        padding: 8px 4px;
        font-size: 12px;
        white-space: nowrap;
    }

    .ob-card,
    .profile-onboarding .profile-card {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .ob-header h1 {
        font-size: 26px;
    }

    .artist-onboarding .form-control,
    .profile-onboarding .form-control,
    .ob-guest-body .form-control {
        font-size: 16px;
    }

    .ob-actions,
    .profile-onboarding .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ob-actions .ob-btn,
    .profile-onboarding .form-actions .btn-primary,
    .profile-onboarding .form-actions .btn-secondary {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}