header[data-v-56e5158d] {
    display: flex;
    justify-content: center
}

.title-container[data-v-56e5158d] {
    display: flex;
    align-items: center;
    gap: .5rem
}

.github-link[data-v-56e5158d] {
    color: #666;
    transition: color .3s ease;
    display: flex;
    align-items: center
}

.github-link[data-v-56e5158d]:hover {
    color: #333
}

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box
}

:root {
    --vue-app-font-family: var(--font-family)
}

* {
    font-family: var(--vue-app-font-family)
}

::-webkit-scrollbar {
    width: 0
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

body,
.container,
.title-container,
.input-container,
#canvasPreview,
footer {
    animation: fadeIn .8s ease-in-out
}

body {
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px 20px 0;
    text-align: center;
    background-image: url(https://overfield-wiki.wntab.work/upload/thumbnails/2025/w800/5a738be0299aabda6b3cecbe6e0b1e40.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    align-items: center;
    max-width: 1600px;
    margin: auto
}

.input-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 15px;
    border-radius: 35px;
    box-shadow: 0 4px 8px #0000001a;
    background: #ffffff6b;
    backdrop-filter: blur(55px);
    width: 100%;
    min-height: 500px;
    flex: 1
}

.icon-selector,
.watermark-group {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap
}

input.input-icon {
    flex: 1
}

.background-settings {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.background-upload,
.background-blur {
    display: flex;
    gap: 10px;
    align-items: center
}

.background-upload label,
.input-color,
.input-range {
    flex: 1;
    white-space: nowrap
}

.background-upload input[type=file],
.background-blur input[type=range] {
    flex: 2
}

.color-group,
.icon-settings .setting-item,
.text-size-container,
.font-selector {
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: 100%;
    white-space: nowrap;
    align-items: center
}

.color-group label,
.icon-settings .setting-item label,
.text-size-container label {
    font-size: 16px;
    color: #333
}

.icon-settings,
.text-settings {
    display: flex;
    gap: 10px
}

.radio-group {
    display: flex;
    justify-content: space-between
}

.radio-group label {
    cursor: pointer;
    color: #333;
    display: flex;
    gap: 5px;
    align-items: center
}

.radio-group input[type=radio],
.radio-group input[type=checkbox],
.input-checkbox input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    margin: 0;
    position: relative;
    outline: none;
    cursor: pointer
}

.radio-group input[type=radio]:before,
.radio-group input[type=checkbox]:before,
.input-checkbox input[type=checkbox]:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: #614caf;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .2s ease-in-out
}

.radio-group input[type=radio]:checked:before,
.radio-group input[type=checkbox]:checked:before,
.input-checkbox input[type=checkbox]:checked:before {
    transform: translate(-50%, -50%) scale(1)
}

.radio-group input[type=radio]:checked+span,
.radio-group input[type=checkbox]:checked+span,
.input-checkbox input[type=checkbox]:checked+span {
    color: #6f4caf
}

.input-file,
.input-text,
.input-color,
.input-range,
.input-icon,
.input-checkbox {
    padding: 10px;
    border: none;
    width: 100%;
    border-radius: 15px;
    font-size: 1em;
    background-color: #fff;
    border: 1px solid #ccc;
    transition: border-color .5s, box-shadow .5s;
    outline: none
}

select:hover,
select:focus,
.input-file:hover,
.input-text:hover,
.input-color:hover,
.input-range:hover,
.input-icon:hover,
.input-checkbox:hover {
    border-color: #4e4caf;
    box-shadow: 0 0 5px #7a4caf99
}

.input-range {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #eee;
    border-radius: 10px;
    outline: none;
    box-sizing: border-box;
    padding: 10px 0
}

.input-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4caf50;
    cursor: pointer;
    border-radius: 50%
}

.input-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #4caf50;
    cursor: pointer;
    border-radius: 50%
}

.input-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    width: auto
}

.input-color {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 20px;
    border: none;
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 2px #0000001a;
    transition: box-shadow .3s, transform .3s
}

.input-color:hover {
    box-shadow: 0 2px 4px #0003;
    transform: translateY(-2px)
}

.input-color::-webkit-color-swatch-wrapper {
    padding: 0
}

.input-color::-webkit-color-swatch {
    border: none;
    border-radius: 5px
}

.input-color::-moz-color-swatch {
    border: none;
    border-radius: 5px
}

.btn,
.file-input-label,
.icon-link {
    background-color: #3b82f6d1;
    color: #fff;
    cursor: pointer;
    transition: background-color .3s;
    padding: 10px;
    border: none;
    border-radius: 15px;
    font-size: 1em;
    text-decoration: none
}

.btn-save:hover,
.file-input-label:hover,
.icon-link:hover,
.btn:hover {
    background-color: #63647e
}

#inputBgImage,
#inputSquareImage {
    display: none
}

.button-container {
    display: flex;
    gap: 10px
}

.btn {
    width: 100%
}

#canvasPreview {
    border-radius: 35px;
    box-shadow: 0 4px 8px #0000001a;
    width: 100%;
    flex: 2
}

footer {
    margin: 45px 0 10px;
    text-align: center;
    font-size: 12px
}

footer span {
    margin: 0 5px
}

.icp {
    margin-top: 10px
}

.icp a {
    font-weight: 800;
    color: #282c34;
    transition: all .5s;
    text-decoration: none;
    margin: 0 5px
}

.icp a:hover {
    color: #aaa
}

.logo-btn {
    margin: 0 5px;
    color: #f45873;
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    outline: 0;
    border: none;
    background: 0 0;
    cursor: pointer;
    -webkit-appearance: none
}

.custom-popup,
.tips-popup {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%) translateY(-20px);
    width: 90%;
    max-width: 600px;
    height: 100%;
    max-height: 82px;
    padding: 10px;
    margin: 10px auto;
    background-color: #fff;
    color: #333;
    border-radius: 10px;
    box-shadow: 0 4px 8px #0000001a;
    visibility: hidden;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out, transform .5s ease-in-out;
    z-index: 100
}

.custom-popup.show,
.tips-popup.show {
    opacity: 1;
    transform: translate(-50%) translateY(0);
    visibility: visible
}

.popup-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    overflow: hidden
}

.popup-content p {
    margin: 10px
}

.popup-content a {
    transition: all .5s;
    color: #009905;
    text-decoration: none
}

.popup-content a:hover {
    color: #222
}

.highlight {
    color: red
}

select {
    width: 100%;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #ccc;
    text-align: center;
    outline: none;
    transition: border-color .5s, box-shadow .5s
}

option[value="Microsoft YaHei"] {
    font-family: Microsoft YaHei, sans-serif
}

option[value=yozai] {
    font-family: yozai, sans-serif
}

option[value=寒蝉全圆体] {
    font-family: 寒蝉全圆体, sans-serif
}

option[value="Douyin Sans"] {
    font-family: Douyin Sans, sans-serif
}

option[value=MaokenZhuyuanTi] {
    font-family: MaokenZhuyuanTi, sans-serif
}

.data-vv{
    background: #ffffff42;
    border-radius: 45px 45px 0px 0px;
    backdrop-filter: blur(55px);
}