:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background-color: #f2f2f7; margin: 0; padding: 20px; display: flex; justify-content: center; }
.container { background: white; border-radius: 12px; padding: 24px; width: 100%; max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
h1 { font-size: 24px; font-weight: 600; text-align: center; margin-top: 0; }
.input-group { margin-bottom: 16px; }
label { display: block; font-size: 14px; color: #6c757d; margin-bottom: 6px; }
input { width: 100%; padding: 12px; border: 1px solid #ced4da; border-radius: 8px; box-sizing: border-box; font-size: 16px; }
canvas { border: 1px solid #ced4da; border-radius: 8px; width: 100%; height: 150px; background: #fafafa; touch-action: none; }
button { width: 100%; padding: 14px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 10px; }
.primary-btn { background-color: #007aff; color: white; }
.secondary-btn { background-color: #e5e5ea; color: #007aff; margin-top: 8px; padding: 10px; }
#statusMessage { margin-top: 16px; text-align: center; font-size: 14px; font-weight: 500; }