/* =========================================================================
   EduOne · Greenie — STEAM detect styles
   ========================================================================= */

.upload-zone { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-8); border: 2px dashed var(--c-border-2); border-radius: var(--r); cursor: pointer; transition: all var(--t); margin-top: var(--s-3); }
.upload-zone:hover { border-color: var(--c-primary-400); background: var(--c-primary-50); }
.upload-zone i { font-size: 2rem; color: var(--c-text-3); }

.mat-list { display: flex; flex-direction: column; gap: var(--s-2); }
.mat-row { display: flex; align-items: center; gap: var(--s-2); padding: 8px 12px; border: 1px solid var(--c-border); border-radius: var(--r); }

.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }
.proj-card { display: flex; flex-direction: column; }
.proj-meta { display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-text-2); margin: var(--s-3) 0; }
.proj-match { margin-top: auto; }
.proj-match small { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--c-text-3); }

.ext-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-4); }
@media (max-width: 860px) { .ext-grid { grid-template-columns: 1fr; } }