:root {
    --upload-overlay: rgba(3, 7, 6, .78);
    --upload-dialog: linear-gradient(145deg, #171615, #2b2020);
    --upload-surface: rgba(255, 255, 255, .055);
    --upload-surface-strong: rgba(255, 255, 255, .085);
    --upload-border: rgba(255, 255, 255, .14);
    --upload-text: #fffaf0;
    --upload-muted: rgba(255, 250, 240, .7);
    --upload-accent: #f3d48a;
    --upload-accent-text: #171615;
    --upload-positive: #79cbb8
}

body[data-theme="aurora"] {
    --upload-overlay: rgba(12, 34, 31, .74);
    --upload-dialog: linear-gradient(145deg, #173a35, #294f48 52%, #543846);
    --upload-surface: rgba(255, 250, 240, .09);
    --upload-surface-strong: rgba(255, 250, 240, .14);
    --upload-border: rgba(255, 238, 203, .24);
    --upload-text: #fffaf0;
    --upload-muted: rgba(255, 250, 240, .8);
    --upload-accent: #f6d58a;
    --upload-accent-text: #1b2924
}

body[data-theme="dusk"] {
    --upload-overlay: rgba(4, 9, 13, .82);
    --upload-dialog: linear-gradient(145deg, #0b1820, #172b36 54%, #32182d);
    --upload-surface: rgba(219, 235, 244, .065);
    --upload-surface-strong: rgba(219, 235, 244, .11);
    --upload-border: rgba(202, 222, 233, .22);
    --upload-text: #f3fbff;
    --upload-muted: rgba(226, 240, 247, .75);
    --upload-accent: #9bd3e8;
    --upload-accent-text: #071217
}

body[data-theme="christmas"] {
    --upload-overlay: rgba(4, 20, 15, .84);
    --upload-dialog: linear-gradient(145deg, #0d2b20, #174735 55%, #5b1724);
    --upload-surface: rgba(255, 250, 240, .075);
    --upload-surface-strong: rgba(255, 250, 240, .12);
    --upload-border: rgba(255, 231, 174, .22);
    --upload-text: #fffaf0;
    --upload-muted: rgba(255, 244, 218, .76);
    --upload-accent: #f3d48a;
    --upload-accent-text: #173126
}

body.upload-open {
    overflow: hidden
}

.upload-backdrop {
    position: fixed;
    z-index: 1300;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: var(--upload-overlay);
    backdrop-filter: blur(10px)
}

.upload-backdrop[hidden] {
    display: none
}

.upload-dialog {
    width: min(760px, 100%);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    border: 1px solid var(--upload-border);
    border-radius: 25px;
    color: var(--upload-text);
    background: var(--upload-dialog);
    box-shadow: 0 32px 90px rgba(0, 0, 0, .48);
    animation: uploadIn .24s ease both
}

@keyframes uploadIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.upload-header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: grid;
    grid-template-columns: 1fr auto 42px;
    align-items: center;
    gap: 18px;
    min-height: 86px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--upload-border);
    background: color-mix(in srgb, var(--upload-dialog) 92%, transparent);
    backdrop-filter: blur(18px)
}

.upload-brand {
    display: flex;
    align-items: center;
    gap: 13px
}

.upload-brand img {
    width: 54px;
    height: 54px;
    object-fit: contain
}

.upload-brand div,
.upload-version {
    display: grid;
    gap: 2px
}

.upload-brand small,
.upload-version small {
    color: var(--upload-accent);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em
}

.upload-brand strong {
    font-size: 1rem
}

.upload-version {
    text-align: right
}

.upload-version strong {
    font-size: .84rem
}

.upload-close {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--upload-border);
    border-radius: 12px;
    color: var(--upload-text);
    background: var(--upload-surface);
    cursor: pointer
}

.upload-close svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none
}

.upload-body {
    padding: clamp(22px, 4vw, 38px)
}

.upload-loading {
    padding: 50px 20px;
    color: var(--upload-muted);
    text-align: center
}

.upload-step,
.upload-form {
    display: grid;
    gap: 20px
}

.upload-step-heading {
    display: grid;
    gap: 6px
}

.upload-step-heading p,
.upload-success>p {
    margin: 0;
    color: var(--upload-accent);
    font-size: .7rem;
    font-weight: 950;
    letter-spacing: .11em
}

.upload-step-heading h2,
.upload-success h2 {
    margin: 0;
    font-size: clamp(1.55rem, 4vw, 2.1rem);
    line-height: 1.1
}

.upload-step-heading>span,
.upload-success>span {
    color: var(--upload-muted);
    font-size: .88rem;
    line-height: 1.55
}

.upload-identity {
    display: grid;
    grid-template-columns: 50px 1fr 34px;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--upload-positive) 38%, transparent);
    border-radius: 16px;
    color: var(--upload-text);
    background: color-mix(in srgb, var(--upload-positive) 10%, transparent);
    text-align: left;
    cursor: pointer;
    transition: .18s
}

.upload-identity:hover {
    border-color: var(--upload-positive);
    transform: translateY(-1px)
}

.upload-identity>span {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 14px;
    color: #17201e;
    background: var(--upload-positive);
    font-weight: 950
}

.upload-identity div {
    display: grid;
    gap: 2px
}

.upload-identity small {
    color: var(--upload-muted);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .09em
}

.upload-identity strong {
    font-size: 1rem
}

.upload-identity p {
    margin: 0;
    color: var(--upload-accent);
    font-size: .72rem;
    font-weight: 850
}

.upload-identity i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: var(--upload-accent-text);
    background: var(--upload-accent);
    font-style: normal;
    font-weight: 950
}

.upload-assurance {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--upload-muted);
    font-size: .78rem
}

.upload-assurance svg {
    width: 18px;
    height: 18px;
    stroke: var(--upload-positive);
    fill: none;
    flex: none
}

.upload-period {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 12px
}

.upload-period label {
    display: grid;
    gap: 7px
}

.upload-period label>span,
.upload-file-group header small {
    color: var(--upload-accent);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .09em
}

.upload-period input,
.upload-period select {
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--upload-border);
    border-radius: 12px;
    color: var(--upload-text);
    background: var(--upload-surface);
    font: inherit;
    font-weight: 800;
    outline: none
}

.upload-period select option {
    color: #171615
}

.upload-period input:focus,
.upload-period select:focus {
    border-color: var(--upload-accent)
}

.upload-file-group {
    display: grid;
    gap: 10px;
    padding: 15px;
    border: 1px solid var(--upload-border);
    border-radius: 17px;
    background: var(--upload-surface)
}

.upload-file-group header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px
}

.upload-file-group header>div {
    display: grid;
    gap: 3px
}

.upload-file-group header strong {
    font-size: .87rem
}

.upload-file-group header>span {
    color: var(--upload-muted);
    font-size: .68rem
}

.upload-dropzone {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 76px;
    padding: 13px;
    border: 1px dashed color-mix(in srgb, var(--upload-accent) 46%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--upload-accent) 5%, transparent);
    cursor: pointer
}

.upload-dropzone:hover {
    background: color-mix(in srgb, var(--upload-accent) 10%, transparent)
}

.upload-dropzone input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0
}

.upload-dropzone>svg {
    width: 28px;
    height: 28px;
    stroke: var(--upload-accent);
    fill: none;
    flex: none
}

.upload-dropzone>span {
    display: grid;
    gap: 3px
}

.upload-dropzone strong {
    font-size: .84rem
}

.upload-dropzone small {
    color: var(--upload-muted);
    font-size: .7rem
}

.upload-file-list {
    display: grid;
    gap: 7px
}

.upload-file-group.is-locked {
    border-color: color-mix(in srgb, var(--upload-positive) 42%, var(--upload-border));
    background: color-mix(in srgb, var(--upload-positive) 7%, var(--upload-surface))
}

.upload-file-group.is-locked header small {
    color: var(--upload-positive)
}

.upload-locked-evidence {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-height: 76px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--upload-positive) 30%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--upload-positive) 9%, transparent)
}

.upload-create-worklog{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;border:1px solid color-mix(in srgb,var(--theme-glass-accent) 35%,transparent);border-radius:15px;background:color-mix(in srgb,var(--theme-glass-accent) 10%,transparent)}.upload-create-worklog>span{display:grid;width:48px;height:48px;place-items:center;border-radius:14px;color:var(--theme-glass-accent);background:color-mix(in srgb,var(--theme-glass-accent) 14%,transparent)}.upload-create-worklog svg{width:22px;height:22px;fill:none;stroke:currentColor}.upload-create-worklog>div{display:grid;gap:3px}.upload-create-worklog small{color:var(--theme-glass-accent);font-size:.6rem;font-weight:900;letter-spacing:.09em}.upload-create-worklog p{margin:0;color:var(--theme-glass-muted);font-size:.7rem}.upload-create-worklog button{min-height:40px;padding:0 13px;border:1px solid var(--theme-glass-accent);border-radius:11px;color:#08211c;background:var(--theme-glass-accent);font-weight:850}@media(max-width:680px){.upload-create-worklog{grid-template-columns:42px 1fr}.upload-create-worklog>span{width:42px;height:42px}.upload-create-worklog button{grid-column:1/-1;width:100%}}

.upload-locked-evidence>span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 13px;
    color: var(--upload-positive);
    background: color-mix(in srgb, var(--upload-positive) 14%, transparent)
}

.upload-locked-evidence svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor
}

.upload-locked-evidence>div {
    display: grid;
    gap: 4px
}

.upload-locked-evidence strong {
    font-size: .82rem;
    line-height: 1.35
}

.upload-locked-evidence small {
    color: var(--upload-muted);
    font-size: .68rem
}

.upload-file-list>div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--upload-surface-strong)
}

.upload-file-list svg {
    width: 18px;
    height: 18px;
    stroke: var(--upload-positive);
    fill: none
}

.upload-file-list span {
    display: grid;
    min-width: 0
}

.upload-file-list strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .73rem
}

.upload-file-list small {
    color: var(--upload-muted);
    font-size: .64rem
}

.upload-delegated {
    display: grid;
    gap: 13px;
    padding: 17px;
    border: 1px solid color-mix(in srgb, var(--upload-accent) 32%, var(--upload-border));
    border-radius: 18px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--upload-accent) 7%, var(--upload-surface)), var(--upload-surface))
}

.upload-delegated-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px
}

.upload-delegated-heading>div {
    display: grid;
    gap: 4px
}

.upload-delegated-heading p {
    margin: 0;
    color: var(--upload-accent);
    font-size: .67rem;
    font-weight: 950;
    letter-spacing: .12em
}

.upload-delegated-heading h3 {
    margin: 0;
    font-size: 1.12rem
}

.upload-delegated-heading span {
    color: var(--upload-muted);
    font-size: .72rem;
    line-height: 1.45
}

.upload-delegated-heading>b {
    flex: none;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--upload-accent);
    background: color-mix(in srgb, var(--upload-accent) 12%, transparent);
    font-size: .56rem;
    letter-spacing: .08em
}

.upload-delegated-grid {
    display: grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap: 9px
}

.upload-delegated-person {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--upload-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--upload-surface-strong) 82%, transparent);
    transition: border-color .18s ease,background .18s ease,transform .18s ease
}

.upload-delegated-person:has(input:focus-visible),
.upload-delegated-person.has-files {
    border-color: color-mix(in srgb, var(--upload-accent) 48%, var(--upload-border))
}

.upload-delegated-person>header {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 9px
}

.upload-delegated-person>header>span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: var(--upload-accent-text);
    background: var(--upload-accent);
    font-size: .62rem;
    font-weight: 950
}

.upload-delegated-person>header>div {
    display: grid;
    min-width: 0
}

.upload-delegated-person>header strong {
    overflow: hidden;
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.upload-delegated-person>header small {
    color: var(--upload-muted);
    font-size: .6rem
}

.upload-delegated-dropzone {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 9px;
    border: 1px dashed color-mix(in srgb, var(--upload-accent) 38%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--upload-accent) 4%, transparent);
    cursor: pointer;
    transition: border-color .18s ease,background .18s ease
}

.upload-delegated-dropzone:hover {
    border-color: color-mix(in srgb, var(--upload-accent) 68%, transparent);
    background: color-mix(in srgb, var(--upload-accent) 9%, transparent)
}

.upload-delegated-dropzone input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0
}

.upload-delegated-dropzone>svg {
    width: 21px;
    height: 21px;
    flex: none;
    fill: none;
    stroke: var(--upload-accent)
}

.upload-delegated-dropzone>span {
    display: grid;
    min-width: 0
}

.upload-delegated-dropzone strong {
    font-size: .71rem
}

.upload-delegated-dropzone small {
    color: var(--upload-muted);
    font-size: .6rem
}

.upload-naming {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--upload-positive) 30%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--upload-positive) 8%, transparent)
}

.upload-naming>svg {
    width: 22px;
    height: 22px;
    stroke: var(--upload-positive);
    fill: none;
    flex: none
}

.upload-naming div {
    display: grid;
    gap: 2px;
    min-width: 0
}

.upload-naming strong {
    font-size: .74rem
}

.upload-naming span {
    overflow: hidden;
    color: var(--upload-muted);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.upload-attestation {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 13px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--upload-accent) 58%, var(--upload-border));
    border-radius: 15px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--upload-accent) 10%, var(--upload-surface)), var(--upload-surface));
    cursor: pointer
}

.upload-attestation>input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.upload-attestation-check {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 2px solid color-mix(in srgb, var(--upload-accent) 72%, var(--upload-border));
    border-radius: 8px;
    color: transparent;
    background: color-mix(in srgb, var(--upload-surface) 88%, transparent);
    transition: .18s ease
}

.upload-attestation-check svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5
}

.upload-attestation-copy {
    display: grid;
    gap: 5px;
    color: var(--upload-muted);
    font-size: .75rem;
    line-height: 1.5
}

.upload-attestation-copy strong {
    color: var(--upload-accent);
    font-size: .72rem;
    letter-spacing: .035em;
    text-transform: uppercase
}

.upload-attestation>input:checked+.upload-attestation-check {
    color: var(--upload-accent-text);
    border-color: var(--upload-accent);
    background: var(--upload-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--upload-accent) 14%, transparent)
}

.upload-attestation:has(input:checked) {
    border-color: color-mix(in srgb, var(--upload-positive) 68%, var(--upload-border));
    background: color-mix(in srgb, var(--upload-positive) 9%, var(--upload-surface))
}

.upload-attestation>input:focus-visible+.upload-attestation-check {
    outline: 3px solid color-mix(in srgb, var(--upload-accent) 30%, transparent);
    outline-offset: 3px
}

.upload-error {
    min-height: 1.2em;
    margin: 0;
    color: #ffadb6;
    font-size: .78rem;
    font-weight: 800
}

.upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px
}

.upload-primary,
.upload-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 17px;
    border: 1px solid var(--upload-border);
    border-radius: 12px;
    font: inherit;
    font-size: .78rem;
    font-weight: 950;
    cursor: pointer
}

.upload-primary {
    color: var(--upload-accent-text);
    border-color: var(--upload-accent);
    background: var(--upload-accent)
}

.upload-primary svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none
}

.upload-secondary {
    color: var(--upload-text);
    background: var(--upload-surface)
}

.upload-primary:disabled {
    cursor: not-allowed;
    filter: saturate(.35);
    opacity: .48
}

.upload-primary[data-submitting]:disabled {
    cursor: wait;
    filter: none;
    opacity: .7
}

.upload-success {
    justify-items: center;
    padding: 18px 0;
    text-align: center
}

.upload-success-icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 50%;
    color: #17201e;
    background: var(--upload-positive)
}

.upload-success-icon svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    fill: none
}

.upload-receipt {
    display: grid;
    width: 100%;
    gap: 7px
}

.upload-receipt>div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--upload-surface)
}

.upload-receipt svg {
    width: 18px;
    height: 18px;
    stroke: var(--upload-positive);
    fill: none
}

.upload-receipt strong {
    font-size: .74rem;
    text-align: left
}

@media(max-width:620px) {
    .upload-backdrop {
        align-items: start;
        padding: max(8px, env(safe-area-inset-top)) 0 0
    }

    .upload-dialog {
        max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
        border-radius: 22px 22px 0 0
    }

    .upload-header {
        grid-template-columns: 1fr 42px;
        min-height: 72px;
        padding: 10px 14px
    }

    .upload-brand img {
        width: 45px;
        height: 45px
    }

    .upload-brand strong {
        font-size: .85rem
    }

    .upload-version {
        display: none
    }

    .upload-body {
        padding: 22px 15px 28px
    }

    .upload-period {
        grid-template-columns: 1fr
    }

    .upload-file-group header {
        align-items: start;
        flex-direction: column
    }

    .upload-delegated {
        padding: 13px
    }

    .upload-delegated-heading {
        flex-direction: column
    }

    .upload-delegated-grid {
        grid-template-columns:1fr
    }

    .upload-actions {
        display: grid;
        grid-template-columns: 1fr 1.45fr
    }

    .upload-primary,
    .upload-secondary {
        padding: 0 10px
    }

    .upload-identity {
        grid-template-columns: 45px 1fr 28px;
        padding: 13px
    }

    .upload-identity>span {
        width: 45px;
        height: 45px
    }
}