.ds-upload {
    --ds-ink: #173d36;
    --ds-muted: #405e57;
    --ds-teal: #006550;
    --ds-action: #c1145a;
    --ds-action-hover: #a4104d;
    --ds-action-shadow: #880e3f;
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    margin: 32px auto;
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid #d4e4de;
    border-radius: 24px;
    background: #fff;
    color: var(--ds-ink);
    box-shadow: 0 12px 42px rgb(23 61 54 / 7%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 22px;
    line-height: 1.55;
    text-align: center;
}

.ds-upload *,
.ds-upload *::before,
.ds-upload *::after {
    box-sizing: border-box;
}

.ds-upload [hidden] {
    display: none !important;
}

.ds-upload .ds-intro {
    margin: 0 0 28px;
}

.ds-upload .ds-intro h2 {
    margin: 0 0 12px;
    color: var(--ds-ink);
    font-family: inherit;
    font-size: clamp(30px, 5vw, 40px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ds-upload .ds-intro p,
.ds-upload [data-ds-help] {
    margin: 0;
    color: var(--ds-muted);
    font-family: inherit;
    font-size: 22px;
    line-height: 1.5;
}

.ds-upload [data-ds-input] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ds-upload .ds-name-field {
    margin: 0 0 28px;
    text-align: left;
}

.ds-upload .ds-name-field label {
    display: block;
    margin: 0 0 10px;
    color: var(--ds-ink);
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}

.ds-upload .ds-name-field label span {
    color: var(--ds-muted);
    font-size: 19px;
    font-weight: 500;
}

.ds-upload [data-ds-name] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 72px;
    margin: 0;
    padding: 16px 18px;
    border: 2px solid #68887c;
    border-radius: 12px;
    background: #fff;
    color: var(--ds-ink);
    box-shadow: none;
    font-family: inherit;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.45;
}

.ds-upload [data-ds-name]::placeholder {
    color: #5c746b;
    opacity: 1;
}

.ds-upload [data-ds-name]:focus {
    border-color: var(--ds-teal);
    outline: 3px solid var(--ds-teal);
    outline-offset: 3px;
}

.ds-upload [data-ds-name][aria-invalid="true"] {
    border-color: #a33c22;
    background: #fffaf6;
}

.ds-upload [data-ds-name][aria-invalid="true"]:focus {
    outline-color: #a33c22;
}

.ds-upload [data-ds-name]:disabled {
    border-color: #b0c8bd;
    background: #edf3ef;
    color: #36554b;
    -webkit-text-fill-color: #36554b;
    cursor: wait;
    opacity: 1;
}

.ds-upload .ds-name-error {
    margin: 12px 0 0;
    color: #8b321a;
    font-family: inherit;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.45;
}

.ds-upload [data-ds-button],
.ds-upload [data-ds-retry] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 112px;
    margin: 0;
    padding: 24px;
    border: 2px solid transparent;
    border-radius: 18px;
    background: var(--ds-action);
    color: #fff;
    box-shadow: 0 6px 0 var(--ds-action-shadow);
    font-family: inherit;
    font-size: clamp(30px, 5.5vw, 40px);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.ds-upload [data-ds-button] svg {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    margin: 0;
}

.ds-upload [data-ds-button]:hover,
.ds-upload [data-ds-retry]:hover {
    background: var(--ds-action-hover);
    color: #fff;
}

.ds-upload [data-ds-button]:focus-visible,
.ds-upload [data-ds-retry]:focus-visible {
    outline: 4px solid #173d36;
    outline-offset: 6px;
}

.ds-upload [data-ds-button]:active,
.ds-upload [data-ds-retry]:active {
    box-shadow: 0 2px 0 var(--ds-action-shadow);
}

.ds-upload [data-ds-button]:disabled,
.ds-upload [data-ds-retry]:disabled {
    background: #e0ebe6;
    border-color: #b0c8bd;
    color: #36554b;
    box-shadow: none;
    cursor: wait;
    opacity: 1;
}

.ds-upload [data-ds-help] {
    margin-top: 24px;
    font-size: 19px;
}

.ds-upload .ds-privacy {
    margin: 28px 0 0;
    color: var(--ds-muted);
    font-family: inherit;
    font-size: 17px;
    line-height: 1.5;
}

.ds-upload [data-ds-status] {
    margin: 26px 0 0;
    padding: 18px 20px;
    border: 2px solid transparent;
    border-radius: 14px;
    color: var(--ds-ink);
    font-size: 24px;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ds-upload [data-ds-status]:empty {
    display: none;
}

.ds-upload [data-ds-status]:focus {
    outline: 3px solid #173d36;
    outline-offset: 3px;
}

.ds-upload[data-state="busy"] [data-ds-status] {
    background: #edf5f2;
    border-color: #c2d9cf;
}

.ds-upload[data-state="success"] [data-ds-status] {
    background: #e9f6ec;
    border-color: #9ac8a4;
    color: #1c5930;
}

.ds-upload[data-state="partial"] [data-ds-status],
.ds-upload[data-state="error"] [data-ds-status] {
    background: #fff4e7;
    border-color: #d2a46a;
    color: #704312;
}

.ds-upload .ds-progress-area {
    margin-top: 24px;
}

.ds-upload [data-ds-progress] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 18px;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: #e0ebe6;
    color: var(--ds-teal);
}

.ds-upload [data-ds-progress]::-webkit-progress-bar {
    border-radius: 20px;
    background: #e0ebe6;
}

.ds-upload [data-ds-progress]::-webkit-progress-value {
    border-radius: 20px;
    background: var(--ds-teal);
}

.ds-upload [data-ds-progress]::-moz-progress-bar {
    border-radius: 20px;
    background: var(--ds-teal);
}

.ds-upload [data-ds-progress-text] {
    margin: 10px 0 0;
    color: var(--ds-muted);
    font-size: 20px;
}

.ds-upload [data-ds-results] {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.ds-upload [data-ds-results]:empty {
    display: none;
}

.ds-upload [data-ds-results] li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 16px 0;
    border-top: 1px solid #dce7e1;
    font-size: 18px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ds-upload .ds-file-name {
    color: var(--ds-muted);
}

.ds-upload .ds-file-message {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ds-upload [data-ds-results] li[data-state="success"] .ds-file-message {
    color: #1c5930;
}

.ds-upload [data-ds-results] li[data-state="error"] .ds-file-message {
    color: #8b321a;
}

.ds-upload [data-ds-retry] {
    min-height: 72px;
    margin-top: 24px;
    padding: 18px;
    border: 2px solid var(--ds-action);
    border-radius: 14px;
    background: #fff;
    color: var(--ds-action);
    box-shadow: none;
    font-size: 23px;
    font-weight: 700;
}

.ds-upload noscript p {
    padding: 18px;
    border: 2px solid #d2a46a;
    border-radius: 14px;
    background: #fff4e7;
    color: #704312;
    font-size: 22px;
}

@media (max-width: 420px) {
    .ds-upload {
        margin: 16px auto;
        padding: 24px 18px;
        border-radius: 18px;
    }

    .ds-upload [data-ds-button] {
        gap: 10px;
        padding: 20px 14px;
    }

    .ds-upload [data-ds-button] svg {
        width: 32px;
        height: 32px;
    }

    .ds-upload [data-ds-status] {
        padding: 16px 12px;
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-upload [data-ds-button],
    .ds-upload [data-ds-retry] {
        transition: none;
    }
}

@media (forced-colors: active) {
    .ds-upload [data-ds-button],
    .ds-upload [data-ds-retry],
    .ds-upload [data-ds-status] {
        border: 2px solid ButtonText;
    }
}