.included-intro { margin: 0 0 20px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.included-load-notice { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin: 8px 0; padding: 28px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); text-align: center; }
.included-load-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-faint); color: var(--muted); }
.included-load-icon svg { width: 23px; height: 23px; }
.included-load-notice p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.included-load-notice button { min-height: 34px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px #00000008; }
.included-load-notice button:hover { background: var(--accent-faint); color: var(--accent); }
.included-load-notice button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.included-load-notice button:disabled { opacity: .55; cursor: wait; }
.included-section + .included-section { margin-top: 24px; }
.included-section > header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.included-section h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.included-section > header > span { font-size: 11px; color: var(--muted); }
.included-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.included-card { display: flex; min-width: 0; padding: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface-raised); text-align: left; cursor: grab; }
.included-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; }
.included-card > span { padding: 7px 8px; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.included-card:hover { box-shadow: 0 3px 10px #00000012; }
.included-card-shell { position: relative; min-width: 0; }
.included-card-shell .included-card { width: 100%; height: 100%; }
.included-card-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.included-card-tools button { display: grid; place-items: center; width: 28px; height: 28px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); color: var(--muted); box-shadow: 0 1px 3px #00000012; cursor: pointer; }
.included-card-tools button[draggable=true] { cursor: grab; }
.included-card-tools svg { width: 16px; height: 16px; pointer-events: none; }
.included-card-tools button:hover { color: var(--text); background: var(--surface-hover); }
.included-card-tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.included-card:focus-visible, .included-preview button:focus-visible { outline: 2px solid var(--accent, #1684f8); outline-offset: 2px; }
.included-preview { width: min(920px, 92vw); max-height: 92dvh; padding: 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: linear-gradient(var(--surface-raised), var(--surface-raised)), var(--bg); box-shadow: 0 18px 70px #0003; }
.included-preview::backdrop { background: #0008; }
.included-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.included-preview h2 { margin: 0; font-size: 15px; }
.included-preview > img { display: block; width: 100%; height: min(65dvh, 760px); object-fit: contain; margin: 12px 0; background: #f5f5f3; border-radius: 8px; }
.included-preview footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.included-preview button { padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.included-preview [data-use] { background: var(--accent, #1684f8); color: white; }
.included-preview [data-delete] { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-inline-start: 8px; color: var(--danger, #d94f45); }
.included-preview [data-delete] svg { width: 15px; height: 15px; }
.included-preview button:disabled { opacity: .5; cursor: default; }
.included-preview-inline { width: auto; max-width: 100%; max-height: none; min-width: 0; margin: 0; box-shadow: none; box-sizing: border-box; }
.included-preview-inline[hidden], .included-preview-inline > img { display: none; }
.included-preview-inline > header { margin-bottom: 8px; }
.included-preview-inline h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.included-preview-inline .included-status:empty { display: none; }
.included-preview-inline footer { justify-content: flex-start; }
@media (min-width: 1100px) {
  #canvasPanel > .included-preview-inline { grid-row: 3; }
}
@media (hover: hover) and (pointer: fine) { .included-preview [data-delete]:not(:disabled):hover { background: color-mix(in srgb, var(--danger, #d94f45) 8%, var(--bg)); } }
.included-status { min-height: 1.5em; margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
@media (max-width: 600px) { .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .included-preview { padding: 10px; } }

/* Match the adjacent user-image sections with visible group boundaries. */
.included-section {
  min-width: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-raised); overflow: hidden;
}
.included-section + .included-section { margin-top: 16px; }
.included-section > header {
  min-height: 42px; box-sizing: border-box; margin: 0; padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-raised) 65%, var(--bg));
}
.included-section > header > span { padding: 2px 6px; border-radius: 6px; background: var(--density-selected-bg); }
.included-section > .included-grid { padding: 12px; }
.included-section > .included-grid:empty { min-height: 24px; }
.included-upload { margin-inline-start: auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 11px; cursor: pointer; }
.included-upload:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.included-section > header { flex-wrap: wrap; }
.included-card > span { font-weight: 600; }

.included-card > span,
.builtin-model-content { position: relative; }
.included-selection-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.included-selection-toolbar > span { color:var(--accent); font-size:12px; font-weight:600; }
.included-selection-toolbar button, .included-section [data-delete-selection] { min-height:30px; padding:4px 9px; border:1px solid var(--line); border-radius:8px; background:var(--surface-raised); color:var(--text); font:inherit; font-size:12px; cursor:pointer; }
.included-selection-toolbar [data-delete-selection], .included-section [data-delete-selection] { color:var(--danger-text, #c73030); }
.included-selection-toolbar button:disabled, .included-section [data-delete-selection]:disabled { opacity:.4; cursor:default; }
.included-section > header { flex-wrap:wrap; }
.included-card-shell { border-radius:9px; }
.included-card-shell.is-selected::after, .included-card-shell.is-deselecting::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:var(--photo-selection-wash, rgb(72 78 88 / 13%)); }
.included-card-shell.is-previewing > .included-card { outline: 2px solid var(--accent); outline-offset: -2px; }
.included-card-shell.is-selecting::after { animation:included-select 160ms ease-out; }
.included-card-shell.is-deselecting::after { animation:included-select 160ms ease-out reverse forwards; }
@keyframes included-select { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .included-card-shell::after { animation:none !important; } }
.included-selection-check { position:absolute; top:8px; right:8px; z-index:5; width:24px; height:24px; min-height:0; padding:0; display:grid; place-items:center; border:1.5px solid rgb(255 255 255 / 90%); border-radius:50%; background:rgb(255 255 255 / 16%); color:white; box-shadow:0 0 0 .5px rgb(0 0 0 / 18%), 0 1px 3px rgb(0 0 0 / 12%); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; cursor:pointer; }
.included-selection-check::before { content:""; position:absolute; inset:-5px; border-radius:50%; }
.included-selection-check svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.included-selection-check[aria-checked="true"] { background:#007aff; border-color:rgb(255 255 255 / 95%); box-shadow:0 1px 3px rgb(0 0 0 / 16%); }
.included-selection-check[aria-checked="true"] svg { opacity:1; }
.included-card-shell.is-selected .included-selection-check, .included-card-shell:focus-within .included-selection-check { opacity:1; }
@media (hover:hover) { .included-card-shell:hover .included-selection-check { opacity:1; } }
@media (hover:none), (pointer:coarse) { .included-selection-check { opacity:1; width:36px; height:36px; } }
.included-selection-check:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.included-card:focus-visible, .included-selection-toolbar button:focus-visible, .included-section [data-delete-selection]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.included-marquee { position:absolute; z-index:8; pointer-events:none; border:1px solid var(--accent); background:var(--accent-faint); }
.included-marquee[hidden] { display:none; }
#createMoodboardDock.show-samples #deleteLibrarySelectionButton { display:none; }

.sample-name-dialog { width:min(360px, calc(100vw - 32px)); box-sizing:border-box; padding:24px; border:1px solid var(--border, #d3d7df); border-radius:18px; background:var(--panel, #fff); color:var(--text, #222); box-shadow:0 16px 48px #0002, 0 2px 8px #0001; font:inherit; }
.sample-name-dialog::backdrop { background:#17203040; }
.sample-name-dialog form { display:grid; gap:20px; }
.sample-name-dialog label { display:grid; gap:16px; font-size:16px; line-height:1.4; font-weight:600; }
.sample-name-dialog :is(input, select) { display:block; width:100%; min-width:0; box-sizing:border-box; min-height:42px; padding:10px 12px; font:inherit; font-size:14px; font-weight:400; line-height:1.4; color:inherit; background:var(--surface, #fff); border:1px solid var(--border, #d3d7df); border-radius:10px; transition:border-color .15s, box-shadow .15s; }
.sample-name-dialog select { appearance:none; padding-inline-end:38px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
[dir=rtl] .sample-name-dialog select { background-position:left 12px center; }
.sample-name-dialog :is(input, select):focus { outline:2px solid var(--accent, #08f); outline-offset:2px; border-color:var(--accent, #08f); box-shadow:0 0 0 4px var(--accent-faint, #007aff12); }
.sample-name-dialog form > div { display:flex; justify-content:flex-end; gap:8px; }
.sample-name-dialog button { min-height:36px; min-width:68px; font:inherit; font-size:14px; font-weight:500; line-height:1.4; padding:8px 16px; border:1px solid var(--border, #d3d7df); border-radius:9px; color:var(--text, #222); background:var(--surface, #fff); cursor:pointer; }
.sample-name-dialog button[type=submit] { background:var(--accent, #08f); color:white; border-color:transparent; }
.sample-name-dialog button:focus-visible { outline:2px solid var(--accent, #08f); outline-offset:2px; }
.sample-name-dialog button:hover:not(:disabled) { filter:brightness(.97); }
.sample-name-dialog :disabled { opacity:.55; cursor:default; }
.sample-name-dialog p { margin:0; font-size:13px; line-height:1.5; color:var(--muted, #666); overflow-wrap:anywhere; }
.sample-name-dialog p:empty { display:none; }
@media (prefers-reduced-motion:reduce) { .sample-name-dialog :is(input, select) { transition:none; } }

/* Sample cards pair a single-line title with readable descriptive copy. */
.included-card .included-card-title { display:block; width:100%; box-sizing:border-box; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); padding:7px 8px 3px; font-size:11px; font-weight:600; line-height:1.35; }
.included-card .included-card-description { display:block; padding:0 8px 9px; color:var(--muted); font:inherit; font-size:11px; font-weight:400; line-height:1.5; white-space:normal; overflow-wrap:anywhere; text-align:start; }

.included-card .included-card-description[hidden] { display:none; }
.included-card:has(.included-card-description[hidden]) .included-card-title { padding-bottom:9px; }

/* Shared long-press ordering for both libraries. */
.image-order-lock { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:6px!important; border:1px solid var(--line); border-radius:8px; background:var(--surface-raised); color:var(--muted); cursor:pointer; }
.image-order-lock svg { width:18px; height:18px; }
.image-order-lock[aria-pressed="true"] { color:var(--accent); border-color:var(--accent-line); background:var(--accent-faint); }
.image-order-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.image-order-press { filter:brightness(.98); }
.image-order-placeholder { opacity:.12!important; outline:1px solid var(--line); outline-offset:0; }
.image-order-ghost { position:fixed!important; z-index:2147483000!important; margin:0!important; pointer-events:none!important; transform:translate3d(0,0,0); will-change:transform; border-radius:8px; background:var(--surface-raised); box-shadow:0 3px 10px #0002; opacity:1; overflow:hidden; }
.image-order-ghost img { max-width:100%; width:100%; flex:1; min-height:0; height:0; object-fit:contain; }
.image-order-active { cursor:grabbing; user-select:none; }

.image-order-ghost { display:flex; flex-direction:column; }
.image-order-ghost > span { flex:none; padding:8px; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Keep surrounding cards still; only the dragged image follows the pointer. */
.image-order-active .image-order-placeholder { border-radius:8px; outline:1px solid var(--accent); opacity:.18 !important; }

.image-order-ghost .image-order-count { position:absolute; inset:10px 10px auto auto; min-width:26px; height:26px; padding:0 7px; display:grid; place-items:center; border-radius:999px; background:#007aff; color:white; font-size:13px; box-shadow:0 2px 8px #0003; }

/* Media headings keep the shared card grid and keyboard/drag selection intact. */
.included-grid > .included-style-heading {
  grid-column: 1 / -1; margin: 12px 0 0; padding: 8px 2px 4px;
  border-top: 1px solid var(--line); color: var(--muted);
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.included-grid > .included-style-heading:first-child { margin-top: 0; padding-top: 2px; border-top: 0; }

/* Empty person categories remain valid destinations without changing sample order. */
.sample-model-group-target { min-height:32px; padding:6px 8px; border:1px solid transparent; border-radius:7px; }
.sample-model-group-empty { grid-column:1 / -1; margin:0 0 8px; min-height:48px; padding:12px; color:var(--muted); font-size:12px; border:1px dashed var(--line); border-radius:8px; overflow-wrap:anywhere; }
.is-model-group-drop-target { outline:2px solid var(--accent); outline-offset:-2px; background:var(--accent-soft); }