:root {
    --bg: #0b0c10;

    --surface: #13151b;
    --surface-hover: #191c24;
    --surface-light: #1e212b;

    --border: #272a35;
    --border-light: #343845;

    --text: #f5f6fa;
    --text-secondary: #979dac;
    --text-soft: #686f80;

    --accent: #7b61ff;
    --accent-hover: #8d76ff;
    --accent-soft: rgba(123, 97, 255, 0.14);

    --success: #4ad295;
    --danger: #ff6b78;

    --radius: 18px;
    --radius-small: 11px;
}


* {
    box-sizing: border-box;
}


html {
    color-scheme: dark;
}


body {
    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(123, 97, 255, 0.12),
            transparent 38%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


button,
input {
    font: inherit;
}


button {
    border: none;
}


.app-shell {
    width: min(
        1040px,
        calc(100% - 40px)
    );

    margin: 0 auto;
}


.topbar {
    height: 94px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.055);

    margin-bottom: 42px;
}


.brand {
    display: flex;
    align-items: center;

    gap: 14px;
}


.brand-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #927cff,
            #6950e8
        );

    box-shadow:
        0 8px 28px
        rgba(123, 97, 255, 0.23);

    font-size: 15px;

    padding-left: 2px;
}


.brand h1 {
    margin: 0;

    font-size: 18px;

    letter-spacing: -0.3px;
}


.brand span {
    color: var(--text-secondary);

    font-size: 12px;
}


.main-nav {
    display: flex;

    gap: 6px;

    padding: 5px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius: 11px;
}


.main-nav a {
    padding:
        7px 12px;

    border-radius: 8px;

    color:
        var(--text-secondary);

    text-decoration: none;

    font-size: 12px;
}


.main-nav a:hover,
.main-nav a.active {
    background:
        var(--surface-light);

    color:
        var(--text);
}


.user-menu {
    display: flex;
    align-items: center;

    gap: 10px;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.user-avatar {
    width: 33px;
    height: 33px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        var(--surface-light);

    border:
        1px solid
        var(--border-light);

    color:
        var(--text);

    font-weight: 700;
}


.logout-link {
    margin-left: 8px;

    color:
        var(--text-secondary);

    text-decoration: none;
}


.logout-link:hover {
    color:
        var(--text);
}


main {
    display: grid;

    gap: 28px;

    padding-bottom: 60px;
}


.upload-card,
.recent-card {
    padding: 28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.018),
            transparent
        ),
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        0 18px 60px
        rgba(0, 0, 0, 0.18);
}


.section-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 25px;
}


.section-header h2 {
    margin:
        0 0 6px;

    font-size: 19px;

    letter-spacing: -0.3px;
}


.section-header p {
    margin: 0;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.media-toggle {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-bottom: 22px;
}


.media-option {
    display: flex;
    align-items: center;

    gap: 13px;

    padding:
        15px 17px;

    border-radius: 13px;

    border:
        1px solid
        var(--border);

    background:
        var(--surface-hover);

    color:
        var(--text-secondary);

    cursor: pointer;

    text-align: left;

    transition:
        150ms ease;
}


.media-option:hover {
    border-color:
        var(--border-light);
}


.media-option.active {
    border-color:
        rgba(123, 97, 255, 0.6);

    background:
        var(--accent-soft);

    color:
        var(--text);
}


.option-icon {
    font-size: 22px;
}


.media-option span:last-child {
    display: flex;

    flex-direction: column;
}


.media-option strong {
    font-size: 14px;
}


.media-option small {
    margin-top: 2px;

    color:
        var(--text-secondary);

    font-size: 11px;
}


.drop-zone {
    padding:
        52px 30px;

    text-align: center;

    border:
        1px dashed
        var(--border-light);

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.018);

    transition:
        160ms ease;

    cursor: pointer;
}


.drop-zone:hover,
.drop-zone.dragging {
    border-color:
        var(--accent);

    background:
        var(--accent-soft);
}


.drop-icon {
    width: 46px;
    height: 46px;

    margin:
        0 auto 13px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        var(--surface-light);

    font-size: 22px;
}


.drop-zone h3 {
    margin:
        0 0 7px;

    font-size: 15px;
}


.drop-zone p {
    margin:
        0 0 16px;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.picker-actions {
    display: flex;
    justify-content: center;

    gap: 10px;

    margin-bottom: 15px;
}


.secondary-button {
    padding:
        9px 13px;

    border-radius: 9px;

    border:
        1px solid
        var(--border-light);

    background:
        var(--surface-light);

    color:
        var(--text);

    cursor: pointer;
}


.secondary-button:hover {
    border-color:
        rgba(123, 97, 255, 0.6);

    background:
        var(--accent-soft);
}


.supported-files {
    color:
        var(--text-soft);

    font-size: 11px;
}


.queue-section {
    margin-top: 18px;

    padding: 16px;

    border-radius: 14px;

    background:
        rgba(255,255,255,0.018);

    border:
        1px solid
        var(--border);
}


.queue-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 13px;
}


.queue-header > div {
    display: flex;

    flex-direction: column;
}


.queue-header strong {
    font-size: 13px;
}


.queue-header span {
    margin-top: 3px;

    color:
        var(--text-secondary);

    font-size: 11px;
}


.folder-summary {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 13px;
}


.folder-chip {
    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        7px 10px;

    border-radius: 9px;

    background:
        var(--surface-hover);

    border:
        1px solid
        var(--border);
}


.folder-chip strong {
    font-size: 11px;
}


.folder-chip small {
    color:
        var(--text-secondary);

    font-size: 10px;
}


.queue-list {
    display: grid;
}


.queue-item {
    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        10px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.045);
}


.queue-item:last-child {
    border-bottom: none;
}


.queue-file-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 8px;

    background:
        var(--accent-soft);

    color:
        var(--accent-hover);

    font-size: 9px;
}


.queue-file-main {
    display: flex;

    flex-direction: column;

    flex: 1;

    min-width: 0;
}


.queue-file-main strong {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 12px;
}


.queue-file-main span {
    margin-top: 2px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(--text-secondary);

    font-size: 9px;
}


.queue-file-size {
    flex-shrink: 0;

    color:
        var(--text-secondary);

    font-size: 10px;
}


.queue-more {
    padding-top: 10px;

    text-align: center;

    color:
        var(--text-secondary);

    font-size: 10px;
}


.text-button {
    padding: 0;

    background: none;

    color:
        var(--accent-hover);

    cursor: pointer;
}


.danger-text {
    color:
        var(--danger);
}


.icon-button {
    width: 32px;
    height: 32px;

    border-radius: 8px;

    background:
        transparent;

    color:
        var(--text-secondary);

    cursor: pointer;

    font-size: 20px;
}


.icon-button:hover {
    background:
        var(--surface-light);

    color:
        var(--text);
}


.metadata-section {
    margin-top: 22px;
}


.optional-title {
    display: grid;

    grid-template-columns:
        minmax(230px, 1fr)
        minmax(250px, 1fr);

    gap: 25px;

    align-items: center;

    padding: 17px;

    border-radius: 13px;

    background:
        rgba(255,255,255,0.018);

    border:
        1px solid
        var(--border);
}


.optional-title label {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;

    font-weight: 600;
}


.optional-title small {
    display: block;

    color:
        var(--text-secondary);

    font-size: 11px;

    line-height: 1.45;
}


input {
    width: 100%;

    padding:
        11px 12px;

    background:
        #0e1015;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-small);

    color:
        var(--text);

    outline: none;

    transition:
        130ms ease;
}


input:focus {
    border-color:
        var(--accent);

    box-shadow:
        0 0 0 3px
        rgba(123, 97, 255, 0.1);
}


input::placeholder {
    color:
        #555c6d;
}


.form-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(100px, 0.7fr)
        minmax(100px, 0.7fr);

    gap: 13px;
}


.field label {
    display: block;

    margin:
        0 0 7px 2px;

    color:
        var(--text-secondary);

    font-size: 11px;

    font-weight: 600;
}


.upload-actions {
    display: flex;

    justify-content: flex-end;

    margin-top: 23px;
}


.primary-button {
    min-width: 140px;

    padding:
        11px 18px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #876cff,
            #684ee8
        );

    color: white;

    font-weight: 650;

    cursor: pointer;

    transition:
        150ms ease;

    box-shadow:
        0 7px 22px
        rgba(123, 97, 255, 0.16);
}


.primary-button:hover:not(:disabled) {
    transform:
        translateY(-1px);

    box-shadow:
        0 9px 28px
        rgba(123, 97, 255, 0.25);
}


.primary-button:disabled {
    opacity: 0.35;

    cursor:
        not-allowed;
}


.upload-progress {
    margin-top: 22px;

    padding: 16px;

    border-radius: 13px;

    background:
        rgba(255,255,255,0.018);

    border:
        1px solid
        var(--border);
}


.progress-header,
.progress-footer {
    display: flex;

    justify-content: space-between;
    align-items: center;
}


.progress-header {
    margin-bottom: 11px;

    font-size: 12px;
}


.progress-footer {
    margin-top: 9px;

    color:
        var(--text-secondary);

    font-size: 10px;
}


.progress-track {
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background:
        #242732;
}


.progress-bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #7257f5,
            #9c89ff
        );

    transition:
        width 100ms linear;
}


.alert,
.status-success,
.status-error {
    margin-top: 15px;

    padding:
        12px 14px;

    border-radius: 10px;

    font-size: 12px;
}


.alert-error,
.status-error {
    background:
        rgba(255, 107, 120, 0.1);

    border:
        1px solid
        rgba(255, 107, 120, 0.2);

    color:
        #ff919b;
}


.status-success {
    background:
        rgba(74, 210, 149, 0.1);

    border:
        1px solid
        rgba(74, 210, 149, 0.2);

    color:
        #75e3b2;
}


.upload-list {
    display: grid;
}


.upload-item {
    display: flex;
    align-items: center;

    gap: 13px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.045);
}


.upload-item:last-child {
    border-bottom: none;
}


.upload-type-icon {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        var(--surface-hover);

    font-size: 16px;
}


.upload-item-main {
    display: flex;

    flex-direction: column;

    flex: 1;

    min-width: 0;
}


.upload-item-main strong {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
}


.upload-item-main span {
    margin-top: 3px;

    color:
        var(--text-secondary);

    font-size: 10px;
}


.upload-success {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(74, 210, 149, 0.1);

    color:
        var(--success);

    font-size: 12px;
}


.library-back {
    display: inline-block;

    margin-bottom: 15px;

    color:
        var(--accent-hover);

    text-decoration: none;

    font-size: 12px;
}


.library-list {
    display: grid;
}


.library-item {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 58px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.045);
}


.library-item:last-child {
    border-bottom: none;
}


.library-main {
    display: flex;
    align-items: center;

    gap: 13px;

    flex: 1;

    min-width: 0;

    color: inherit;

    text-decoration: none;
}


.library-main > div:last-child {
    display: flex;

    flex-direction: column;

    min-width: 0;
}


.library-main strong {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
}


.library-main span {
    margin-top: 3px;

    color:
        var(--text-secondary);

    font-size: 10px;
}


.library-icon {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        var(--surface-hover);
}


.delete-button,
.restore-button {
    padding:
        8px 11px;

    border-radius: 8px;

    background:
        var(--surface-hover);

    color:
        var(--text-secondary);

    cursor: pointer;
}


.delete-button:hover {
    background:
        rgba(255, 107, 120, 0.12);

    color:
        var(--danger);
}


.restore-button:hover {
    background:
        rgba(74, 210, 149, 0.12);

    color:
        var(--success);
}


.empty-state {
    padding: 40px;

    display: flex;

    flex-direction: column;
    align-items: center;

    color:
        var(--text-secondary);

    text-align: center;
}


.empty-icon {
    width: 43px;
    height: 43px;

    margin-bottom: 13px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        var(--surface-hover);

    font-size: 18px;
}


.empty-state strong {
    color:
        var(--text);

    font-size: 13px;
}


.empty-state span {
    margin-top: 5px;

    font-size: 11px;
}


.hidden {
    display:
        none !important;
}



/* LOGIN */

.login-body {
    display: grid;

    place-items: center;

    padding: 25px;
}


.login-shell {
    width:
        min(410px, 100%);
}


.login-shell > .brand {
    margin-bottom: 22px;
}


.login-card {
    padding: 28px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        0 22px 70px
        rgba(0,0,0,0.25);
}


.login-heading {
    margin-bottom: 25px;
}


.login-heading h2 {
    margin:
        0 0 7px;

    font-size: 21px;
}


.login-heading p {
    margin: 0;

    color:
        var(--text-secondary);

    font-size: 12px;
}


.login-form {
    display: grid;

    gap: 15px;
}


.login-button {
    width: 100%;

    margin-top: 3px;
}


@media (
    max-width: 760px
) {

    .app-shell {
        width:
            min(
                100% - 24px,
                1040px
            );
    }

    .topbar {
        min-height: 80px;
        height: auto;

        padding:
            12px 0;

        margin-bottom: 22px;

        flex-wrap: wrap;
    }

    .brand span {
        display: none;
    }

    .user-menu > span {
        display: none;
    }

    .logout-link {
        margin-left: 2px;
    }

    .main-nav {
        order: 3;

        width: 100%;

        justify-content: center;
    }

    .upload-card,
    .recent-card {
        padding: 19px;
    }

    .optional-title {
        grid-template-columns:
            1fr;
    }

    .series-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .wide-field {
        grid-column:
            1 / -1;
    }

    .drop-zone {
        padding:
            38px 18px;
    }

    .picker-actions {
        flex-direction:
            column;
    }

    .secondary-button {
        width: 100%;
    }

    .queue-file-size {
        display: none;
    }

}