.upload-zone {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-8);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.42));
    text-align: center;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.upload-zone.is-dragover {
    border-color: rgba(29, 90, 72, 0.42);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(236, 245, 241, 0.82));
    transform: translateY(-1px);
}

.upload-progress {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(56, 74, 69, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(236, 245, 241, 0.76));
}

.progress-meta {
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.progress-track,
.progress-track-shell {
    width: 100%;
    height: 0.7rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgba(17, 24, 39, 0.08);
    overflow: hidden;
    position: relative;
}

.progress-track::-webkit-progress-bar {
    background: rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-pill);
}

.progress-track::-webkit-progress-value {
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #1f2937, #526173);
}

.progress-track::-moz-progress-bar {
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #1f2937, #526173);
}

.progress-track-bar {
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(29, 90, 72, 0.98), rgba(77, 145, 120, 0.92)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
    box-shadow: 0 0 24px rgba(29, 90, 72, 0.2);
    transition: width 180ms ease;
}