/* 性能优化：减少重绘和回流 */
* {
    will-change: transform;
}

/* 自定义滑块样式 */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

input[type="range"]::-webkit-slider-track {
    background: #c7d2fe;
    height: 8px;
    border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #6366f1;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-top: -6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: #4f46e5;
    transform: scale(1.1);
}

/* Firefox 兼容 */
input[type="range"]::-moz-range-track {
    background: #c7d2fe;
    height: 8px;
    border-radius: 4px;
}

input[type="range"]::-moz-range-thumb {
    background: #6366f1;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    background: #4f46e5;
    transform: scale(1.1);
}

/* 复选框自定义样式 */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #6366f1;
    cursor: pointer;
}

/* 密码显示区域优化 */
.max-h-32 {
    max-height: 8rem;
}

.overflow-y-auto {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c7d2fe transparent;
}

/* 自定义滚动条样式 */
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: #c7d2fe;
    border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background-color: #a5b4fc;
}

/* 强度条动画 */
#strengthBar {
    transition: width 0.5s ease-in-out, background-color 0.3s ease;
}

/* 按钮优化 */
button {
    transition: all 0.2s ease;
}

button:active {
    transform: scale(0.98);
}

/* 响应式设计 */
@media (max-width: 640px) {
    .max-w-md { 
        width: 100%; 
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
    }
    
    body {
        padding: 0;
    }
    
    .bg-gradient-to-br {
        background: linear-gradient(to bottom right, #e0e7ff, #f3e8ff);
    }
    
    .max-h-32 {
        max-height: 6rem;
    }
    
    .font-mono {
        font-size: 0.875rem;
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#resultSection {
    animation: fadeIn 0.3s ease-out;
}

/* 高性能动画 */
.hover\:scale-105:hover {
    transform: scale(1.05);
}

.hover\:bg-indigo-50:hover {
    background-color: #eef2ff;
}

/* 减少布局抖动 */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.top-0 {
    top: 0;
}

.right-0 {
    right: 0;
}

/* 优化文本渲染 */
.font-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    letter-spacing: 0.05em;
}