@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --angle: 0deg;
  --border: 4px;
  --radius: 8px;
  --speed: 4s;
  --teal-1: #00b8a5;
  --teal-2: #21826D;
  --teal-3: #047388;
  --teal-4: #045a88;
}

@keyframes spin-gradient {
  to { --angle: 360deg; }
}

.upload-area {
    width: 100%;
    height: 100%;
    min-height: 160px;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #303030;
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    position: relative;
    z-index: 0;
}

/* Animated gradient border */
.upload-area::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--border);
    background: conic-gradient(
        from var(--angle),
        var(--teal-1),
        var(--teal-2),
        var(--teal-3),
        var(--teal-4),
        var(--teal-3),
        var(--teal-2),
        var(--teal-1)
    );
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin-gradient var(--speed) linear infinite;
}

@supports not (mask-composite: exclude) {
    .upload-area {
        border: var(--border) solid transparent;
        background:
            linear-gradient(#303030, #303030) padding-box,
            linear-gradient(90deg, var(--teal-1), var(--teal-2), var(--teal-3), var(--teal-4)) border-box;
    }
    .upload-area::before { display: none; }
}

/* Maintain card body height during upload flow */
.upload-card-body {
    min-height: 400px;
}