* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f5f7; color: #1d1d1f; }
header { background: #fff; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e5ea; }
header h1 { margin: 0; font-size: 18px; }
header .logout { font-size: 13px; color: #6e6e73; text-decoration: none; }
main { max-width: 560px; margin: 0 auto; padding: 20px; }

.stack { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #424245; font-weight: 500; }
input[type=text], input[type=password], input[type=date], select { font-size: 17px; padding: 12px; border: 1px solid #d2d2d7; border-radius: 10px; background: #fff; width: 100%; }
input:focus, select:focus { outline: none; border-color: #0071e3; }

button, .button { font-size: 17px; padding: 14px; border-radius: 12px; border: none; cursor: pointer; text-align: center; text-decoration: none; display: block; font-weight: 500; }
button.primary, .primary.button { background: #0071e3; color: #fff; }
button.primary:active, .primary.button:active { background: #005bb5; }
button.secondary { background: #fff; color: #0071e3; border: 1px solid #d2d2d7; }

.photo-btn { background: #0071e3; color: #fff; padding: 28px 20px; border-radius: 14px; text-align: center; font-size: 18px; font-weight: 500; cursor: pointer; }
.photo-btn:active { background: #005bb5; }
.photo-btn.secondary-btn { background: #fff; color: #0071e3; border: 1px solid #d2d2d7; }
.photo-btn.secondary-btn:active { background: #f5f5f7; }

.flash { padding: 12px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.flash-error { background: #ffe5e5; color: #a61b1b; }
.flash-warning { background: #fff4cc; color: #7a5a00; }

.spinner { width: 40px; height: 40px; border: 4px solid #e5e5ea; border-top-color: #0071e3; border-radius: 50%; margin: 40px auto 20px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#preview { width: 100%; max-height: 280px; object-fit: contain; background: #000; border-radius: 10px; margin-bottom: 16px; }

.success { text-align: center; padding: 40px 20px; }
.success h2 { font-size: 28px; margin: 0 0 12px; }
.success p { color: #424245; margin: 8px 0 24px; }