.pet-media-storage-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pet-media-upload-open {
    min-width: 142px;
    height: 29px;
    border-color: #2f7761;
    background: linear-gradient(#f5fffb, #bde5d6);
    color: #174e3d;
    font-weight: bold;
}

.pet-media-upload-open:not(:disabled) {
    box-shadow: 0 0 0 2px rgba(65, 143, 118, .13);
    cursor: pointer;
}

.pet-media-upload-open:disabled {
    border-color: #a4ada9;
    background: #e4e8e6;
    color: #777;
    cursor: default;
}

.pet-media-upload-overlay[hidden] {
    display: none !important;
}

.pet-media-upload-overlay {
    position: absolute;
    inset: 0;
    z-index: 3100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 35, 45, .58);
}

.pet-media-upload-dialog {
    width: 780px;
    min-height: 500px;
    border: 2px solid #417866;
    background: #f8fffc;
    box-shadow: 0 12px 38px rgba(0, 0, 0, .38);
    color: #183449;
}

.pet-media-upload-head {
    position: relative;
    padding: 15px 48px 12px 18px;
    border-bottom: 1px solid #a9c5bc;
    background: #dff3ec;
}

.pet-media-upload-head h2 {
    margin: 0 0 4px;
    color: #24594d;
    font-size: 20px;
}

.pet-media-upload-head p {
    margin: 0;
    color: #4a625b;
}

.pet-media-upload-close {
    position: absolute;
    right: 10px;
    top: 9px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #31594f;
    font-size: 24px;
    line-height: 30px;
}

.pet-media-upload-body {
    display: grid;
    grid-template-columns: 326px 1fr;
    gap: 18px;
    min-height: 366px;
    padding: 16px 20px 10px;
}

.pet-media-upload-qr-column {
    text-align: center;
}

.pet-media-upload-qr-frame {
    position: relative;
    width: 304px;
    height: 304px;
    padding: 7px;
    border: 1px solid #93aaa2;
    background: #fff;
}

.pet-media-upload-qr-frame canvas {
    display: block;
    max-width: 288px;
    max-height: 288px;
    margin: 0 auto;
}

.pet-media-upload-qr-loading {
    position: absolute;
    inset: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #f1f5f3;
    color: #5a6b65;
    font-weight: bold;
}

.pet-media-upload-qr-loading[hidden] {
    display: none !important;
}

.pet-media-upload-qr-loading.error {
    background: #fff1f1;
    color: #940020;
}

.pet-media-upload-countdown {
    width: 304px;
    min-height: 34px;
    padding: 7px 8px;
    border: 1px solid #6c9b8b;
    border-top: 0;
    background: #e9fff1;
    color: #22603c;
    font-size: 15px;
    font-weight: bold;
}

.pet-media-upload-countdown.expired {
    border-color: #c97979;
    background: #fff0f0;
    color: #940020;
}

.pet-media-upload-info {
    min-width: 0;
}

.pet-media-upload-pet {
    padding: 10px 12px;
    border-left: 4px solid #3e8e72;
    background: #edf8f4;
    line-height: 21px;
}

.pet-media-upload-pet span,
.pet-media-upload-pet strong {
    display: block;
}

.pet-media-upload-pet strong {
    color: #174f3d;
    font-size: 17px;
}

.pet-media-upload-steps {
    margin: 13px 0;
    padding-left: 24px;
    color: #3c505a;
    line-height: 23px;
}

.pet-media-upload-message {
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid #c3d1cc;
    background: #f3f6f5;
    color: #53636a;
    line-height: 18px;
}

.pet-media-upload-message.success {
    border-color: #65a97e;
    background: #eafff0;
    color: #1e6538;
    font-weight: bold;
}

.pet-media-upload-message.error {
    border-color: #c97979;
    background: #fff0f0;
    color: #9a0020;
    font-weight: bold;
}

.pet-media-upload-direct {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 6px;
    margin-top: 12px;
}

.pet-media-upload-direct label {
    grid-column: 1 / -1;
    color: #5a686f;
}

.pet-media-upload-direct input {
    min-width: 0;
    height: 28px;
    padding: 3px 7px;
    border: 1px solid #879b93;
    background: #fff;
    color: #3c4f58;
}

.pet-media-upload-direct button {
    height: 28px;
    padding: 2px 10px;
}

.pet-media-upload-direct a {
    grid-column: 1 / -1;
    width: fit-content;
    color: #166b91;
}

.pet-media-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 11px 20px 15px;
    border-top: 1px solid #d5e2dd;
}

.pet-media-upload-actions button {
    min-width: 122px;
    height: 30px;
}

.pet-media-upload-done {
    border-color: #397565;
    background: linear-gradient(#effff9, #bde2d5);
    font-weight: bold;
}

@media (max-width: 900px) {
    .pet-media-upload-dialog {
        width: min(780px, calc(100vw - 24px));
        max-height: calc(100vh - 24px);
        overflow: auto;
    }

    .pet-media-upload-body {
        grid-template-columns: 1fr;
    }

    .pet-media-upload-qr-column {
        margin: 0 auto;
    }
}