body { max-width: 800px; margin: 0 auto; padding: 20px; font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; } h1 { text-align: center; color: #2d3748; margin-bottom: 2rem; } #container { display: flex; flex-direction: column; align-items: center; padding: 2rem; border: 2px dashed #cbd5e0; border-radius: 1rem; background: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: border-color 0.3s ease; } #container:hover { border-color: #4a5568; } #container svg { margin-bottom: 1rem; opacity: 0.7; } #container div { margin-top: 1.5rem; width: 100%; max-width: 400px; } input[type="text"] { width: 100%; padding: 0.75rem 1rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; font-size: 1rem; transition: border-color 0.3s ease; background: #f8fafc; } input[type="text"]:focus { outline: none; border-color: #4a5568; box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1); } #example { display: inline-block; margin-top: 0.5rem; color: #4299e1; cursor: pointer; font-size: 0.875rem; transition: color 0.3s ease; } #example:hover { color: #2b6cb0; text-decoration: underline; } #status { display: block; margin-top: 1.5rem; text-align: center; color: #4a5568; font-size: 0.875rem; padding: 0.5rem; border-radius: 0.5rem; background: #edf2f7; } #upload { display: none; } @media (max-width: 640px) { body { padding: 1rem; } #container { padding: 1.5rem; } }