/* Гав VK Mini App — каркас MVP (в стиле ВК, без тяжёлых зависимостей) */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #edeef0; color: #000;
  -webkit-font-smoothing: antialiased;
}
#app { max-width: 480px; margin: 0 auto; padding: 16px; }
.screen {
  background: #fff; border-radius: 12px; padding: 20px;
  margin-top: 12px; text-align: center;
}
.hidden { display: none !important; }
h1 { font-size: 20px; margin-bottom: 10px; }
h2 { font-size: 17px; margin: 14px 0 10px; }
.muted { color: #818c99; font-size: 14px; line-height: 1.4; margin-bottom: 14px; }
.logo { font-size: 28px; font-weight: 800; letter-spacing: 4px; margin-bottom: 8px; }
.error { color: #e64646; font-size: 14px; margin-top: 12px; }

.btn {
  display: block; width: 100%; padding: 12px; margin-top: 10px;
  border: none; border-radius: 10px; background: #e5ebf1;
  font-size: 16px; font-weight: 500; cursor: pointer; color: #000;
}
.btn.primary { background: #2688eb; color: #fff; }
.btn.primary:disabled { opacity: .5; }
.btn.gender { padding: 24px; font-size: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.consent {
  display: flex; gap: 8px; text-align: left; font-size: 13px;
  color: #555; line-height: 1.4; margin: 12px 0; cursor: pointer;
}
.consent a { color: #2688eb; }

.style-chip {
  padding: 10px 4px; border-radius: 10px; background: #f5f5f7;
  font-size: 13px; cursor: pointer; border: 2px solid transparent;
}
.style-chip.sel { border-color: #2688eb; background: #e7f2ff; }
.cat-title { text-align: left; font-size: 14px; font-weight: 600;
  margin: 14px 0 8px; color: #555; }

.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#photo-preview { max-width: 100%; max-height: 300px; border-radius: 12px; margin-top: 12px; }
#result-img { max-width: 100%; border-radius: 12px; margin: 8px 0; }

.pack {
  display: flex; justify-content: space-between; align-items: center;
  border: 2px solid #e5ebf1; border-radius: 10px; padding: 12px;
  margin-top: 8px; cursor: pointer;
}
.pack .p-credits { font-size: 14px; color: #555; }
.pack .p-price { font-weight: 700; font-size: 17px; }

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

.row-top { display: flex; align-items: center; justify-content: space-between; }
.row-top h1 { margin-bottom: 0; }
.btn-mini {
  border: none; background: none; color: #2688eb; font-size: 14px;
  cursor: pointer; padding: 6px;
}
#gallery-grid img, .gallery-cell {
  width: 100%; border-radius: 8px; display: block; margin-bottom: 8px;
  cursor: pointer;
}