/* SV3 LIBRARY WINDOW (#7121) — the SFX library management page.
   Copy rule: static copy never truncates — text wraps, containers grow. */
.slw-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(6, 8, 9, 0.62);
  display: flex; align-items: center; justify-content: center; }
.slw-card { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto;
  background: var(--bg-panel, #14191a); border: 1px solid var(--line-soft, #293234);
  border-radius: 10px; padding: 16px 18px 14px; color: var(--fg, #edf2f1);
  font: 13px/1.5 var(--sans, -apple-system, sans-serif); }
.slw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.slw-title { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .18em; color: var(--fg-mute, #8b9998); }
.slw-x { background: none; border: 0; color: var(--fg-dim, #5f6b6b); font-size: 13px; cursor: pointer; padding: 4px 6px; }
.slw-x:hover { color: var(--fg, #edf2f1); }
.slw-sub { margin-top: 6px; color: var(--fg-mute, #8b9998); font-size: 12px; white-space: normal; }
.slw-create { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.slw-createrow { display: flex; gap: 8px; flex-wrap: wrap; }
.slw-name { background: var(--bg-row, #181e1f); border: 1px solid var(--line-soft, #293234);
  border-radius: 7px; color: var(--fg, #edf2f1); padding: 8px 10px; font: 13px/1.4 var(--sans, sans-serif); width: 100%; box-sizing: border-box; }
.slw-btn { background: var(--bg-row, #181e1f); border: 1px solid var(--line-strong, #3a4648);
  border-radius: 7px; color: var(--fg, #edf2f1); padding: 8px 12px; font: 12px/1.2 var(--mono, monospace);
  letter-spacing: .04em; cursor: pointer; white-space: normal; text-align: left; }
.slw-btn:hover { border-color: var(--ss-accent, #ccde49); }
.slw-btn.primary { border-color: var(--ss-accent, #ccde49); color: var(--ss-accent, #ccde49); }
.slw-btn.ghost { border-color: var(--line-soft, #293234); color: var(--fg-dim, #5f6b6b); }
.slw-btn.sm { padding: 6px 10px; flex-shrink: 0; }
.slw-note { color: var(--fg-mute, #8b9998); font-size: 12px; background: var(--bg-row, #181e1f);
  border: 1px solid var(--line-soft, #293234); border-radius: 7px; padding: 8px 10px; white-space: normal; }
.slw-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.slw-empty { color: var(--fg-dim, #5f6b6b); font-size: 12px; padding: 10px 2px; }
.slw-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: var(--bg-row, #181e1f); border: 1px solid var(--line-soft, #293234); border-radius: 8px; }
.slw-rowmain { flex: 1; min-width: 0; }
.slw-rowname { font-size: 13px; color: var(--fg, #edf2f1); white-space: normal; word-break: break-word; }
.slw-rowmeta { font-family: var(--mono, monospace); font-size: 10.5px; color: var(--fg-dim, #5f6b6b); margin-top: 2px; }
.slw-rowstatus { font-size: 11.5px; color: var(--fg-mute, #8b9998); margin-top: 5px; white-space: normal; }
.slw-foot { margin-top: 12px; color: var(--fg-dim, #5f6b6b); font-size: 11px; white-space: normal; }