.face-library-settings { margin-top:18px; overflow:hidden; border:1px solid rgba(0,0,0,.08); border-radius:14px; background:var(--surface); }
.face-library-settings[hidden] { display:none!important; }
.face-library-settings-head { display:flex; min-height:78px; align-items:center; justify-content:space-between; gap:20px; padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.08); }
.face-library-settings-head > div { display:grid; gap:2px; }
.face-library-settings-head h2 { font-size:15px; font-weight:700; letter-spacing:0; }
.face-library-settings-head p,.face-library-settings-head > span { color:var(--muted); font-size:11px; }
.face-library-settings-kicker { width:max-content; color:#8d6d00; font-size:9px; font-weight:750; }
.face-library-settings-toggle { display:inline-flex; min-width:92px; height:36px; align-items:center; justify-content:flex-end; gap:8px; padding:0 8px 0 10px; border:1px solid rgba(0,0,0,.12); border-radius:8px; background:#fff; color:var(--muted); font:inherit; font-size:10px; font-weight:650; cursor:pointer; }
.face-library-settings-toggle i,.face-library-settings-prompts summary > i { display:block; width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform 160ms ease; }
.face-library-settings-toggle[aria-expanded="true"] i { transform:rotate(225deg) translate(-1px,-1px); }
.face-library-settings-toggle:hover { border-color:#d2a900; color:var(--text); }
.face-library-settings-body { display:grid; gap:14px; padding:14px; }
.face-library-settings-body[hidden] { display:none; }
.face-library-settings-prompts { overflow:hidden; border:1px solid rgba(0,0,0,.08); border-radius:10px; background:rgba(247,247,248,.72); }
.face-library-settings-prompts summary { display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:14px; padding:9px 12px; color:var(--text); cursor:pointer; list-style:none; }
.face-library-settings-prompts summary::-webkit-details-marker { display:none; }
.face-library-settings-prompts summary > span { display:grid; min-width:0; gap:1px; }
.face-library-settings-prompts summary strong { font-size:12px; font-weight:700; }
.face-library-settings-prompts summary small { color:var(--muted); font-size:9px; }
.face-library-settings-prompts summary > i { flex:0 0 auto; margin-right:2px; }
.face-library-settings-prompts[open] summary > i { transform:rotate(225deg) translate(-1px,-1px); }
.face-library-settings-prompt-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 12px 12px; }
.face-library-settings-prompt-form textarea { width:100%; min-height:92px; resize:vertical; }
.face-library-settings-prompt-actions { display:flex; grid-column:1/-1; align-items:center; justify-content:space-between; gap:10px; }
.face-library-settings-prompt-actions > span { color:var(--muted); font-size:9px; }
.face-library-settings-prompt-actions .face-library-settings-refresh { flex:0 0 auto; }
.face-library-settings-workspace { display:grid; grid-template-columns:292px minmax(0,1fr); min-height:430px; }
.face-library-settings-upload { display:flex; min-width:0; flex-direction:column; gap:12px; padding:16px; border-right:1px solid rgba(0,0,0,.08); }
.face-library-settings-upload-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.face-library-settings-upload-head strong { font-size:13px; }
.face-library-settings-upload-head span { color:var(--muted); font-size:9px; }
.face-library-settings-drop { display:grid; width:100%; aspect-ratio:4/3; place-items:center; overflow:hidden; border:1px dashed rgba(0,0,0,.2); border-radius:8px; background:#f7f7f8; cursor:pointer; transition:border-color 150ms ease,background-color 150ms ease; }
.face-library-settings-drop:hover,.face-library-settings-drop:focus-visible,.face-library-settings-drop.is-dragover { border-color:#d2a900; background:#fff9dc; outline:none; }
.face-library-settings-drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.face-library-settings-drop > span { display:grid; width:100%; height:100%; place-items:center; align-content:center; gap:4px; color:var(--muted); text-align:center; }
.face-library-settings-drop > span > img { width:100%; height:calc(100% - 44px); min-height:0; object-fit:cover; }
.face-library-settings-drop > span > span { display:grid; align-self:stretch; align-content:center; gap:1px; min-width:0; height:44px; padding:0 10px; background:var(--surface); text-align:left; }
.face-library-settings-drop b { overflow:hidden; color:var(--text); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.face-library-settings-drop small { color:var(--muted); font-size:9px; }
.face-library-settings-field { display:grid; min-width:0; gap:4px; color:var(--muted); font-size:9px; font-weight:650; }
.face-library-settings-field input,.face-library-settings-field select,.face-library-settings-field textarea,.face-library-settings-filters select { width:100%; min-width:0; height:36px; padding:0 9px; border:1px solid rgba(0,0,0,.12); border-radius:8px; background:#fff; color:var(--text); font-family:inherit; font-size:11px; font-weight:600; line-height:1.2; }
.face-library-settings-field textarea { height:auto; padding:8px 9px; line-height:1.45; }
.face-library-settings-field input:focus-visible,.face-library-settings-field select:focus-visible,.face-library-settings-field textarea:focus-visible,.face-library-settings-filters select:focus-visible,.face-library-settings-toggle:focus-visible,.face-library-settings-prompts summary:focus-visible { border-color:#d2a900; outline:2px solid rgba(255,213,74,.45); outline-offset:1px; }
.face-library-settings-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.face-library-settings-upload-button { height:38px; margin-top:auto; border:1px solid #e1ac00; border-radius:8px; background:linear-gradient(180deg,#ffe477 0%,#ffd13f 52%,#f0b900 100%); color:#332600; font-family:inherit; font-size:12px; font-weight:700; line-height:1; cursor:pointer; transition:transform 140ms ease,filter 140ms ease; }
.face-library-settings-upload-button:hover:not(:disabled) { filter:brightness(1.02); transform:scale(1.01); }
.face-library-settings-upload-button:active:not(:disabled) { transform:scale(.985); }
.face-library-settings-upload-button:disabled { opacity:.42; cursor:not-allowed; }
.face-library-settings-browser { display:flex; min-width:0; min-height:0; flex-direction:column; padding:16px; }
.face-library-settings-toolbar { display:flex; align-items:end; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid rgba(0,0,0,.08); }
.face-library-settings-filters { display:grid; width:min(420px,100%); grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.face-library-settings-filters label { display:grid; min-width:0; gap:4px; color:var(--muted); font-size:9px; font-weight:650; }
.face-library-settings-refresh { height:36px; padding:0 11px; border:1px solid rgba(0,0,0,.12); border-radius:8px; background:#fff; color:var(--text); font-family:inherit; font-size:11px; font-weight:650; line-height:1; cursor:pointer; }
.face-library-settings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); align-content:start; gap:9px; max-height:420px; padding:12px 4px 4px 0; overflow-x:hidden; overflow-y:auto; scrollbar-gutter:stable; }
.face-library-settings-card { display:grid; grid-template-columns:58px minmax(0,1fr); min-height:68px; align-items:center; gap:8px; padding:5px; overflow:hidden; border:1px solid rgba(0,0,0,.08); border-radius:8px; background:#fff; }
.face-library-settings-card > img { width:58px; height:58px; border-radius:6px; background:#ececef; object-fit:cover; }
.face-library-settings-card > img.is-missing { opacity:.2; }
.face-library-settings-card > div { display:grid; min-width:0; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 5px; }
.face-library-settings-card strong,.face-library-settings-card small { grid-column:1/-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.face-library-settings-card strong { color:var(--text); font-size:10px; }
.face-library-settings-card small { color:var(--muted); font-size:8px; }
.face-library-settings-card button { grid-column:2; margin-top:4px; padding:2px 0; border:0; background:transparent; color:#77777c; font-family:inherit; font-size:9px; font-weight:600; line-height:1; cursor:pointer; }
.face-library-settings-card button:hover { color:#b4232c; }
.face-library-settings-card button[data-confirm="true"] { color:#b4232c; }
.face-library-settings-empty { display:grid; min-height:260px; place-items:center; align-content:center; gap:5px; color:var(--muted); text-align:center; }
.face-library-settings-empty[hidden] { display:none; }
.face-library-settings-empty > span { position:relative; width:46px; height:46px; margin-bottom:6px; border:1px solid rgba(0,0,0,.12); border-radius:50%; }
.face-library-settings-empty > span::before { content:""; position:absolute; left:50%; top:9px; width:12px; height:12px; border:1.5px solid currentColor; border-radius:50%; transform:translateX(-50%); }
.face-library-settings-empty > span::after { content:""; position:absolute; left:50%; bottom:8px; width:23px; height:11px; border:1.5px solid currentColor; border-bottom:0; border-radius:14px 14px 0 0; transform:translateX(-50%); }
.face-library-settings-empty strong { color:var(--text); font-size:11px; }
.face-library-settings-empty small { font-size:9px; }
.face-library-settings.is-loading .face-library-settings-grid { opacity:.45; }
html.theme-dark .face-library-settings { border-color:rgba(255,255,255,.08); }
html.theme-dark .face-library-settings-head,html.theme-dark .face-library-settings-upload,html.theme-dark .face-library-settings-toolbar { border-color:rgba(255,255,255,.08); }
html.theme-dark .face-library-settings-kicker { color:#ffd54a; }
html.theme-dark .face-library-settings-toggle,html.theme-dark .face-library-settings-prompts { border-color:rgba(255,255,255,.1); background:#242424; color:#f0f0f0; }
html.theme-dark .face-library-settings-drop { border-color:rgba(255,255,255,.18); background:#242424; }
html.theme-dark .face-library-settings-drop:hover,html.theme-dark .face-library-settings-drop:focus-visible,html.theme-dark .face-library-settings-drop.is-dragover { border-color:#d2a900; background:#2b291f; }
html.theme-dark .face-library-settings-field input,html.theme-dark .face-library-settings-field select,html.theme-dark .face-library-settings-field textarea,html.theme-dark .face-library-settings-filters select,html.theme-dark .face-library-settings-refresh,html.theme-dark .face-library-settings-card { border-color:rgba(255,255,255,.1); background:#242424; color:#f0f0f0; }
html.theme-dark .face-library-settings-card > img { background:#303034; }
html.theme-dark .face-library-settings-empty > span { border-color:rgba(255,255,255,.14); }
@media (max-width:820px) {
  .face-library-settings-workspace { grid-template-columns:1fr; }
  .face-library-settings-upload { border-right:0; border-bottom:1px solid rgba(0,0,0,.08); }
  .face-library-settings-drop { max-height:280px; }
  .face-library-settings-toolbar { align-items:stretch; flex-direction:column; }
  .face-library-settings-filters { width:100%; }
  .face-library-settings-refresh { align-self:flex-end; }
  .face-library-settings-grid { max-height:360px; }
}
@media (max-width:520px) {
  .face-library-settings-head { align-items:flex-start; }
  .face-library-settings-meta,.face-library-settings-filters { grid-template-columns:1fr; }
  .face-library-settings-grid { grid-template-columns:1fr; }
  .face-library-settings-prompt-form { grid-template-columns:1fr; }
  .face-library-settings-prompt-actions { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .face-library-settings-drop,.face-library-settings-upload-button,.face-library-settings-toggle i,.face-library-settings-prompts summary > i { transition:none; } }
