/* «Шаблоны сайтов» (web/admin-site-templates.js): the drop zone, the templates with their access, the keys. */
.stpl-upload { display: grid; gap: 12px; }
.stpl-upload h2, .stpl-dev h2, .stpl-list h2 { font-size: 18px; margin: 0; }
.stpl-drop { display: grid; gap: 10px; justify-items: start; padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius-md); background: var(--panel-2); }
.stpl-drop.is-over { border-color: var(--text); background: rgb(255 255 255 / .04); }
.stpl-drop p { margin: 0; }
.stpl-drop .is-disabled { opacity: .5; pointer-events: none; }
.stpl-drop label.button:focus-within { outline: 2px solid var(--text); outline-offset: 2px; }
.stpl-answer { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.stpl-answer p { margin: 0; }
.stpl-answer ul, .stpl-warn ul, .stpl-broken ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }
.stpl-list { display: grid; gap: 10px; margin-top: 18px; }
.stpl-builtin { margin: 0; }
.stpl-item { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.stpl-preview { width: 168px; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--panel-2); }
.stpl-body { flex: 1 1 280px; min-width: 0; display: grid; gap: 6px; }
.stpl-body h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.stpl-body h3 code { font-size: 12px; color: var(--muted); font-weight: 400; }
.stpl-body p { margin: 0; overflow-wrap: anywhere; }
.stpl-pages { font-size: 13px; }
.stpl-actions { margin-top: 4px; }
.stpl-item .pill.ok { background: rgb(90 196 143 / .12); color: var(--ok); }
.stpl-warn summary, .stpl-answer summary { cursor: pointer; color: var(--warn); font-size: 13px; }
.stpl-broken h3 { margin: 0; font-size: 15px; color: var(--danger); }
.stpl-dev { display: grid; gap: 10px; margin-top: 18px; }
.stpl-dev h3 { margin: 6px 0 0; font-size: 15px; }
.stpl-dev p { margin: 0; }
.stpl-keys { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stpl-keys li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.stpl-keys li > span { min-width: 0; overflow-wrap: anywhere; }
.stpl-choices { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.stpl-choice { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; }
.stpl-choice input { margin-top: 3px; }
.stpl-choice span { display: grid; gap: 2px; }
.stpl-choice small { font-size: 12px; }
.stpl-reset { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.stpl-key-value { width: 100%; font-family: ui-monospace, monospace; font-size: 13px; }
.stpl-code { margin: 8px 0 0; padding: 10px 12px; overflow-x: auto; white-space: pre; font-size: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); }