/* 自定义样式 - Drawto.art */

/* 全局样式 */
body {
    background-color: var(--light);
    transition: all 0.3s ease;
}

/* 艺术风格元素 */
.art-brush-stroke {
    position: relative;
}

.art-brush-stroke::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -15px;
    width: 120%;
    height: 120%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,50 C20,30 50,70 100,50" stroke="%23FF6B6B" stroke-width="2" fill="none" /></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    z-index: -1;
    transform: rotate(var(--rotate, 0deg));
}

/* 定制上传区域 */
#dropzone {
    transition: all 0.3s ease;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255,107,107,0.05) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(78,205,196,0.07) 0%, transparent 25%);
}

#dropzone:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

#dropzone.dragover {
    border-color: #FF6B6B;
    background-color: rgba(255, 107, 107, 0.05);
}

/* 动画效果 */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

/* 装饰元素 */
.art-dot {
    position: absolute;
    border-radius: 50%;
    background-color: var(--color, #FF6B6B);
    opacity: 0.2;
    z-index: -1;
}

.art-line {
    position: absolute;
    height: 2px;
    background-color: var(--color, #4ECDC4);
    opacity: 0.2;
    transform: rotate(var(--rotate, 45deg));
    z-index: -1;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .art-brush-stroke::before {
        top: -5px;
        left: -10px;
        width: 115%;
        height: 115%;
    }
}