:root {
    --primary: #007aff;
    --danger: #ff3b30;
    --success: #34c759;
    --bg: #f5f5f7;
    --card-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

body {
    margin: 0; background: var(--bg); font-family: -apple-system, "SF Pro Text", sans-serif;
    display: flex; justify-content: center; align-items: center; min-height: 100vh;
}

.app-card {
    background: #ffffff; width: 92%; max-width: 440px; border-radius: 24px;
    box-shadow: var(--card-shadow); padding: 28px; box-sizing: border-box;
    transition: all 0.3s ease;
}

.main-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.main-header h2 { margin: 0; font-size: 22px; font-weight: 700; color: #1d1d1f; }
.main-header p { margin: 4px 0 0; font-size: 13px; color: #86868b; }

.section-label { font-size: 11px; font-weight: 700; color: #aeaeb2; margin-bottom: 8px; letter-spacing: 0.5px; }

/* 上传区优化 */
.upload-zone {
    border: 2px dashed #d2d2d7; background: #fafafa; border-radius: 16px;
    padding: 24px; cursor: pointer; transition: 0.2s; margin-bottom: 20px;
}
.upload-zone:hover { border-color: var(--primary); background: #f0f7ff; }
.upload-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

.upload-info input {
    border: 1px solid #d2d2d7; border-radius: 8px; padding: 10px 14px; 
    width: 200px; margin-bottom: 12px; font-size: 14px; outline: none; text-align: center;
}
.upload-info p { margin: 0; font-size: 13px; color: #86868b; }

/* 预览容器 - 锁定高度 + 滚动条样式优化 */
.preview-container {
    height: 130px; background: #fbfbfd; border: 1px solid #e5e5e5;
    border-radius: 12px; overflow-y: auto; display: grid; 
    grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; margin-bottom: 24px;
}
.preview-container::-webkit-scrollbar { width: 4px; }
.preview-container::-webkit-scrollbar-thumb { background: #d2d2d7; border-radius: 10px; }

.preview-item {
    width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.status-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 24px; }
#statusText { font-weight: 600; color: var(--primary); }
#fileSize { font-weight: 600; color: #1d1d1f; }

/* 按钮高级质感 */
.button-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn {
    padding: 14px; border: none; border-radius: 12px; font-weight: 600;
    cursor: pointer; transition: 0.2s; font-size: 15px;
}
.btn-pdf { background: #1d1d1f; color: white; }
.btn-word { background: var(--primary); color: white; }
.btn-share { background: var(--success); color: white; grid-column: span 2; }
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
.btn:active { transform: translateY(0); scale: 0.98; }
.btn:disabled { background: #e5e5ea; color: #aeaeb2; cursor: not-allowed; }

@media (max-width: 400px) {
    .preview-container { grid-template-columns: repeat(3, 1fr); }
}