/* ============================================================
   In-admin content manager (CMS) styles
   ============================================================ */
.cms-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cms-tab {
  padding: 0.55rem 1.1rem; border-radius: var(--r-pill, 999px); cursor: pointer;
  border: 1px solid var(--line-2, rgba(255,255,255,0.14)); background: transparent;
  color: var(--muted, #9a9488); font-weight: 600; font-size: 0.92rem;
  transition: all 0.2s ease;
}
.cms-tab:hover { color: var(--text, #eee); border-color: var(--gold, #c9a24b); }
.cms-tab.is-active { background: var(--gold, #c9a24b); color: #1a1304; border-color: transparent; }

.cms-pane { display: none; }
.cms-pane.is-active { display: block; }

.cms-msg { font-size: 0.92rem; margin: 0.6rem 0; min-height: 1.2em; color: var(--muted, #9a9488); white-space: pre-wrap; }
.cms-msg.is-ok { color: #46b450; }
.cms-msg.is-err { color: #e2574c; }

.cms-dirty { font-size: 0.78rem; color: #e2a23c; font-weight: 600; margin-left: 0.5rem; }

.cms-help { margin-top: 1rem; font-size: 0.9rem; color: var(--muted, #9a9488); }
.cms-help summary { cursor: pointer; color: var(--gold, #c9a24b); font-weight: 600; }
.cms-help ol { margin: 0.6rem 0 0; padding-left: 1.2rem; line-height: 1.7; }
.cms-help code { background: var(--surface-2, rgba(255,255,255,0.06)); padding: 1px 5px; border-radius: 5px; }

/* form fields */
.cms-f { display: block; margin-bottom: 0.85rem; font-size: 0.86rem; font-weight: 600; color: var(--muted, #9a9488); }
.cms-f input, .cms-f textarea, .cms-f select {
  display: block; width: 100%; margin-top: 0.35rem; padding: 0.6rem 0.7rem;
  border-radius: 10px; border: 1px solid var(--line-2, rgba(255,255,255,0.14));
  background: var(--surface, rgba(255,255,255,0.04)); color: var(--text, #eee);
  font: inherit; font-weight: 500;
}
.cms-f textarea { resize: vertical; }
.cms-f .cms-code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.85rem; line-height: 1.5; }
.cms-imgrow { display: flex; gap: 0.5rem; align-items: stretch; }
.cms-imgrow input { margin-top: 0; }
.cms-imgrow .btn { white-space: nowrap; }

/* gallery grid */
.cms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; margin-top: 0.6rem; }
.cms-card {
  border: 1px solid var(--line-2, rgba(255,255,255,0.12)); border-radius: 14px; overflow: hidden;
  background: var(--surface, rgba(255,255,255,0.03)); display: flex; flex-direction: column;
}
.cms-card__media { aspect-ratio: 16 / 10; background: var(--surface-2, rgba(255,255,255,0.06)); overflow: hidden; }
.cms-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-card__media img.is-broken { opacity: 0.25; }
.cms-card__body { padding: 0.8rem; }
.cms-card__body .cms-f { margin-bottom: 0.55rem; }
.cms-card__act { display: flex; gap: 0.3rem; justify-content: flex-end; padding: 0 0.8rem 0.8rem; }

/* article rows */
.cms-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.8rem 0.9rem; border: 1px solid var(--line-2, rgba(255,255,255,0.1));
  border-radius: 12px; margin-bottom: 0.55rem; background: var(--surface, rgba(255,255,255,0.03));
}
.cms-row__main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cms-row__main strong { color: var(--text, #eee); }
.cms-row__sub { font-size: 0.82rem; color: var(--muted, #9a9488); }
.cms-row__act { display: flex; gap: 0.3rem; align-items: center; flex-shrink: 0; }

/* faq rows */
.cms-faq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.cms-faq { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 0.5rem; align-items: start; margin-bottom: 0.5rem; }
.cms-faq input, .cms-faq textarea {
  width: 100%; padding: 0.5rem 0.6rem; border-radius: 9px; font: inherit;
  border: 1px solid var(--line-2, rgba(255,255,255,0.14)); background: var(--surface, rgba(255,255,255,0.04)); color: var(--text, #eee);
}
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .cms-faq { grid-template-columns: 1fr; }
  .cms-grid { grid-template-columns: 1fr; }
}