:root{
  --card: #1a1d23;
  --card-2: #171a20;
  --ink: #e7eaf0;
  --muted: #a4a9b6;
  --round: 16px;
  --shadow: 0 20px 40px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.5);
  --accent: #7aa7ff;
}

.drive__wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(16px,4vw,32px);
}
.drive__head{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:16px;
  margin-bottom: 8px;
}
.drive__head h2{ 
    margin:0; 
    font-weight:800; 
    letter-spacing:.2px;
    color: black;
}

.drive__filters{
  display:flex; gap:8px; align-items:center;
}
.drive__filters input, .drive__filters select, .drive__filters button{
  background: var(--card);
  color: var(--ink);
  border: 1px solid #2a2f39;
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}
.drive__filters button{ cursor:pointer }
.drive__filters input::placeholder{ color:#8d93a2 }

/* .drive__grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
} */


/* Default: mobile = 1 per row */
.drive__grid{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}


/* Tablet: 2 per row */
@media (min-width: 600px){
  .drive__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop and up: 3 per row (fixed) */
@media (min-width: 900px){
  .drive__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Card */
.file{
  position: relative;
  background: var(--card);
  border-radius: var(--round);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  display: grid;
  grid-template-rows: auto auto;
}
.file:hover{
  transform: translateY(-2px);
  background: var(--card-2);
  box-shadow: 0 28px 60px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.55);
}

/* Thumbnail */
.file__thumb{ margin:0; aspect-ratio: 4/3; background:#0b0d11; }
.file__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }


.file__action:hover{ 
    background:rgba(0,0,0,.65); 
    color:#fff; 
    transform: scale(1.04) }

/* Meta */
.file__meta{ padding:10px 12px 12px; display:grid; gap:6px; }
.file__name{
  font-size:13px; color:#dfe5f1;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}


/* Pager */
.drive__pager{
  display:flex; gap:12px; align-items:center; justify-content:center;
  padding: 16px 0 6px;
}
.drive__pager a, .drive__pager span{
  background: var(--card);
  border: 1px solid #2a2f39;
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 12px;
  text-decoration: none;
}
.drive__pager .is-disabled{ opacity:.5; cursor:default }
.drive__page{ border:none; background:transparent; padding:0 4px; }