* { box-sizing: border-box; }
body { margin:0; background:#f2f4f6; color:#20252a; font-family:Arial,Helvetica,sans-serif; }
.card { width:min(100% - 24px, 620px); margin:18px auto; background:#fff; border-radius:14px; box-shadow:0 3px 18px rgba(0,0,0,.12); padding:20px; }
h1 { margin:0 0 8px; font-size:1.55rem; }
h2 { font-size:1.15rem; margin:0 0 12px; }
.userline { color:#555; margin-bottom:18px; }
label { display:block; font-weight:bold; margin:12px 0 6px; }
input[type=text], input[type=password] { width:100%; padding:13px; font-size:18px; border:1px solid #bbb; border-radius:8px; }
button, .secondary, .small-button { display:inline-block; border:0; border-radius:9px; padding:14px 16px; font-size:18px; text-align:center; text-decoration:none; cursor:pointer; }
.primary { width:100%; background:#1769aa; color:#fff; }
.primary:disabled { opacity:.45; cursor:not-allowed; }
.small-button { font-size:14px; padding:8px 10px; background:#eee; color:#222; }
.app-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.photo-section { margin-top:22px; padding-top:18px; border-top:1px solid #ddd; }
.photo-button { width:100%; background:#e9f2fb; border:1px solid #9ebbd4; }
.hidden-file { display:none; }
.preview { margin-top:12px; min-height:10px; }
.preview img { display:block; max-width:100%; max-height:420px; margin:auto; border-radius:8px; }
.finish { margin-top:18px; }
.progress-wrap { height:10px; background:#e3e6e8; border-radius:10px; overflow:hidden; margin-top:14px; }
.progress-bar { height:100%; width:0; background:#1769aa; transition:width .2s; }
.status { margin-top:10px; min-height:24px; text-align:center; font-weight:bold; }
.success { color:#187a35; }
.error { color:#b00020; background:#fdeaea; padding:10px; border-radius:7px; margin-bottom:12px; }
.info { background:#eaf3ff; padding:10px; border-radius:7px; margin-bottom:12px; }
.download-section { margin-top:20px; border-top:1px solid #ddd; padding-top:18px; }
.secondary { width:100%; background:#e8e8e8; color:#222; }
.disabled { opacity:.45; pointer-events:none; }
footer { margin-top:20px; text-align:center; color:#777; font-size:12px; }
@media (max-width:420px) { .card { width:100%; min-height:100vh; margin:0; border-radius:0; } h1 { font-size:1.35rem; } }