/* /admin → Models. Same surface language as the Design page: flat panels, one
   accent, no chrome competing with the data. */
.am-wrap { display: flex; flex-direction: column; gap: 18px; }
.am-loading { padding: 40px 0; color: var(--ink3); font-size: 14px; }
.am-lede { font-size: 13.5px; line-height: 1.6; color: var(--ink3); margin: 0 0 12px; max-width: 76ch; }
.am-lede--top { margin-bottom: 4px; }

.am-group { background: var(--panel); border-radius: 14px; padding: 16px 18px 18px; box-shadow: inset 0 0 0 1px var(--line); }
.am-h { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }

.am-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.am-slot { background: var(--panel2); border-radius: 11px; padding: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.am-slot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.am-slot-label { font-size: 13px; font-weight: 800; color: var(--ink); }
/* "changed" = this slot is no longer on the code default. Worth seeing at a
   glance when a generation starts behaving differently than the repo says. */
.am-badge {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--purple-l);
  background: rgba(124,77,255,.16); border-radius: 5px; padding: 2px 6px;
}
.am-select, .am-input {
  width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.06); color: var(--ink);
  font: 600 13px var(--sans); outline: none;
}
.am-select:focus, .am-input:focus { box-shadow: inset 0 0 0 2px var(--purple-l); }
.am-endpoint {
  margin-top: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--ink4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-prompt { margin-top: 10px; }
.am-prompt > summary {
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink3);
  list-style: none; user-select: none;
}
.am-prompt > summary::-webkit-details-marker { display: none; }
.am-prompt > summary::before { content: '▸ '; color: var(--ink4); }
.am-prompt[open] > summary::before { content: '▾ '; }
.am-textarea {
  width: 100%; margin-top: 8px; padding: 9px 10px; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.05); color: var(--ink);
  font: 500 12.5px/1.55 var(--sans); resize: vertical; outline: none;
}
.am-textarea:focus { box-shadow: inset 0 0 0 2px var(--purple-l); }
.am-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.am-btn {
  height: 30px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer;
  font: 700 12px var(--sans); color: var(--ink2); background: rgba(255,255,255,.07);
}
.am-btn:hover { color: var(--ink); background: rgba(255,255,255,.12); }
.am-btn--go { color: #141417; background: var(--ink); }
.am-btn[disabled] { opacity: .5; cursor: default; }
.am-hint { font-size: 11px; color: var(--ink4); }
.am-err { font-size: 12px; font-weight: 600; color: #ff8a8a; }

.am-eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.am-ep { background: var(--panel2); border-radius: 11px; padding: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.am-ep-name { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.am-ep-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.am-ep-row > span {
  flex: 0 0 58px; font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink4);
}
.am-ep-row .am-input { font-family: var(--mono); font-size: 11px; }

.am-pfp { display: flex; gap: 16px; flex-wrap: wrap; }
.am-pfp-out {
  flex: 0 0 200px; width: 200px; height: 200px; border-radius: 12px; overflow: hidden;
  background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line);
  display: flex; align-items: center; justify-content: center;
}
.am-pfp-out img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-pfp-empty, .am-spin { font-size: 12.5px; font-weight: 600; color: var(--ink4); }
.am-pfp-side { flex: 1; min-width: 260px; display: flex; flex-direction: column; }

/* ── The SHOT and CAMERA registries ────────────────────────────────────────
   One row per framing: its tile, its name, and the direction it hands the
   model — everything you need to tell two of them apart without opening
   anything. Editing opens in place rather than in a dialog, because the whole
   point is comparing an entry against the ones above and below it. */
.am-frs { display: flex; flex-direction: column; gap: 8px; }
.am-fr {
  display: flex; gap: 12px; padding: 10px; border-radius: 11px;
  background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line);
}
.am-fr.is-hidden { opacity: .55; }
.am-fr-thumb {
  flex: 0 0 104px; width: 104px; height: 59px; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center;
}
.am-fr-thumb > img, .am-fr-thumb > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-fr-thumb--none { font-size: 10.5px; font-weight: 600; color: var(--ink4); }
.am-fr-main { flex: 1; min-width: 0; }
.am-fr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-fr-name { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.am-fr-key { font-family: var(--mono); font-size: 10px; color: var(--ink4); }
.am-fr-toggle { margin-left: auto; }
.am-fr-dir {
  margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--ink3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.am-fr-edit { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.am-fr-f { display: block; }
.am-fr-f > span {
  display: block; margin-bottom: 4px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink4);
}
.am-fr-f .am-textarea { margin-top: 0; }
.am-fr-new { margin-top: 10px; padding: 12px; border-radius: 11px; background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line); }
.am-badge--off { color: #ff9a9a; background: rgba(255,107,107,.16); }
/* Destructive, and marked as such — the design rules ask for it. */
.am-btn--danger { color: #ff8a8a; }
.am-btn--danger:hover { color: #fff; background: rgba(255,107,107,.22); }

/* ── The Prompts tab ───────────────────────────────────────────────────────
   Shares the registry row (.am-fr) — a prompt and a framing are the same
   shape of thing to work with: a name, what it says, and one box to change
   it. The only additions are the finder and the shipped-text reference. */
.ap-search { margin-bottom: 2px; }
.ap-search .am-input { height: 40px; font-size: 13.5px; }
.ap-def {
  margin: 8px 0 0; padding: 9px 10px; border-radius: 8px;
  background: rgba(255,255,255,.04); color: var(--ink3);
  font: 500 11.5px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow: auto;
}
.ap-none { font-size: 13px; color: var(--ink3); }