/* =============================================================================
   Админка. Опирается на токены из app.css — своей палитры не заводит.
   ========================================================================== */
.adm { background: var(--starlight); color: var(--slate); font-family: var(--f-body); }
.adm__wrap { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter); }
.adm__wrap--col { display: block; }

.adm__bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(241, 244, 251, .86);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(143, 166, 206, .28);
}
.adm__bar .adm__wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; flex-wrap: wrap; }
.adm__nav { display: flex; gap: .3rem; margin-inline-start: auto; flex-wrap: wrap; }
.adm__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .95rem;
  border-radius: 999px; color: var(--slate); font-weight: 600; font-size: .95rem;
  transition: background-color .25s ease, color .25s ease;
}
.adm__nav a.is-current { background: var(--cosmos); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .adm__nav a:not(.is-current):hover { background: rgba(143, 166, 206, .22); color: var(--ink); }
}
.adm__out { display: flex; }
.adm__link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem;
  color: var(--muted); font: inherit; font-size: .92rem; font-weight: 600;
  background: none; border: 0; cursor: pointer; transition: color .25s ease;
}
@media (hover: hover) and (pointer: fine) { .adm__link-btn:hover { color: var(--ink); } }

.adm__main { padding-block: clamp(1.8rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem); }
.adm h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: .6rem; }
.adm h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: 1rem; }
.adm__section-h { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.adm__flash {
  margin: 0 0 1.4rem; padding: .9rem 1.1rem; border-radius: 12px;
  font-size: .95rem; border: 1px solid transparent;
}
.adm__flash--ok    { background: rgba(191, 227, 245, .4); border-color: rgba(36, 62, 115, .25); color: var(--ink); }
.adm__flash--error { background: #FDECEC; border-color: #E2B4B4; color: #8A2A2A; }

.adm__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); align-items: start; }
.adm__grid--ai { grid-template-columns: minmax(320px, 1.05fr) minmax(300px, .95fr); }
@media (max-width: 820px) { .adm__grid--ai { grid-template-columns: 1fr; } }

.adm__card {
  background: var(--porcelain); border: 1px solid rgba(143, 166, 206, .3);
  border-radius: 18px; padding: clamp(1.2rem, 2.4vw, 1.8rem);
  box-shadow: var(--shadow-soft);
}
.adm__card--narrow { max-width: 26rem; margin-inline: auto; }

.adm__form { display: grid; gap: 1rem; }
.adm__form--inline { margin-top: .4rem; }
/* Метка — блок, а не grid: иначе текстовый узел и «необязательно»
   становятся отдельными строками сетки и разъезжаются по вертикали. */
.adm__form label { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.5; }
.adm__form label > input,
.adm__form label > textarea,
.adm__form label > select { margin-top: .4rem; }
.adm__opt { font-weight: 400; color: var(--muted); }
.adm__form input[type="text"], .adm__form input[type="password"],
.adm__form textarea, .adm__form select, .adm__form input[type="file"] {
  width: 100%; font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink);
  background: #fff; border: 1px solid rgba(143, 166, 206, .55); border-radius: 10px;
  padding: .7rem .85rem; min-height: 44px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.adm__form textarea { resize: vertical; line-height: 1.5; }
.adm__form :is(input, textarea, select):focus-visible {
  outline: none; border-color: var(--cosmos);
  box-shadow: 0 0 0 3px rgba(191, 227, 245, .8);
}
.adm__form .btn { justify-self: start; }
.adm__hint { font-size: .88rem; color: var(--muted); line-height: 1.55; margin: 0; }
.adm__hint--wait { color: var(--cosmos); font-weight: 600; }
.adm__empty { color: var(--muted); }
.adm__back { margin-top: 1.4rem; font-size: .9rem; }

.adm__preview { display: block; width: 100%; max-width: 240px; border-radius: 12px; margin-block: .2rem 0; }
.adm__preview--big { max-width: 320px; margin-bottom: 1rem; }

.adm__models { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.adm__models legend { font-size: .9rem; font-weight: 600; color: var(--ink); padding: 0 0 .5rem; }
.adm__model {
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  border: 1px solid rgba(143, 166, 206, .45); border-radius: 12px;
  padding: .75rem .9rem; min-height: 44px;
  transition: border-color .25s ease, background-color .25s ease;
}
.adm__model:has(input:checked) { border-color: var(--cosmos); background: rgba(191, 227, 245, .28); }
.adm__model input { margin-top: .25rem; accent-color: var(--cosmos); width: 18px; height: 18px; }
.adm__model span { display: grid; gap: .15rem; font-weight: 400; }
.adm__model strong { color: var(--ink); font-size: .98rem; }
.adm__model small { color: var(--muted); font-size: .85rem; line-height: 1.45; }

.adm__samples { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; }
.adm__sample {
  display: grid; gap: .3rem; width: 100%; min-height: 44px; text-align: left; cursor: pointer;
  background: var(--porcelain); border: 1px solid rgba(143, 166, 206, .35);
  border-radius: 14px; padding: .9rem 1rem; font: inherit;
  transition: border-color .25s ease, transform .25s var(--ease-out);
}
.adm__sample strong { color: var(--ink); font-size: .95rem; }
.adm__sample small { color: var(--muted); font-size: .82rem; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) {
  .adm__sample:hover { border-color: var(--cosmos); transform: translateY(-2px); }
}
.adm__sample:active { transform: scale(.99); transition-duration: var(--press); }

.adm__cards { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.2rem; }
.adm__cardtile {
  background: var(--porcelain); border: 1px solid rgba(143, 166, 206, .3);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
}
.adm__cardtile img { display: block; width: 100%; aspect-ratio: 482 / 974; object-fit: cover; }
.adm__cardtile-text {
  padding: 1.1rem; font-family: var(--f-display); font-size: 1.05rem; line-height: 1.4;
  color: var(--ink); aspect-ratio: 482 / 974; display: flex; align-items: center; text-align: center;
  background: linear-gradient(180deg, rgba(191, 227, 245, .35), rgba(251, 252, 254, .9));
}
.adm__cardtile-meta { padding: .8rem .9rem 1rem; display: grid; gap: .5rem; }
.adm__cardtile-quote { margin: 0; font-size: .86rem; color: var(--slate); line-height: 1.45; }
.adm__cardtile-src { margin: 0; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.adm__badge { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; background: rgba(143, 166, 206, .25); color: var(--cosmos); padding: .15rem .5rem; border-radius: 999px; font-weight: 700; }
.adm__danger {
  justify-self: start; min-height: 44px; padding: 0 .9rem; border-radius: 999px;
  background: none; border: 1px solid #E2B4B4; color: #8A2A2A;
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
@media (hover: hover) and (pointer: fine) { .adm__danger:hover { background: #8A2A2A; color: #fff; border-color: #8A2A2A; } }
.adm__danger:active { transform: scale(.97); transition-duration: var(--press); }