* { box-sizing: border-box; font-family: system-ui, sans-serif; }
body { margin: 0; background: #10151c; color: #e6e9ef; }
.auth-box { max-width: 360px; margin: 15vh auto; padding: 24px; }
.auth-box input { width: 100%; padding: 10px; margin: 6px 0 14px; border-radius: 8px; border: 1px solid #333; background: #1a212b; color: inherit; }
.auth-box button { width: 100%; padding: 10px; border-radius: 8px; border: none; background: #3b82f6; color: white; font-weight: 600; }
.error { color: #f87171; }
nav.tabs { display: flex; border-bottom: 1px solid #2a3340; }
nav.tabs button { flex: 1; padding: 14px; background: none; border: none; color: #99a3b3; font-size: 15px; }
nav.tabs button.active { color: #fff; border-bottom: 2px solid #3b82f6; }
main { padding: 16px; max-width: 480px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }
.camera-btn { display: block; width: 100%; padding: 40px 0; text-align: center; border: 2px dashed #3a4556; border-radius: 12px; color: #99a3b3; margin-bottom: 16px; }
.preview { max-width: 100%; border-radius: 8px; margin-bottom: 12px; }
label { display: block; margin: 10px 0 4px; font-size: 13px; color: #99a3b3; }
input, select, textarea { width: 100%; padding: 9px; border-radius: 8px; border: 1px solid #333; background: #1a212b; color: inherit; }
.btn-primary { margin-top: 16px; width: 100%; padding: 12px; border-radius: 8px; border: none; background: #3b82f6; color: white; font-weight: 600; }
.result-card { background: #1a212b; border-radius: 10px; padding: 12px; margin: 10px 0; }
.warn { color: #fbbf24; font-size: 13px; }
.camera-btn.disabled { pointer-events: none; opacity: 0.5; }
.spinner { display:inline-block; width:16px; height:16px; border:2px solid #3a4556; border-top-color:#3b82f6; border-radius:50%; animation:spin 0.8s linear infinite; margin-right:8px; vertical-align:middle; }
@keyframes spin { to { transform: rotate(360deg); } }