/* Тестовый клиент: формы, заглушки, статусы. Палитра и основа — styles.css. */
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.field input, .field select { font: inherit; font-size: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; width: 100%; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form-error { color: #b3261e; font-size: 13px; }
:root[data-theme="dark"] .form-error { color: #f2b8b5; }
.form button[disabled], .btn[disabled] { opacity: .6; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); word-break: break-all; }
.verdict.stub { border-style: dashed; }
.verdict.err { border-color: #b3261e55; }
.loading { padding: 40px 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.card-pick { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); font-size: 13px; background: none; border: 0; padding: 0; text-align: left; }
.card-pick .photo { aspect-ratio: 3 / 4; border-radius: 12px; }
.card-pick[aria-pressed="true"] .photo { box-shadow: 0 0 0 2px var(--gold); }
.card-pick small { color: var(--muted); font-size: 11px; }
.ph-tag { position: absolute; left: 6px; top: 6px; font-size: 10px; padding: 2px 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); padding: 0; }
.swatch[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.status { font-size: 13px; color: var(--muted); }
.status b { color: var(--ink); }
.big-photo { aspect-ratio: 3 / 4; }
.big-photo img { object-position: 50% 30%; }
a.chip { text-decoration: none; display: inline-block; }
a.kv { color: var(--ink); text-decoration: none; }
/* Карточка каталога без фото: название и «Фото скоро» вместо чужого снимка */
.no-photo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; text-align: center; color: var(--muted); }
.no-photo b { font-weight: 500; color: var(--ink); font-size: 13px; line-height: 1.2; }
.no-photo small { font-size: 11px; }
/* Подбор по лицу: вопросы в одно касание, плитки со скелетоном, ракурсы листаются */
.q-title { font-size: 22px; line-height: 1.2; }
.answers { display: flex; flex-direction: column; gap: 8px; }
.answer { border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 15px 14px; text-align: left; font-size: 16px; font-weight: 500; }
.answer[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.face-pick .photo { aspect-ratio: 3 / 4; }
.face-pick .dim { color: var(--muted); }
.best { position: absolute; left: 6px; top: 6px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--gold-btn); color: #ffffff; }
.best-badge { border: 0; background: var(--gold-btn); color: #ffffff; }
.skel { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; background: linear-gradient(100deg, var(--panel) 30%, var(--line) 50%, var(--panel) 70%); background-size: 300% 100%; animation: skel 1.6s ease-in-out infinite; }
.skel span { font-size: 11px; color: var(--muted); }
.skel.off { animation: none; background: var(--panel); border: 1px dashed var(--line); align-items: center; padding: 0; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
.progress.slow i { animation-duration: 30s; }
.views { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.views::-webkit-scrollbar { display: none; }
.views .view { flex: 0 0 100%; aspect-ratio: 2 / 3; scroll-snap-align: center; }
.views .view img { object-position: 50% 35%; }
.row.master { gap: 2px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }