* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
body { background: #0f0f14; color: #f5f5f7; min-height: 100vh; }

/* Панель входа над hero. Занимает только свою строку и не влияет на ширину
   остальной страницы: hero и upload-screen остаются как были. */
.topbar { display: flex; justify-content: flex-end; padding: 14px 20px 0; }
.btn-ghost { background: transparent; border: 1px solid #3a3a45; color: #f5f5f7; padding: 8px 16px; border-radius: 10px; font-size: 14px; cursor: pointer; }

.hero { text-align: center; padding: 60px 20px 30px; }
.hero h1 { font-size: 32px; margin-bottom: 12px; line-height: 1.3; }
.subtitle { color: #a0a0ab; font-size: 18px; }

.screen { max-width: 900px; margin: 0 auto; padding: 20px; text-align: center; }
.screen.hidden { display: none; }

.upload-box { border: 2px dashed #3a3a45; border-radius: 16px; padding: 60px 20px; margin-top: 20px; }
.btn-primary { background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; border: none; padding: 16px 32px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; }
.btn-large { font-size: 18px; padding: 18px 40px; margin-top: 24px; }
.hint { color: #7a7a85; font-size: 14px; margin-top: 12px; }

.progress-bar { width: 100%; height: 10px; background: #232330; border-radius: 5px; overflow: hidden; margin: 20px 0; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg,#7c3aed,#a855f7); transition: width 0.4s ease; }

.warning-text { color: #f59e0b; margin-bottom: 20px; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 14px; margin: 20px 0; }
.results-grid img { width: 100%; border-radius: 10px; aspect-ratio: 3/4; object-fit: cover; background: #1a1a24; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-content { background: #17171f; padding: 32px; border-radius: 16px; max-width: 400px; width: 90%; text-align: center; position: relative; }
/* Без кнопки закрытия модалка, открытая из шапки, запирала бы страницу:
   .modal перекрывает весь экран, а закрыть его было нечем. */
.modal-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: #a0a0ab; font-size: 26px; line-height: 1; cursor: pointer; }
.modal-content h3 { margin-bottom: 12px; }
.modal-content p { color: #a0a0ab; margin-bottom: 20px; font-size: 14px; }
.input-field { width: 100%; padding: 14px; border-radius: 10px; border: 1px solid #3a3a45; background: #0f0f14; color: #fff; margin-bottom: 12px; font-size: 16px; }