.wtzm-file-dropzone {
    --wtzm-upload-accent: #0068e8;
    --wtzm-upload-accent-soft: #eaf3ff;
    --wtzm-upload-border: #cbd5e1;
    --wtzm-upload-ink: #172033;
    --wtzm-upload-muted: #64748b;
    --wtzm-upload-surface: #ffffff;
    --wtzm-upload-subtle: #f8fafc;
    --wtzm-upload-danger: #b42318;
    --wtzm-upload-danger-soft: #fff1f0;
    display: grid;
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--wtzm-upload-border);
    border-radius: .85rem;
    color: var(--wtzm-upload-ink);
    background: var(--wtzm-upload-surface);
    box-shadow: 0 8px 24px rgb(15 23 42 / .055);
    font: inherit;
}

.wtzm-file-dropzone__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    margin: -1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.wtzm-file-dropzone__picker {
    display: grid;
    min-block-size: 9.5rem;
    min-inline-size: 0;
    place-items: center;
    align-content: center;
    gap: .5rem;
    padding: 1.25rem;
    border: 2px dashed var(--wtzm-upload-border);
    border-radius: .7rem;
    margin: .55rem;
    color: var(--wtzm-upload-ink);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--wtzm-upload-accent) 8%, transparent), transparent 52%),
        var(--wtzm-upload-subtle);
    cursor: pointer;
    text-align: center;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.wtzm-file-dropzone__picker:is(:hover, :focus-visible),
.wtzm-file-dropzone:has(.wtzm-file-dropzone__input:focus-visible) .wtzm-file-dropzone__picker {
    border-color: var(--wtzm-upload-accent);
    outline: 3px solid color-mix(in srgb, var(--wtzm-upload-accent) 22%, transparent);
    outline-offset: -2px;
}

.wtzm-file-dropzone__icon {
    display: grid;
    inline-size: 3rem;
    block-size: 3rem;
    place-items: center;
    border-radius: 999px;
    color: var(--wtzm-upload-accent);
    background: var(--wtzm-upload-accent-soft);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.wtzm-file-dropzone__icon svg {
    inline-size: 1.45rem;
    block-size: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.wtzm-file-dropzone__prompt {
    display: grid;
    min-inline-size: 0;
    gap: .1rem;
}

.wtzm-file-dropzone__prompt strong {
    font-size: .95rem;
    font-weight: 700;
}

.wtzm-file-dropzone__prompt span {
    color: var(--wtzm-upload-accent);
    font-size: .9rem;
    font-weight: 650;
}

.wtzm-file-dropzone__guidance {
    max-inline-size: 34rem;
    color: var(--wtzm-upload-muted);
    font-size: .78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.wtzm-file-dropzone__notice {
    min-block-size: 1.5rem;
    padding: .1rem .9rem .6rem;
    color: var(--wtzm-upload-muted);
    font-size: .8rem;
    line-height: 1.5;
}

.wtzm-file-dropzone__list {
    display: grid;
    min-inline-size: 0;
    gap: .55rem;
    padding: 0 .65rem .65rem;
    margin: 0;
    list-style: none;
}

.wtzm-file-dropzone__list:empty {
    display: none;
}

.wtzm-file-item {
    display: grid;
    min-inline-size: 0;
    grid-template-columns: 2.7rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .7rem;
    border: 1px solid var(--wtzm-upload-border);
    border-radius: .7rem;
    background: var(--wtzm-upload-subtle);
}

.wtzm-file-item__type {
    display: grid;
    inline-size: 2.7rem;
    block-size: 2.7rem;
    place-items: center;
    overflow: hidden;
    border-radius: .65rem;
    color: var(--wtzm-upload-accent);
    background: var(--wtzm-upload-accent-soft);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .025em;
}

.wtzm-file-item__type:is(img) {
    object-fit: cover;
}

.wtzm-file-item__copy {
    display: grid;
    min-inline-size: 0;
    gap: .15rem;
}

.wtzm-file-item__copy strong {
    overflow: hidden;
    font-size: .88rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wtzm-file-item__copy small {
    color: var(--wtzm-upload-muted);
    font-size: .73rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.wtzm-file-item__state {
    color: var(--wtzm-upload-muted);
    font-size: .75rem;
    font-weight: 650;
}

.wtzm-file-item[data-state="processing"] .wtzm-file-item__state,
.wtzm-file-item[data-state="uploading"] .wtzm-file-item__state {
    color: var(--wtzm-upload-accent);
}

.wtzm-file-item[data-state="uploaded"] .wtzm-file-item__state {
    color: #067647;
}

.wtzm-file-item[data-state="error"] {
    border-color: color-mix(in srgb, var(--wtzm-upload-danger) 38%, var(--wtzm-upload-border));
    background: var(--wtzm-upload-danger-soft);
}

.wtzm-file-item[data-state="error"] .wtzm-file-item__state {
    color: var(--wtzm-upload-danger);
}

.wtzm-file-item__action {
    min-block-size: 44px;
    min-inline-size: 44px;
    border: 1px solid var(--wtzm-upload-border);
    border-radius: .6rem;
    padding: .45rem .7rem;
    color: var(--wtzm-upload-ink);
    background: var(--wtzm-upload-surface);
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    font-weight: 700;
}

.wtzm-file-item__action:is(:hover, :focus-visible) {
    border-color: var(--wtzm-upload-accent);
    color: var(--wtzm-upload-accent);
    outline: 2px solid color-mix(in srgb, var(--wtzm-upload-accent) 24%, transparent);
    outline-offset: 1px;
}

.wtzm-file-dropzone.is-dragover .wtzm-file-dropzone__picker {
    border-color: var(--wtzm-upload-accent);
    background: var(--wtzm-upload-accent-soft);
    transform: scale(.995);
}

.wtzm-file-dropzone.is-dragover .wtzm-file-dropzone__prompt strong::after {
    content: " — release to add";
    color: var(--wtzm-upload-accent);
}

.wtzm-file-dropzone.has-files .wtzm-file-dropzone__picker {
    min-block-size: 7rem;
}

.wtzm-file-dropzone.has-error {
    border-color: var(--wtzm-upload-danger);
}

.wtzm-file-dropzone.has-error .wtzm-file-dropzone__notice {
    color: var(--wtzm-upload-danger);
    font-weight: 650;
}

.wtzm-file-dropzone.is-busy {
    cursor: progress;
}

.wtzm-file-dropzone.is-busy .wtzm-file-dropzone__picker {
    pointer-events: none;
    opacity: .66;
}

.wtzm-file-dropzone.is-busy .wtzm-file-item__action {
    cursor: not-allowed;
    opacity: .55;
}

[data-theme="dark"] .wtzm-file-dropzone,
.dark .wtzm-file-dropzone {
    --wtzm-upload-accent: #7cb6ff;
    --wtzm-upload-accent-soft: #17375e;
    --wtzm-upload-border: #46516b;
    --wtzm-upload-ink: #eef2ff;
    --wtzm-upload-muted: #a8b2c7;
    --wtzm-upload-surface: #151b2b;
    --wtzm-upload-subtle: #1c2437;
    --wtzm-upload-danger: #ffb4ab;
    --wtzm-upload-danger-soft: #3b2024;
}

@media (max-width: 30rem) {
    .wtzm-file-dropzone__picker {
        min-block-size: 8.25rem;
        padding: 1rem;
    }

    .wtzm-file-item {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .wtzm-file-item__type {
        inline-size: 2.5rem;
        block-size: 2.5rem;
    }

    .wtzm-file-item__action {
        grid-column: 1 / -1;
        inline-size: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wtzm-file-dropzone__picker {
        transition: none;
    }
}