/* ---- Upload Zone ---- */
.upload-zone {
    border: 2px dashed rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    padding: 36px 20px; text-align: center;
    transition: var(--transition); margin-bottom: 20px;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: #8B5CF6; background: rgba(139,92,246,0.04);
}
.upload-icon { font-size: 40px; color: var(--text-2); margin-bottom: 10px; }
.upload-hint { font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* ---- Material Grid ---- */
.mat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .mat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .mat-grid { grid-template-columns: repeat(4, 1fr); } }
/* Material library grid: height follows each image (no fixed aspect-ratio,
   no object-fit) so every photo is fully visible - heads never get cropped.
   System library tiles (mat-sys) ARE locked to portrait 1728:2320 below. */
.mat-grid {
    display: grid; gap: 10px;
    grid-auto-rows: auto; align-content: start; align-items: start;
}
.mat-grid[data-view="list"] { grid-template-columns: 1fr; }
.mat-grid[data-view="large"] { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mat-grid[data-view="small"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.mat-item {
    position: relative; border-radius: var(--radius); overflow: hidden;
    cursor: pointer; background: var(--bg-card);
}
.mat-item img { width: 100%; height: auto; display: block; transition: var(--transition); }
/* System library tiles: lock to portrait 1728:2320 and crop to fill */
.mat-item.mat-sys:not(.mat-item-list) img { aspect-ratio: 1728 / 2320; object-fit: cover; }
/* "No person" badge on library photo cards */
.mat-flag {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 20px;
    background: rgba(17, 24, 39, 0.78); color: #FBBF24;
    font-size: 11px; font-weight: 600; line-height: 1.5;
    backdrop-filter: blur(3px);
    box-shadow: 0 2px 7px rgba(0,0,0,0.4);
    pointer-events: none;
}
.mat-flag i { font-size: 11.5px; }
/* Person detection line in the library detail modal */
.det-ok { color: #34D399; font-weight: 600; }
.det-warn { color: #FBBF24; font-weight: 600; }
.mat-item .mi-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
    opacity: 0; transition: var(--transition);
}
.mat-item:hover .mi-overlay { opacity: 1; }

/* ---- Library: groups & view switch ---- */
.mat-toolbar { margin-bottom: 2px; }
#viewSwitch .btn { color: var(--text-2); border-color: rgba(255,255,255,0.12); }
#viewSwitch .btn.active { background: rgba(139,92,246,0.16); border-color: #8B5CF6; color: #fff; }
#viewSwitch .btn:hover { border-color: #8B5CF6; color: #fff; }
.mat-section { margin-bottom: 26px; }
.mat-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--text-1);
    margin-bottom: 12px; padding-left: 2px;
}
.mat-section-title .badge {
    background: rgba(139,92,246,0.18); color: #C4B5FD;
    font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px;
}
/* List view */
.mat-item-list {
    display: flex; align-items: center; gap: 12px;
    aspect-ratio: auto; padding: 8px 10px; border-radius: var(--radius);
    background: var(--bg-card);
}
.mat-item-list img {
    width: 56px; height: 56px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
}
.mat-item-list .mil-info { flex: 1; min-width: 0; }
.mat-item-list .mil-name { font-size: 13px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mat-item-list .mil-meta { font-size: 12px; color: var(--text-3); }
.mat-item-list .mil-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mat-item-list:hover img { transform: none; }

/* ---- Photo Select (horizontal) ---- */
.photo-pick-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 12px; }
.photo-pick {
    min-width: 90px; height: 90px; border-radius: var(--radius);
    overflow: hidden; cursor: pointer; border: 2px solid transparent;
    transition: var(--transition); flex-shrink: 0;
}
.photo-pick.selected { border-color: #8B5CF6; box-shadow: var(--glow-sm); }
.photo-pick img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Scene Pick Grid ---- */
.scene-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .scene-pick { grid-template-columns: repeat(3, 1fr); } }
.scene-pick-card {
    padding: 18px 14px; text-align: center; cursor: pointer;
    border: 2px solid transparent; border-radius: var(--radius-lg);
    background: var(--bg-card); transition: var(--transition);
}
.scene-pick-card:hover { transform: translateY(-2px); }
.scene-pick-card.selected { border-color: #8B5CF6; box-shadow: var(--glow-sm); }
.scene-pick-card .spc-icon { font-size: 26px; margin-bottom: 6px; }