* {
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html,
body {
    height    : 100%;
    overflow  : hidden;
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
}

body {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    color          : #fff;
    padding        : 15px;
    position       : relative;
}

.container {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    width         : 100%;
    max-width     : 800px;
    height        : 100%;
    max-height    : 95vh;
    position      : relative;
    z-index       : 2;
    gap           : 12px;
}

.header {
    text-align     : center;
    width          : 100%;
    padding        : 15px;
    background     : rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius  : 15px;
    border         : 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink    : 0;
}

h1 {
    font-size              : clamp(1.6rem, 5vw, 2.2rem);
    margin-bottom          : 8px;
    background             : linear-gradient(to right, #ff7e5f, #feb47b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing         : 1px;
}

.url-count {
    background   : rgba(255, 179, 71, 0.15);
    border-radius: 30px;
    padding      : 6px 12px;
    margin-top   : 12px;
    font-size    : clamp(0.8rem, 2.5vw, 0.95rem);
    display      : inline-block;
    animation    : pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 179, 71, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 179, 71, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 179, 71, 0);
    }
}

.api-info {
    width        : 100%;
    background   : rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding      : 15px;
    text-align   : center;
    flex-shrink  : 0;
}

.api-info h3 {
    color          : #ffb347;
    margin-bottom  : 12px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    font-size      : clamp(1rem, 3.5vw, 1.2rem);
}

.code-block {
    background    : rgba(0, 0, 0, 0.3);
    border-radius : 8px;
    padding       : 12px;
    font-family   : 'Courier New', monospace;
    font-size     : clamp(0.85rem, 3vw, 1rem);
    overflow-x    : auto;
    margin        : 12px 0;
    color         : #ffb347;
    font-weight   : bold;
    text-align    : center;
    letter-spacing: 0.5px;
    border        : 1px solid rgba(255, 179, 71, 0.3);
}

.image-container {
    position       : relative;
    width          : 100%;
    flex-grow      : 1;
    min-height     : 200px;
    background     : #0a0a1a;
    border-radius  : 15px;
    overflow       : hidden;
    box-shadow     : 0 15px 35px rgba(0, 0, 0, 0.3);
    border         : 1px solid rgba(255, 255, 255, 0.1);
    cursor         : pointer;
    transition     : transform 0.3s ease;
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.image-container:hover {
    transform: scale(1.02);
}

#wallpaper {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.loading {
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-direction : column;
    background     : rgba(10, 10, 26, 0.9);
    z-index        : 10;
    transition     : opacity 0.3s ease;
}

.spinner {
    width        : 40px;
    height       : 40px;
    border       : 4px solid rgba(255, 255, 255, 0.1);
    border-top   : 4px solid #ff7e5f;
    border-radius: 50%;
    animation    : spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.control-panel {
    display        : flex;
    gap            : 10px;
    flex-wrap      : wrap;
    justify-content: center;
    width          : 100%;
    flex-shrink    : 0;
    padding-bottom : 10px;
}

.btn {
    padding        : 12px 20px;
    border         : none;
    border-radius  : 50px;
    font-size      : clamp(0.9rem, 3.5vw, 1rem);
    font-weight    : 600;
    cursor         : pointer;
    transition     : all 0.3s ease;
    display        : flex;
    align-items    : center;
    gap            : 8px;
    min-width      : 140px;
    justify-content: center;
}

.btn-primary {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    color     : white;
    box-shadow: 0 5px 15px rgba(255, 126, 95, 0.4);
}

.btn-primary:hover {
    transform : translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 126, 95, 0.6);
}

.particles {
    position: fixed;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    z-index : 1;
    overflow: hidden;
}

.particle {
    position     : absolute;
    background   : rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation    : float 15s infinite linear;
}

@keyframes float {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity  : 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) translateX(100px) rotate(360deg);
        opacity  : 0;
    }
}

.image-info {
    position       : absolute;
    bottom         : 0;
    left           : 0;
    right          : 0;
    background     : rgba(0, 0, 0, 0.6);
    padding        : 10px 15px;
    font-size      : clamp(0.75rem, 2.5vw, 0.9rem);
    text-align     : center;
    backdrop-filter: blur(5px);
    opacity        : 0.8;
    transition     : opacity 0.3s;
    display        : flex;
    justify-content: center;
    gap            : 15px;
    flex-wrap      : wrap;
}

.image-info span {
    display    : flex;
    align-items: center;
    gap        : 5px;
    white-space: nowrap;
}

.image-info:hover {
    opacity: 1;
}

.pixiv-link {
    position       : absolute;
    top            : 15px;
    right          : 15px;
    background     : rgba(0, 96, 250, 0.8);
    color          : white;
    padding        : 6px 12px;
    border-radius  : 20px;
    font-size      : clamp(0.7rem, 2.5vw, 0.85rem);
    text-decoration: none;
    display        : flex;
    align-items    : center;
    gap            : 5px;
    z-index        : 20;
    backdrop-filter: blur(5px);
    opacity        : 0.8;
    transition     : opacity 0.3s;
}

.pixiv-link:hover {
    opacity   : 1;
    background: rgba(0, 96, 250, 1);
}

.notification {
    position       : fixed;
    top            : 20px;
    left           : 50%;
    transform      : translateX(-50%);
    background     : rgba(0, 0, 0, 0.8);
    color          : white;
    padding        : 12px 25px;
    border-radius  : 30px;
    backdrop-filter: blur(10px);
    display        : flex;
    align-items    : center;
    gap            : 10px;
    z-index        : 100;
    opacity        : 0;
    transition     : opacity 0.3s, transform 0.3s;
    pointer-events : none;
    font-size      : clamp(0.8rem, 3vw, 1rem);
}

.notification.show {
    opacity  : 1;
    transform: translateX(-50%) translateY(10px);
}

.debug-info {
    display      : none;
    position     : absolute;
    bottom       : 10px;
    right        : 10px;
    background   : rgba(0, 0, 0, 0.5);
    color        : #aaa;
    padding      : 5px 10px;
    border-radius: 5px;
    font-size    : 0.7rem;
    z-index      : 30;
    max-width    : 95%;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

/* 移动设备优化 */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .container {
        max-height: 98vh;
    }

    .header,
    .api-info {
        padding: 12px;
    }

    .code-block {
        padding: 10px;
    }

    .btn {
        padding  : 10px 15px;
        min-width: 120px;
    }

    .image-info {
        padding: 8px 10px;
        gap    : 8px;
    }
}

@media (max-width: 480px) {
    .control-panel {
        gap: 8px;
    }

    .btn {
        min-width: 100px;
        padding  : 10px 12px;
        font-size: 0.85rem;
    }

    .image-info {
        justify-content: space-around;
        gap            : 5px;
        font-size      : 0.7rem;
    }
}

/* 横屏设备优化 */
@media (max-height: 600px) and (orientation: landscape) {
    .container {
        max-height    : 98vh;
        flex-direction: row;
        flex-wrap     : wrap;
        align-items   : flex-start;
    }

    .header {
        width: 100%;
    }

    .api-info {
        width       : 45%;
        margin-right: 10px;
    }

    .image-container {
        width     : 53%;
        height    : 60vh;
        min-height: 200px;
    }

    .control-panel {
        width     : 100%;
        margin-top: 10px;
    }
}

/* 超小高度设备 */
@media (max-height: 450px) {

    .header,
    .api-info {
        padding: 8px 10px;
    }

    .url-count {
        margin-top: 5px;
        padding   : 4px 8px;
        font-size : 0.8rem;
    }

    .code-block {
        padding  : 8px;
        margin   : 8px 0;
        font-size: 0.8rem;
    }

    .btn {
        padding  : 8px 12px;
        min-width: 90px;
        font-size: 0.8rem;
    }

    .image-info {
        display: none;
    }
}