/* WebP图片转换器 - 完整样式重构 */

/* 重置和基础样式 */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

/* 覆盖网站默认样式 */
body.webp-converter-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #fff !important;
    background: #1a1a1a !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 隐藏可能冲突的元素 */
.webp-converter-page .container:not(.app-container) {
    display: none !important;
}

/* 应用容器 */
.app-container {
    display: flex !important;
    height: 100vh !important;
    background: #1a1a1a !important;
    padding-top: 60px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important;
}

/* 侧边栏样式 */
.sidebar {
    width: 350px !important;
    background: #2d2d2d !important;
    border-right: 1px solid #404040 !important;
    overflow-y: auto !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 11 !important;
}

.sidebar-header {
    padding: 20px !important;
    border-bottom: 1px solid #404040 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #2d2d2d !important;
}

.sidebar-header h2 {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.user-info {
    display: flex !important;
    align-items: center !important;
}

.user-badge {
    background: #404040 !important;
    color: #fff !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.user-badge.paid {
    background: linear-gradient(135deg, #00d4aa, #00b894) !important;
    color: #000 !important;
}

.user-badge.free {
    background: #666 !important;
    color: #fff !important;
}

/* 功能列表 */
.function-list {
    padding: 0 !important;
    background: #2d2d2d !important;
}

.function-item {
    border-bottom: 1px solid #383838 !important;
    background: #2d2d2d !important;
}

.function-toggle {
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    background: #2d2d2d !important;
}

.function-toggle:hover {
    background: #333 !important;
}

.function-icon {
    font-size: 16px !important;
    margin-right: 12px !important;
    width: 20px !important;
    text-align: center !important;
    color: #00d4aa !important;
}

.function-name {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #fff !important;
}

/* 开关按钮 */
.switch {
    position: relative !important;
    width: 44px !important;
    height: 24px !important;
}

.switch input {
    display: none !important;
}

.switch .slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #555 !important;
    border-radius: 24px !important;
    transition: 0.3s !important;
}

.switch .slider:before {
    position: absolute !important;
    content: "" !important;
    height: 18px !important;
    width: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: white !important;
    border-radius: 50% !important;
    transition: 0.3s !important;
}

.switch input:checked + .slider {
    background-color: #00d4aa !important;
}

.switch input:checked + .slider:before {
    transform: translateX(20px) !important;
}

.switch input:disabled + .slider {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* 小号开关 */
.switch.small {
    width: 32px !important;
    height: 18px !important;
}

.switch.small .slider:before {
    height: 12px !important;
    width: 12px !important;
    left: 3px !important;
    bottom: 3px !important;
}

.switch.small input:checked + .slider:before {
    transform: translateX(14px) !important;
}

/* 功能面板 */
.function-panel {
    background: #242424 !important;
    border-top: 1px solid #383838 !important;
    padding: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
}

.function-panel.active {
    max-height: 500px !important;
}

.panel-section {
    padding: 16px 20px !important;
    background: #242424 !important;
}

.panel-section label {
    display: block !important;
    color: #ccc !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
}

/* 表单控件 */
.form-select {
    width: 100% !important;
    background: #404040 !important;
    border: 1px solid #555 !important;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    cursor: pointer !important;
}

.form-select:focus {
    outline: none !important;
    border-color: #00d4aa !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.2) !important;
}

.form-input {
    width: 100% !important;
    padding: 8px 12px !important;
    background: #404040 !important;
    border: 1px solid #555 !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: 13px !important;
    transition: all 0.3s ease !important;
}

.form-input:focus {
    outline: none !important;
    border-color: #00d4aa !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.2) !important;
}

.form-input::placeholder {
    color: #888 !important;
}

/* 尺寸控件 */
.size-controls {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

.radio-option {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: #ccc !important;
    white-space: nowrap !important;
}

.radio-option input[type="radio"] {
    margin-right: 6px !important;
    accent-color: #00d4aa !important;
}

/* 质量控制 */
.quality-control {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.quality-slider {
    flex: 1 !important;
    -webkit-appearance: none !important;
    height: 4px !important;
    background: #555 !important;
    border-radius: 2px !important;
    outline: none !important;
}

.quality-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    background: #00d4aa !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}

.quality-display {
    font-size: 13px !important;
    color: #00d4aa !important;
    min-width: 35px !important;
    font-weight: 600 !important;
}

/* 尺寸输入组 */
.size-inputs {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.input-group {
    display: flex !important;
    flex-direction: column !important;
}

.input-group label {
    font-size: 11px !important;
    margin-bottom: 4px !important;
    color: #999 !important;
}

/* 预设按钮 */
.preset-buttons {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
}

.preset-btn {
    padding: 6px 12px !important;
    background: #404040 !important;
    border: 1px solid #555 !important;
    color: #ccc !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-size: 12px !important;
    min-width: 50px !important;
}

.preset-btn:hover {
    background: #4a4a4a !important;
    border-color: #00d4aa !important;
}

.preset-btn.active {
    background: #00d4aa !important;
    color: #000 !important;
    border-color: #00d4aa !important;
}

/* 变换控件 */
.transform-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

/* 操作按钮 */
.action-btn {
    background: #404040 !important;
    border: 1px solid #555 !important;
    color: #ccc !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.action-btn:hover {
    background: #4a4a4a !important;
}

.action-btn.primary {
    background: #00d4aa !important;
    color: #000 !important;
    border-color: #00d4aa !important;
}

.action-btn.primary:hover {
    background: #00b894 !important;
}

/* 水印信息 */
.watermark-info {
    background: #333 !important;
    padding: 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}

.watermark-info p {
    margin: 4px 0 !important;
    color: #ccc !important;
}

.watermark-info ul {
    margin: 8px 0 !important;
    padding-left: 16px !important;
}

.watermark-info li {
    color: #ccc !important;
    margin: 4px 0 !important;
}

/* 功能提示 */
.feature-note {
    color: #999 !important;
    font-size: 12px !important;
    font-style: italic !important;
    margin-top: 4px !important;
}

/* 重命名选项 */
.rename-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.radio-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

.rename-preview {
    background: #404040 !important;
    padding: 12px !important;
    border-radius: 4px !important;
    margin-top: 8px !important;
}

.preview-text {
    font-size: 12px !important;
    color: #ccc !important;
}

.preview-text strong {
    color: #00d4aa !important;
    font-weight: 600 !important;
}

/* 下载选项 */
.download-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.switch-label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
    color: #ccc !important;
}

.format-buttons {
    display: flex !important;
    gap: 8px !important;
}

.format-btn {
    flex: 1 !important;
    background: #404040 !important;
    border: 1px solid #555 !important;
    color: #ccc !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.format-btn.active {
    background: #00d4aa !important;
    color: #000 !important;
    border-color: #00d4aa !important;
}

.format-btn:hover:not(.active) {
    background: #4a4a4a !important;
}

/* 主内容区域 */
.main-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #1a1a1a !important;
    position: relative !important;
    z-index: 11 !important;
    overflow: auto !important;
}

/* 上传区域 */
.upload-zone {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    border: 2px dashed #444 !important;
    margin: 20px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
    background: #1a1a1a !important;
    min-height: 400px !important;
}

.upload-zone:hover {
    border-color: #00d4aa !important;
    background: rgba(0, 212, 170, 0.05) !important;
}

.upload-zone.dragover {
    border-color: #00d4aa !important;
    background: rgba(0, 212, 170, 0.1) !important;
    transform: scale(1.02) !important;
}

.upload-content {
    text-align: center !important;
    max-width: 500px !important;
}

.upload-icon {
    position: relative !important;
    margin-bottom: 20px !important;
    color: #666 !important;
}

.plus-icon {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    background: #00d4aa !important;
    color: #000 !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.upload-content h2 {
    color: #fff !important;
    font-size: 24px !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
}

.upload-hint {
    color: #999 !important;
    font-size: 14px !important;
    margin-bottom: 30px !important;
}

.upload-hint kbd {
    background: #333 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    color: #00d4aa !important;
}

/* 支持格式 */
.supported-formats {
    margin-bottom: 20px !important;
}

.supported-formats h3 {
    color: #ccc !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
    font-weight: 500 !important;
}

.format-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
}

.format-tag {
    background: #333 !important;
    color: #ccc !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    border: 1px solid #444 !important;
}

.format-tag.more {
    background: #00d4aa !important;
    color: #000 !important;
    font-weight: 600 !important;
}

/* 上传限制 */
.upload-limits {
    font-size: 12px !important;
    color: #666 !important;
}

.upload-limits p {
    margin: 2px 0 !important;
}

/* 文件列表容器 */
.file-list-container {
    margin: 20px !important;
    background: #2d2d2d !important;
    border-radius: 8px !important;
    border: 1px solid #404040 !important;
}

.file-list-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #404040 !important;
    background: #2d2d2d !important;
}

.file-count {
    display: flex !important;
    gap: 20px !important;
    font-size: 13px !important;
    color: #ccc !important;
}

.file-count strong {
    color: #00d4aa !important;
    font-weight: 600 !important;
}

.list-actions {
    display: flex !important;
    gap: 12px !important;
}

/* 文件项 */
.file-items {
    padding: 16px 20px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    background: #2d2d2d !important;
}

.file-item {
    display: flex !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #383838 !important;
}

.file-item:last-child {
    border-bottom: none !important;
}

.file-thumbnail {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin-right: 12px !important;
    background: #404040 !important;
    border: 1px solid #555 !important;
}

.file-info {
    flex: 1 !important;
}

.file-name {
    color: #fff !important;
    font-size: 14px !important;
    margin-bottom: 4px !important;
    font-weight: 500 !important;
}

.file-size {
    color: #999 !important;
    font-size: 12px !important;
}

.file-remove {
    width: 28px !important;
    height: 28px !important;
    background: #ff6b6b !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 1 !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
}

.file-remove:hover {
    background: #ff5252 !important;
    transform: scale(1.1) !important;
}

/* 进度条样式 */
.progress-container {
    margin: 20px !important;
    padding: 20px !important;
    background: #2d2d2d !important;
    border-radius: 8px !important;
    border: 1px solid #3d3d3d !important;
}

.progress-bar {
    width: 100% !important;
    height: 8px !important;
    background: #1a1a1a !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    border: 1px solid #3d3d3d !important;
}

.progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #00d4aa, #00b894) !important;
    border-radius: 4px !important;
    transition: width 0.3s ease !important;
    width: 0% !important;
    box-shadow: 0 0 8px rgba(0, 212, 170, 0.3) !important;
}

.progress-text {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin: 0 !important;
}

/* 图片预览和编辑模态框 */
.image-preview-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    z-index: 1000 !important;
    padding: 20px !important;
    overflow: auto !important;
}

.preview-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    color: #fff !important;
    padding: 20px !important;
    background: #2d2d2d !important;
    border-radius: 8px !important;
    border: 1px solid #404040 !important;
}

.preview-header h3 {
    color: #00d4aa !important;
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.preview-controls {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

.preview-controls .btn {
    padding: 8px 16px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.preview-controls .btn-secondary {
    background: #404040 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}

.preview-controls .btn-secondary:hover {
    background: #4a4a4a !important;
    border-color: #00d4aa !important;
}

.preview-controls #imageCounter {
    background: #1a1a1a !important;
    color: #00d4aa !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid #3d3d3d !important;
    min-width: 60px !important;
    text-align: center !important;
}

/* 预览内容 */
.preview-content {
    display: flex !important;
    gap: 20px !important;
    height: calc(100vh - 140px) !important;
}

.image-editor {
    display: flex !important;
    gap: 20px !important;
    width: 100% !important;
    height: 100% !important;
}

.editor-canvas-container {
    flex: 1 !important;
    position: relative !important;
    background: #2d2d2d !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid #404040 !important;
}

/* 裁剪工具样式 */
.crop-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    z-index: 100 !important;
}

.crop-box {
    position: absolute !important;
    border: 2px solid #00d4aa !important;
    background: rgba(0, 212, 170, 0.1) !important;
    pointer-events: all !important;
    cursor: move !important;
    z-index: 101 !important;
    min-width: 50px !important;
    min-height: 50px !important;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;
}

.crop-handle {
    position: absolute !important;
    width: 12px !important;
    height: 12px !important;
    background: #00d4aa !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    z-index: 102 !important;
    pointer-events: all !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.crop-handle:hover {
    background: #00b894 !important;
    transform: scale(1.2) !important;
}

/* 手柄位置 */
.crop-handle.top-left {
    top: -8px !important;
    left: -8px !important;
    cursor: nw-resize !important;
}

.crop-handle.top-right {
    top: -8px !important;
    right: -8px !important;
    cursor: ne-resize !important;
}

.crop-handle.bottom-left {
    bottom: -8px !important;
    left: -8px !important;
    cursor: sw-resize !important;
}

.crop-handle.bottom-right {
    bottom: -8px !important;
    right: -8px !important;
    cursor: se-resize !important;
}

.crop-handle.top {
    top: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    cursor: n-resize !important;
}

.crop-handle.bottom {
    bottom: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    cursor: s-resize !important;
}

.crop-handle.left {
    left: -8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: w-resize !important;
}

.crop-handle.right {
    right: -8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: e-resize !important;
}

/* 裁剪信息显示 */
.crop-info {
    position: absolute !important;
    top: -40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: #00d4aa !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    border: 1px solid #00d4aa !important;
}

/* 编辑器侧边栏 */
.editor-sidebar {
    width: 280px !important;
    background: #2d2d2d !important;
    border-radius: 8px !important;
    padding: 20px !important;
    border: 1px solid #404040 !important;
    height: fit-content !important;
    max-height: 100% !important;
    overflow-y: auto !important;
}

.tool-panel, .crop-info-panel {
    margin-bottom: 24px !important;
}

.tool-panel h4, .crop-info-panel h4 {
    color: #00d4aa !important;
    margin: 0 0 16px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #3d3d3d !important;
    padding-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tool-btn {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    padding: 12px 16px !important;
    background: #404040 !important;
    border: 1px solid #555 !important;
    color: #fff !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tool-btn:hover {
    background: #4a4a4a !important;
    border-color: #00d4aa !important;
    transform: translateY(-1px) !important;
}

.tool-btn.active {
    background: #00d4aa !important;
    color: #000 !important;
    border-color: #00d4aa !important;
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3) !important;
}

.info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    padding: 8px 12px !important;
    background: #1a1a1a !important;
    border-radius: 4px !important;
    border: 1px solid #3d3d3d !important;
}

.info-row label {
    color: #999 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.info-row span {
    color: #00d4aa !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* 用户状态提示 */
.user-status-hint {
    text-align: center !important;
    margin: 20px !important;
    font-size: 14px !important;
    color: #ccc !important;
    padding: 16px !important;
    background: #2d2d2d !important;
    border-radius: 8px !important;
    border: 1px solid #404040 !important;
}

.user-status-hint p {
    margin: 4px 0 !important;
}

.user-status-hint a {
    color: #00d4aa !important;
    text-decoration: none !important;
}

.user-status-hint a:hover {
    text-decoration: underline !important;
}

/* 防拖拽保护 */
.no-select {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.protected-image {
    pointer-events: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .sidebar {
        width: 300px !important;
    }
    
    .editor-sidebar {
        width: 250px !important;
    }
}

@media (max-width: 768px) {
    .app-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        position: relative !important;
    }
    
    .sidebar {
        width: 100% !important;
        order: 2 !important;
        max-height: 50vh !important;
    }
    
    .main-content {
        order: 1 !important;
        min-height: 50vh !important;
    }
    
    .upload-zone {
        margin: 10px !important;
        padding: 20px !important;
        min-height: 300px !important;
    }
    
    .upload-content h2 {
        font-size: 20px !important;
    }
    
    .supported-formats {
        margin-bottom: 15px !important;
    }
    
    .format-grid {
        gap: 4px !important;
    }
    
    .sidebar-header {
        padding: 15px !important;
    }
    
    .function-toggle {
        padding: 12px 15px !important;
    }
    
    .panel-section {
        padding: 12px 15px !important;
    }
    
    .size-inputs {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .radio-grid {
        grid-template-columns: 1fr !important;
    }
    
    .transform-controls {
        grid-template-columns: 1fr !important;
    }
    
    .file-list-container {
        margin: 10px !important;
    }
    
    .preview-content {
        flex-direction: column !important;
        height: auto !important;
    }
    
    .editor-sidebar {
        width: 100% !important;
        order: 2 !important;
    }
    
    .image-preview-container {
        padding: 10px !important;
    }
}

/* 滚动条样式 */
.sidebar::-webkit-scrollbar,
.file-items::-webkit-scrollbar,
.editor-sidebar::-webkit-scrollbar {
    width: 8px !important;
}

.sidebar::-webkit-scrollbar-track,
.file-items::-webkit-scrollbar-track,
.editor-sidebar::-webkit-scrollbar-track {
    background: #2d2d2d !important;
}

.sidebar::-webkit-scrollbar-thumb,
.file-items::-webkit-scrollbar-thumb,
.editor-sidebar::-webkit-scrollbar-thumb {
    background: #555 !important;
    border-radius: 4px !important;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.file-items::-webkit-scrollbar-thumb:hover,
.editor-sidebar::-webkit-scrollbar-thumb:hover {
    background: #666 !important;
}

/* 加载和错误状态 */
.loading {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(0, 212, 170, 0.3) !important;
    border-radius: 50% !important;
    border-top-color: #00d4aa !important;
    animation: spin 1s ease-in-out infinite !important;
}

@keyframes spin {
    to { transform: rotate(360deg) !important; }
}

/* 通知和提示 */
.wc-alert {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    z-index: 10000 !important;
    max-width: 300px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.wc-alert-info {
    background: #3498db !important;
}

.wc-alert-success {
    background: #27ae60 !important;
}

.wc-alert-warning {
    background: #f39c12 !important;
}

.wc-alert-error {
    background: #e74c3c !important;
}