:root {
    --background-color: #aa9d9d;
    --input-background-color: #f0f0f0;
    --text-color: black;
    --info-color: #606060;
    --warning-color: #dc2f55;
    --success-color: #a9f140;
    --tip-color: #50d2d4;
    --button-color: #08d;
    --button-active-color: #06b;
}

.linksSubmit-toast {
    font-family: 'siyuan';
    max-width: 60%;
    min-width: calc(9.375rem * var(--rem-multiplier)); /* 150px */
    padding: 0 calc(0.875rem * var(--rem-multiplier)); /* 0 14px */
    height: calc(2.5rem * var(--rem-multiplier)); /* 40px */
    color: rgb(255, 255, 255);
    line-height: calc(2.5rem * var(--rem-multiplier)); /* 40px */
    text-align: center;
    border-radius: calc(0.25rem * var(--rem-multiplier)); /* 4px */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    background: rgba(0, 0, 0, 0.7);
    font-size: calc(1rem * var(--rem-multiplier)); /* 16px */
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}

.linksSubmit-toast-hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
}

.linksSubmit-form {
    background-color: var(--background-color);
    border-radius: calc(1.25rem * var(--rem-multiplier)); /* 20px */
    box-sizing: border-box;
    padding: calc(1.25rem * var(--rem-multiplier)); /* 20px */
    width: 80%;
    max-width: calc(37.5rem * var(--rem-multiplier)); /* 600px */
    margin: calc(7.5rem * var(--rem-multiplier)) auto; /* 120px auto */

    .linksSubmit-title {
        color: var(--text-color);
        font-family: sans-serif;
        font-size: calc(2.25rem * var(--rem-multiplier)); /* 36px */
        font-weight: 600;
        margin-top: calc(1.25rem * var(--rem-multiplier)); /* 20px */
    }

    .linksSubmit-subtitle {
        color: var(--text-color);
        font-family: sans-serif;
        font-size: calc(1rem * var(--rem-multiplier)); /* 16px */
        font-weight: 600;
        margin-top: calc(0.625rem * var(--rem-multiplier)); /* 10px */
    }

    .linksSubmit-input-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: calc(1.875rem * var(--rem-multiplier)); /* 30px */
        gap: calc(1.25rem * var(--rem-multiplier)); /* 20px */
    }

    .linksSubmit-input-option {
        position: relative;
        width: calc(50% - calc(0.625rem * var(--rem-multiplier))); /* calc(50% - 10px) */
    }

    @media (max-width: 37.5rem) {
        /* 600px */
        .linksSubmit-input-option {
            width: 100%;
        }
    }

    .description {
        width: 100%;
    }

    .linksSubmit-input {
        background-color: var(--input-background-color);
        border-radius: var(--border-radius);
        border: 0;
        box-sizing: border-box;
        color: var(--text-color);
        font-size: calc(1.125rem * var(--rem-multiplier)); /* 18px */
        width: 100%;
        height: calc(3.25rem * var(--rem-multiplier)); /* 52px */
        padding: calc(0.625rem * var(--rem-multiplier)) calc(1.25rem * var(--rem-multiplier)); /* 10px 20px */
        outline: 0;
    }

    textarea.linksSubmit-input {
        resize: vertical;
        height: calc(4.375rem * var(--rem-multiplier)); /* 70px */
    }

    select.linksSubmit-input {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        padding-right: calc(1.875rem * var(--rem-multiplier)); /* 30px */
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23eee"><path d="M7 10l5 5 5-5z"/></svg>');
        background-repeat: no-repeat;
        background-position: right calc(0.625rem * var(--rem-multiplier)) center; /* right 10px center */
        background-size: calc(1.5rem * var(--rem-multiplier)); /* 24px */
    }

    .linksSubmit-cut {
        background-color: var(--background-color);
        border-radius: calc(0.625rem * var(--rem-multiplier)); /* 10px */
        height: calc(1.25rem * var(--rem-multiplier)); /* 20px */
        left: calc(1.25rem * var(--rem-multiplier)); /* 20px */
        position: absolute;
        top: calc(-1.25rem * var(--rem-multiplier)); /* -20px */
        transform: translateY(0);
        transition: transform 200ms;
        width: calc(4.25rem * var(--rem-multiplier)); /* 68px */
    }

    .linksSubmit-cut-short {
        width: calc(3.4375rem * var(--rem-multiplier)); /* 55px */
    }

    .linksSubmit-iLabel {
        font-family: sans-serif;
        left: calc(1.25rem * var(--rem-multiplier)); /* 20px */
        line-height: calc(0.875rem * var(--rem-multiplier)); /* 14px */
        pointer-events: none;
        position: absolute;
        transform-origin: 0 50%;
        transition: transform 200ms, color 200ms;
        top: calc(1.25rem * var(--rem-multiplier)); /* 20px */
    }

    .linksSubmit-iLabel-tip {
        color: var(--tip-color);
        font-size: calc(0.75rem * var(--rem-multiplier)); /* 12px */
        margin-left: calc(0.25rem * var(--rem-multiplier)); /* 4px */
    }

    .linksSubmit-input:focus ~ .linksSubmit-cut {
        transform: translateY(calc(0.5rem * var(--rem-multiplier))); /* 8px */
    }

    .linksSubmit-input:focus ~ .linksSubmit-iLabel,
    .linksSubmit-input:not(:placeholder-shown) ~ .linksSubmit-iLabel {
        transform: translateY(calc(-1.875rem * var(--rem-multiplier))) translateX(calc(0.625rem * var(--rem-multiplier))) scale(0.75); /* translateY(-30px) translateX(10px) */
    }

    .linksSubmit-input:not(:focus) ~ .linksSubmit-iLabel {
        color: var(--info-color);
    }

    .linksSubmit-input:focus ~ .linksSubmit-iLabel {
        color: var(--tip-color);
    }

    .linksSubmit-submit {
        background-color: var(--button-color);
        border-radius: var(--border-radius);
        border: 0;
        box-sizing: border-box;
        color: var(--text-color);
        cursor: pointer;
        font-size: calc(1.125rem * var(--rem-multiplier)); /* 18px */
        height: calc(3.125rem * var(--rem-multiplier)); /* 50px */
        text-align: center;
        width: 100%;
        margin-top: calc(1.25rem * var(--rem-multiplier)); /* 20px */
    }

    .linksSubmit-submit:active {
        background-color: var(--button-active-color);
    }

    .linksSubmit-url {
        width: calc(60% - calc(-2.5rem * var(--rem-multiplier))); /* calc(60% - 10px) */
        display: inline-block;
    }

    .linksSubmit-urlDiv {
        display: inline-block;
        width: calc(40% - calc(3rem * var(--rem-multiplier))); /* calc(40% - 10px) */
        vertical-align: top;
        height: calc(3rem * var(--rem-multiplier)); /* 48px */
    }

    .get-link-detail-icon {
        fill: var(--button-color);
        width: calc(3rem * var(--rem-multiplier));
        height: calc(3rem * var(--rem-multiplier));
    }

    .linksSubmit-verifyCode {
        width: calc(60% - calc(0.625rem * var(--rem-multiplier))); /* calc(60% - 10px) */
        display: inline-block;
    }

    .linksSubmit-verifyCodeDiv {
        display: inline-block;
        width: calc(40% - calc(0.625rem * var(--rem-multiplier))); /* calc(40% - 10px) */
        vertical-align: top;
        height: calc(3rem * var(--rem-multiplier)); /* 48px */
    }

    .linksSubmit-verifyCodeImg {
        pointer-events: none;
        user-select: none;
        touch-action: none;
        width: 100%;
        height: 100%;
        margin-top: 0;
        margin-bottom: calc(-0.625rem * var(--rem-multiplier)); /* -10px */
        border-radius: var(--border-radius);
        cursor: pointer;
        display: block;
    }

    .linksSubmit-verifyCodeImg:hover {
        transform: scale(1.05);
    }

    .linksSubmit-verifyCodeImg-refresh {
        display: block;
        text-align: center;
        color: var(--button-color);
        margin-top: calc(0.3125rem * var(--rem-multiplier)); /* 5px */
        cursor: pointer;
        font-size: calc(0.75rem * var(--rem-multiplier)); /* 12px */
    }

    .linksSubmit-verifyCodeBtn {
        background-color: var(--button-color);
        border: 0;
        border-radius: calc(0.75rem * var(--rem-multiplier)); /* 12px */
        color: var(--text-color);
        cursor: pointer;
        font-size: calc(1rem * var(--rem-multiplier)); /* 16px */
        width: 100%;
        height: calc(3.125rem * var(--rem-multiplier)); /* 50px */
    }

    .linksSubmit-title-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: calc(1.25rem * var(--rem-multiplier)) calc(1.25rem * var(--rem-multiplier)) 0 calc(1.25rem * var(--rem-multiplier)); /* 20px 20px 0 20px */
    }

    .linksSubmit-left-title {
        align-items: center;
    }

    .linksSubmit-card {
        height: calc(5rem * var(--rem-multiplier)); /* 80px */
        padding: calc(0.5rem * var(--rem-multiplier));
        background: rgba(198, 198, 198, 0.34);
        border-radius: calc(0.5rem * var(--rem-multiplier)); /* 8px */
        backdrop-filter: blur(5px);
        border-bottom: calc(0.1875rem * var(--rem-multiplier)) solid rgba(255, 255, 255, 0.44); /* 3px */
        border-left: calc(0.125rem * var(--rem-multiplier)) rgba(255, 255, 255, 0.545) outset; /* 2px */
        /*box-shadow: -40px 50px 30px rgba(0, 0, 0, 0.28);*/
        transform: skewX(10deg);
        transition: 0.4s;
        overflow: hidden;
        color: var(--text-color);
    }

    .linksSubmit-card:hover {
        height: auto;
        transform: skew(0deg);
    }

    .linksSubmit-card-align {
        display: flex;
        flex-direction: row;
        gap: calc(0.3125rem * var(--rem-multiplier)); /* 5px */
        align-self: flex-start;
    }

    .linksSubmit-card-red, .linksSubmit-card-yellow, .linksSubmit-card-green {
        width: calc(0.625rem * var(--rem-multiplier)); /* 10px */
        height: calc(0.625rem * var(--rem-multiplier)); /* 10px */
        border-radius: 50%;
        box-shadow: calc(-0.3125rem * var(--rem-multiplier)) calc(0.3125rem * var(--rem-multiplier)) calc(0.3125rem * var(--rem-multiplier)) rgba(0, 0, 0, 0.28); /* -5px 5px 5px */
    }

    .linksSubmit-card-red {
        background-color: #ff605c;
    }

    .linksSubmit-card-yellow {
        background-color: #ffbd44;
    }

    .linksSubmit-card-green {
        background-color: #00ca4e;
    }

    .linksSubmit-card .linksSubmit-card-title {
        text-align: center;
        color: rgb(218, 244, 237);
        text-shadow: calc(-0.625rem * var(--rem-multiplier)) calc(0.3125rem * var(--rem-multiplier)) calc(0.625rem * var(--rem-multiplier)) rgba(0, 0, 0, 0.573); /* -10px 5px 10px */
    }

    .linksSubmit-card .linksSubmit-card-content {
        text-align: left;
        margin: calc(0.5rem * var(--rem-multiplier));
        color: rgb(218, 244, 237);
        text-shadow: calc(-0.625rem * var(--rem-multiplier)) calc(0.3125rem * var(--rem-multiplier)) calc(0.625rem * var(--rem-multiplier)) rgba(0, 0, 0, 0.573); /* -10px 5px 10px */
        font-size: calc(0.875rem * var(--rem-multiplier)); /* 14px */
        line-height: 1.5;
        word-break: break-all;
    }

    .linksSubmit-card .linksSubmit-card-btn {
        padding: calc(0.78125rem * var(--rem-multiplier)) calc(1.875rem * var(--rem-multiplier)); /* 12.5px 30px */
        border: 0;
        border-radius: 100px;
        background-color: #606569;
        color: rgb(218, 244, 237);
        font-weight: bold;
        transition: all 0.5s;
    }

    .linksSubmit-card .linksSubmit-card-btn:hover {
        cursor: pointer;
        background-color: #6a6f72;
        box-shadow: 0 0 calc(1.25rem * var(--rem-multiplier)) rgba(151, 169, 111, 0.31); /* 20px */
        transform: scale(1.1);
    }
}